jQuery Grid Plugin - jqGrid

Hello,

I am using tabletogrid approach to build the jqgrid. My jqgrid contains 30 columns and 2000 rows. When i filter the data using filter toolbar it takes around 30 seconds to reload the grid. Can you help me out on this.

Below is the complete code of my jqgrid.

 

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}]);

};

 

this.modifySearchingFilter = function (separator) {
var i, l, rules, rule, parts, j, group, str,
filters = $.parseJSON(this.p.postData.filters);
if(filters.rules.length > 0) {
$(filters.rules).each(function(index, elem) {
if(elem.field == 'rdr_releaseDate' || elem.field == 'rdr_feedDate' || elem.field == 'rdr_manualDate' || elem.field == 'rdr_projectedDate') {
var dateValue = elem.data;
var tempDate = $.datepicker.formatDate('yy-mm-dd', new Date(dateValue.replace(/-/g,"/")));
var isoFormat = new Date(tempDate).toISOString();
elem.data = isoFormat;
}
});
}

this.p.postData.filters = JSON.stringify(filters);
};

 

Thanks in advance.