Forum
17:40
04/09/2014
Hello,
I am using tabletogrid approach to load the jqgrid. In this sorting, searching and Resize is working perfectly with my code changes.
I tried to incorporate the freeze column functionality for the first 3 columns, after implemented this functionality sorting is not working completely and when Resize columns headers alignment is missing. Also filter also not working for first time of freeze columns.
Below is my code can you help me on this.Â
this.turnTableToGrid = function(){
var that = this;
//Frozen column code -- Note after frozen sorting is not working
var $grid = $("#"+that.mainGridId),
resizeColumnHeader = function () {
var rowHight, resizeSpanHeight,
// get the header row which contains
headerRow = $(this).closest("div.ui-jqgrid-view")
.find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");
// reset column height
headerRow.find("span.ui-jqgrid-resize").each(function () {
this.style.height = '';
});
// increase the height of the resizing span
resizeSpanHeight = 'height: ' + headerRow.height() + 'px !important; cursor: col-resize;';
headerRow.find("span.ui-jqgrid-resize").each(function () {
this.style.cssText = resizeSpanHeight;
});
// set position of the dive with the column header text to the middle
rowHight = headerRow.height();
headerRow.find("div.ui-jqgrid-sortable").each(function () {
var ts = $(this);
ts.css('top', (rowHight - ts.outerHeight()) / 2 + 'px');
});
},
fixPositionsOfFrozenDivs = function () {
var $rows;
if (typeof this.grid.fbDiv !== "undefined") {
$rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv);
$('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
if ($(this).hasClass("jqgrow")) {
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
}
});
$(this.grid.fbDiv).height(this.grid.bDiv.clientHeight);
$(this.grid.fbDiv).css($(this.grid.bDiv).position());
}
if (typeof this.grid.fhDiv !== "undefined") {
$rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv);
$('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
});
$(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
$(this.grid.fhDiv).css($(this.grid.hDiv).position());
}
},
fixGboxHeight = function () {
var gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight(),
pagerHeight = $(this.p.pager).outerHeight();
$("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight);
gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight();
pagerHeight = $(this.p.pager).outerHeight();
$("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight);
};
var checkboxHeader = '<label onclick="releaseDateResultProcessorObject.selectAllSelectorCheckboxes(event)" style="margin-top: -5px;"><input type="checkbox" class="ace" id="checkAll_checkbox"/><span class="lbl"></span></label>';
var dragHandle = '<i class="icon-move" data-rel="tooltip" title="Drag To Move" data-placement="right"></i>';
var options = {
datatype:'local',
width:"1360",
height: "100%",
shrinkToFit: false,
rownumbers: false,
gridview: true,
multiSort: true,
sortname: "Id",
sortorder: "asc",
viewrecords: true,
loadui: true,
ignoreCase:true,
// loadonce: true, -- since it's of no use since we are using tableToGrid approach..
multiselect:false,
rowNum : 10000,
deepempty : true,
sortable: false,
resizeStop: function () {
resizeColumnHeader.call(this);
fixPositionsOfFrozenDivs.call(this);
fixGboxHeight.call(this);
/*if($('#gbox_rdr_tableToGrid .ui-search-toolbar').is(":visible")) {
$('#gbox_rdr_tableToGrid').find(".frozen-div.ui-state-default.ui-jqgrid-hdiv").css({"line-height": "4px"});
$('#gbox_rdr_tableToGrid').find(".frozen-div.ui-state-default.ui-jqgrid-hdiv").find('.ui-search-toolbar').removeAttr('style');
$('#gbox_rdr_tableToGrid').find(".frozen-div.ui-state-default.ui-jqgrid-hdiv").find('.ui-jqgrid-labels').css({"height": "44px"});
} else {
$('#gbox_rdr_tableToGrid').find(".frozen-div.ui-state-default.ui-jqgrid-hdiv").css({"line-height": "4px"});
$('#gbox_rdr_tableToGrid').find(".frozen-div.ui-state-default.ui-jqgrid-hdiv").find('.ui-search-toolbar').css({"height": "1px"});
$('#gbox_rdr_tableToGrid').find(".frozen-div.ui-state-default.ui-jqgrid-hdiv").find('.ui-jqgrid-labels').css({"height": "56px"});
}*/
},
loadComplete: function() {
that.checkNotesExisted();
$('#'+that.mainGridId +' tr').each(function (index,trElem){
$(trElem).attr('id',index);
});
that.lastSel = null;
if(that.editMode){
/*$('#' + that.mainGridId + ' .date-picker-noImage').datepicker("destroy");
$('#' + that.mainGridId + ' .date-picker-noImage').datepicker({format: "dd-M-yyyy", forceParse: false,autoclose:true}).on('changeDate', function (ev) {
$(this).datepicker('hide');
});*/
that.onLoadCheckForInlineEdit();
that.datePickerRDFocusOut();
}
var recordCount = $(this).jqGrid('getGridParam', 'records');
if(recordCount > 0) {
$('#rdrCountInfo').removeClass('hide');
$('#rdr-count').html(recordCount);
} else {
$('#rdrCountInfo').addClass('hide');
}
var show = (releaseDateResultProcessorObject.editMode == false ? 'disabled="disabled"' : '');
var checkboxHeader = '<label onclick="releaseDateResultProcessorObject.selectAllSelectorCheckboxes(event)" style="margin-top: -5px;"><input type="checkbox" ' + show + ' class="ace" id="checkAll_checkbox"/><span class="lbl"></span></label>';
var checkBoxHeaderId = "rdr_checkboxHeader";
$('.frozen-div.ui-state-default.ui-jqgrid-hdiv').find("#jqgh_"+that.mainGridId+"_"+checkBoxHeaderId).html(checkboxHeader);
$('.ui-state-default.ui-jqgrid-hdiv').find("#jqgh_"+that.mainGridId+"_"+checkBoxHeaderId).html(checkboxHeader);
//$(".frozen-div.ui-state-default.ui-jqgrid-hdiv").css({"position": "absolute", "left": "0px", "top": "1px"});
//$(".frozen-bdiv.ui-jqgrid-bdiv").css({"overflow-y": "hidden", "height": "383px", "background": "white", "top": "32px", "overflow": "hidden", "border-right": "1px solid #d3d3d3"});
//Frozen column code
fixPositionsOfFrozenDivs.call(this);
if($('#gbox_rdr_tableToGrid .ui-search-toolbar').is(":visible")) {
$('#gbox_rdr_tableToGrid').find(".frozen-div.ui-state-default.ui-jqgrid-hdiv").css({"line-height": "17px"});
/*$('#gbox_rdr_tableToGrid').find(".frozen-bdiv.ui-jqgrid-bdiv").css({"top": "1px"});
$('#gbox_rdr_tableToGrid').find(".frozen-div.ui-state-default.ui-jqgrid-hdiv").find(".ui-jqgrid-htable .ui-jqgrid-labels").css({"height": "32px"});*/
$('#gbox_rdr_tableToGrid').find(".frozen-div.ui-state-default.ui-jqgrid-hdiv").find('.ui-search-toolbar').removeAttr('style');
} else {
$('#gbox_rdr_tableToGrid').find(".frozen-div.ui-state-default.ui-jqgrid-hdiv").css({"line-height": "4px"});
// $('#gbox_rdr_tableToGrid').find(".frozen-bdiv.ui-jqgrid-bdiv").css({"top": "101px"});
// $('#gbox_rdr_tableToGrid').find(".frozen-div.ui-state-default.ui-jqgrid-hdiv").find(".ui-jqgrid-htable .ui-jqgrid-labels").css({"height": "56px"});
$('#gbox_rdr_tableToGrid').find(".frozen-div.ui-state-default.ui-jqgrid-hdiv").find('.ui-search-toolbar').css({"height": "1px"});
}
},
//colName: [checkboxHeader,dragHandle,'Description', 'Media', 'Source Type', 'Source', 'Auto Firm', 'Auto Firm Period','', '', '', '', '', '', ''],
/*colName: [checkboxHeader,'Title','Fin Prod ID', 'Product Type', 'Title Tags', 'Date Type', 'Territory','Language', 'Release Date', 'Rel Date Status', 'Feed Date', 'Feed Date Status', 'Manual Date',
'Temp/Perm','Projected Date','Rel Date Tags','','','','','','','','','','','','','','','','',''],// count is 33
searchoptions is as follows..
sopt : ['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
The corresponding texts are in language file and mean the following:
['equal','not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'] */
colModel: [{name: 'rdr_checkboxHeader',editable: false, width:30, align:'center', sortable:false, formatter:that.rowSelectorFormatter,resizable: false,search:false, frozen: true },
{name: 'rdr_icon',width:105,editable: false, sortable:false, formatter:that.iconFormatter,resizable: false,search:false, frozen: true },
{name: 'rdr_titleName',editable: false, sortable:true, width:190,searchoptions: { sopt: ['cn', 'eq','bw']}, frozen: true },
{name: 'rdr_fnnclPrdctId', editable: false, sortable:true, width:95,searchoptions: { sopt: ['cn', 'eq','bw']}},
{name: 'rdr_productType', editable: false, width:110,searchoptions: { sopt: ['cn', 'eq','bw']}},
{name: 'rdr_titleTags', editable: false, width:90,searchoptions: { sopt: ['cn', 'eq','bw']}},
{name: 'rdr_dateType', editable: false, width:90,searchoptions: { sopt: ['cn', 'eq','bw']}},
{name: 'rdr_territory', editable: false, width:170,searchoptions: { sopt: ['cn', 'eq','bw']}},
{name: 'rdr_language', width:90, editable:false,searchoptions: { sopt: ['cn', 'eq','bw']}},
{name: 'rdr_releaseDate', width:110, editable:false, sorttype:'date', datefmt:'Y-m-d', searchrules:{date:true}, formatter:that.releaseDateFormatter,
searchoptions: { sopt: ['eq','lt','gt','ne'], dataInit: that.initDateSearch }
},
{name: 'rdr_relDateStatus', width:170, editable:false,formatter:that.relDateStatusFormatter/*,searchoptions: { sopt: ['cn', 'eq','bw']}*/,title:false},
{name: 'rdr_feedDate', index: 'rdr_feedDate', width:105, editable:false, sorttype:'date', datefmt:'Y-m-d', searchrules:{date:true}, formatter:that.feedDateFormatter,
searchoptions: { sopt: ['eq','lt','gt','ne'], dataInit: that.initDateSearch }
},
{name: 'rdr_feedDateStatus', width:140, editable:true,searchoptions: { sopt: ['cn', 'eq','bw']},title:false},
/*{name: 'rdr_manualDate', width:90, editable:false, sorttype:'date', datefmt:'Y-m-d', formatter:that.manualDateFormatter,searchoptions: { sopt: ['cn', 'eq','bw']},searchrules:{date:true},clearSearch : true,dataInit : function (elem) {
$(elem).datepicker({format: "dd-M-yyyy", forceParse: false,autoclose:true});
} },*/
{name: 'rdr_manualDate', index: 'rdr_manualDate', width:105, editable:false, sorttype:'date', datefmt:'Y-m-d', searchrules:{date:true}, formatter:that.manualDateFormatter,
searchoptions: { sopt: ['eq','lt','gt','ne'], dataInit: that.initDateSearch }
},
{name: 'rdr_tempPerm', index: 'rdr_tempPerm', width:170, editable:false, formatter:that.tempPermFormatter, title:false//stype: 'select',
//sorttype: function(cell) {return categories[cell];},
//searchoptions: { sopt:['eq'], value: ':Any;1:Permanent;2:Temporary' } /*,searchoptions: { sopt: ['cn', 'eq','bw']}*/
},
{name: 'rdr_projectedDate', index: 'rdr_projectedDate', width:125, editable:false, sorttype:'date', datefmt:'Y-m-d', searchrules:{date:true}, formatter:that.projectedDateFormatter,
searchoptions: { sopt: ['eq','lt','gt','ne'], dataInit: that.initDateSearch }
},
{name: 'rdr_relDateTags', width:170, editable:true,formatter:that.releaseDateTagsFormatter/*relDateTagFormatter,searchoptions: { sopt: ['cn', 'eq','bw']}*/,title:false},
{name: 'rdr_createDate', hidden:true, editable:false, key:true},
{name: 'rdr_updateDate', hidden:true, editable:false},
{name: 'rdr_createName', hidden:true, editable:false},
{name: 'rdr_updateName', hidden:true, editable:false},
{name: 'rdr_releaseDateId', hidden:true, editable:false},
{name: 'rdr_comments', hidden:true, editable:false},
{name: 'rdr_productId', hidden:true, editable:false},
{name: 'rdr_releaseDateGuidelineId', hidden:true, editable:false},
{name: 'rdr_dateSourceId', hidden:true, editable:false},
{name: 'rdr_productVersionId', hidden:true, editable:false},
{name: 'rdr_admissions', hidden:true, editable:false},
{name: 'rdr_boxOfficeAmountLc', hidden:true, editable:false},
{name: 'rdr_boxOfficeAmountUsd', hidden:true, editable:false},
{name: 'rdr_compareString', hidden:true, editable:false},
{name: 'rdr_versionId', hidden:true, editable:false},
{name: 'rdr_intlPrdTypeId', hidden:true, editable:false},
{name: 'rdr_relaseDateTags', hidden:true, editable:false},
{name: 'rdr_affectedWindowFlag', hidden:true, editable:false},
{name: 'rdr_RDGAllowManaulFlag', hidden:true, editable:false},
{name: 'rdr_CPReleaseDate', hidden:true, editable:false},
{name: 'rdr_UIDisplayFlag', hidden:true, editable:false}],
onSelectRow: function(id,status,event){
releaseDateResultProcessorObject.onReleaseDateSelectRow(id,status,event);
}
};
tableToGrid("#"+that.mainGridId, options);
var filterOptions = {
autosearch : true,
searchOnEnter : true,
searchOperators : true,
beforeSearch: function () {
that.modifySearchingFilter.call(this, ' ');
},
afterSearch : that.afterGridSearch()
};
var grid = $("#"+that.mainGridId),
getUniqueNames = function(columnName) {
var uniqueTexts = [];
var map = "";
if(columnName == 'rdr_tempPerm') {
map = releaseDateResultProcessorObject.dataMap.manualFlagMap;
} else if(columnName == 'rdr_relDateStatus') {
map = releaseDateResultProcessorObject.dataMap.releaseDateStatusMap;
} else if(columnName == 'rdr_relDateTags') {
map = releaseDateResultProcessorObject.dataMap.releaseDateTagMap;
}
for(var x in map){
if(map[x] != '' && map[x].length > 0)
uniqueTexts.push(map[x]);
}
return uniqueTexts;
},
buildSearchSelect = function(uniqueNames) {
var values=":All";
$.each (uniqueNames, function() {
values += ";" + this + ":" + this;
});
return values;
},
setSearchSelect = function(columnName) {
grid.jqGrid('setColProp', columnName,
{
stype: 'select',
searchoptions: {
value:buildSearchSelect(getUniqueNames(columnName)),
sopt: columnName === 'rdr_relDateTags' ? ['cn'] : ['eq']
}
}
);
};
setSearchSelect('rdr_tempPerm');
setSearchSelect('rdr_relDateStatus');
setSearchSelect('rdr_relDateTags');
$("#"+that.mainGridId).jqGrid('filterToolbar', filterOptions);
$("#"+that.mainGridId)
.jqGrid('destroyFrozenColumns')
.jqGrid('setFrozenColumns')
.trigger('reloadGrid', [{current:true}]);
};
14:35
Moderators
30/10/2007
Hello,
Â
Simple to sayyourcode is complex and very difficult to beanalyzed.
Try withsimple code on which we can operate.
Â
Regards
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
Most Users Ever Online: 715
Currently Online:
18 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66