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).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).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();

var checkboxHeader = ‘‘;
var dragHandle = ‘‘;
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 = ‘‘;
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}]);

};