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).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();
$(“#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 = ‘‘;
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}]);
};
Â
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.
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top