Grid loading issue

[SanatanParticipant]

I am working on jx-grid within jx-splitter

Grid Functionality: Sorting, Filtering, Groping and  Export Features.
Splitter functionality: show/hide extra columns

But after search submit, the result page is very slow in browser Firefox/IE10 and chrome. It hang (Not Responding) for a while and then grid is displayed (Approx 30 seconds if server is used by other machine and approx 15 seconds on server) .

Please help me in this issue.
Please Suggest the changes in the code

// <![CDATA[
$(document).ready(function () {$('#mainSplitter').jqxSplitter({ width: 990, height: 720, theme: 'office', panels: [{ size: 210 }, { size:790 }] });

// prepare the data
var theme = ‘energyblue’;

var data=;
var source =
{

datatype: “json”,
//totalrecords: 5, unboundmode: true,
datafields: [
{ name: ‘PRODUCT_ID’, type: ‘string’},
{ name: ‘PRODUCT_NAME’, type: ‘string’},
{ name: ‘SYNONYMS’, type: ‘string’},
{ name: ‘THERAPEUTIC_AREA’, type: ‘string’},
{ name: ‘PRIMARY_CLINICAL_INDICATION’, type: ‘string’},
{ name: ‘CURRENT_MOLECULE_STATUS’, type: ‘string’},
{ name: ‘LATEST_DEVELOPMENT_PHASE’, type: ‘string’},
{ name: ‘PLATFORM’, type: ‘string’},
{ name: ‘TARGET_ANTIGEN’, type: ‘string’},
{ name: ‘ORGANIZATIONBroad’, type: ‘string’},
{ name: ‘KD’, type: ‘string’},
{ name: ‘ISOTYPE’, type: ‘string’},
{ name: ‘LIGHT_CHAIN_TYPE’, type: ‘string’},
{ name: ‘ORIGIN’, type: ‘string’},
{ name: ‘ANTIBODY_TYPE’, type: ‘string’},
{ name: ‘HALF_LIFE’, type: ‘string’},
{ name: ‘TOX_ID’, type: ‘string’}
],
pagenum: 1,
id: ‘PRODUCT_ID’,
localdata: data,
root: ‘Rows’,
cache: false,
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
},

};

var dataAdapter = new $.jqx.dataAdapter(source);
var toThemeProperty = function (className) {
return className + ” ” + className + “-” + theme;
}
var groupsrenderer = function (text, group, expanded, data) {
if (data.groupcolumn.datafield == ‘price’ || data.groupcolumn.datafield == ‘quantity’) {
if (data.subItems.length > 0) {
var aggregate = this.getcolumnaggregateddata(data.groupcolumn.datafield, [‘sum’], true, data.subItems);
}
else {
var rows = new Array();
var getRows = function (group, rows) {
if (group.subGroups.length > 0) {
for (var i = 0; i < group.subGroups.length; i++) {
getRows(group.subGroups[i], rows);
}
}
else {
for (var i = 0; i < group.subItems.length; i++) {
rows.push(group.subItems[i]);
}
}
}
getRows(data, rows);
var aggregate = this.getcolumnaggregateddata(data.groupcolumn.datafield, [‘sum’], true, rows);
}

return ‘

‘ + text + ‘, ‘ + ‘‘ + “Total” + ‘ (‘ + aggregate.sum + ‘)’ + ‘

‘;
}
else {
return ‘

‘ + text + ‘‘;
}
}$(“#jqxgrid”).jqxGrid(
{source: dataAdapter,
theme: ‘energyblue’,
height: 620,
pageable: true,
sortable: true,
//autoheight: true,
//virtualmode: true,
rowdetails: true,
filterable: true,
showfilterrow: true,
pagesize:25,
rowsheight: 20,
width: ‘100%’,
pagesizeoptions: [’25’,’50’, ’75’, ‘100’, ],
enabletooltips:true,
showstatusbar: true,
statusbarheight: 25,
altrows: true,
groupable: true,
groupsrenderer: groupsrenderer,
selectionmode: ‘singlecell’,
rowdetails: true,
rendergridrows: function () {
return dataAdapter.records;
},

ready: function () {
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, ‘THERAPEUTIC_AREA’);
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, ‘KD’);
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, ‘ISOTYPE’);
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, ‘LIGHT_CHAIN_TYPE’);
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, ‘ORIGIN’);
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, ‘ANTIBODY_TYPE’);
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, ‘PLATFORM’);
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, ‘HALF_LIFE’);
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, ‘TARGET_ANTIGEN’);
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, ‘TOX_ID’);

},
columns: [
{ text: ‘PRODUCT NAME ‘, datafield: ‘PRODUCT_NAME’, filtertype: ‘checkedlist’,width: 150,cellsrenderer: function(row, column, value, defaultSettings, columnSettings, rowdata ) {
if (value.indexOf(‘#’) != -1) {
value = value.substring(0, value.indexOf(‘#’));
}
var format = { target: ‘”_blank”‘ };
return ”+value+”
return defaultSettings;
} },
{ text: ‘SYNONYMS’, filtertype: ‘checkedlist’,datafield: ‘SYNONYMS’, width: 150 },
{ text: ‘TOX DATA’, datafield: ‘TOX_ID’, filterable: false,width: 80,cellsrenderer: function(row, column, value, defaultSettings, columnSettings, rowdata ) {
if (value.indexOf(‘#’) != -1) {
value = value.substring(0, value.indexOf(‘#’));
}
var format = { target: ‘”_blank”‘ };
return ”+value+”
return defaultSettings;
} },

{ text: ‘THERAPEUTIC AREA’,groupable: true,filtertype: ‘checkedlist’, datafield: ‘THERAPEUTIC_AREA’, width: 200 },
{ text: ‘PRIMARY CLINICAL INDICATION’,groupable: true,filtertype: ‘checkedlist’, datafield: ‘PRIMARY_CLINICAL_INDICATION’, width: 200 },
{ text: ‘CURRENT MOLECULE STATUS’, groupable: true, filtertype: ‘checkedlist’,datafield: ‘CURRENT_MOLECULE_STATUS’, width: 130 },
{ text: ‘LATEST DEVELOPMENT PHASE’,groupable: true, filtertype: ‘checkedlist’,datafield: ‘LATEST_DEVELOPMENT_PHASE’, width: 130 },
{ text: ‘PLATFORM’, groupable: true,filtertype: ‘checkedlist’,datafield: ‘PLATFORM’, width: 150 },
{ text: ‘TARGET ANTIGEN’,groupable: true, filtertype: ‘checkedlist’,datafield: ‘TARGET_ANTIGEN’, width: 180 },
{ text: ‘ORGANIZATION’, groupable: true,filtertype: ‘checkedlist’,datafield: ‘ORGANIZATIONBroad’, width: 185 },
{ text: ‘KD’, groupable: true,filtertype: ‘checkedlist’,datafield: ‘KD’, width: 150 },
{ text: ‘ISOTYPE’, groupable: true,filtertype: ‘checkedlist’,datafield: ‘ISOTYPE’, width: 150 },
{ text: ‘LIGHT CHAIN TYPE’, groupable: true,filtertype: ‘checkedlist’,datafield: ‘LIGHT_CHAIN_TYPE’, width: 150 },
{ text: ‘ORIGIN’, groupable: true,filtertype: ‘checkedlist’,datafield: ‘ORIGIN’, width: 150 },
{ text: ‘ANTIBODY TYPE’, groupable: true,filtertype: ‘checkedlist’,datafield: ‘ANTIBODY_TYPE’, width: 150 },
{ text: ‘HALF LIFE’, groupable: true,filtertype: ‘checkedlist’,datafield: ‘HALF_LIFE’, width: 150 }
]
});

var listSource = [
{ label: ‘SYNONYMS’, value: ‘SYNONYMS’, checked: true },
{ label: ‘THERAPEUTIC AREA’, value: ‘THERAPEUTIC_AREA’, checked: false },
{ label: ‘PRIMARY CLINICAL INDICATION’, value: ‘PRIMARY_CLINICAL_INDICATION’, checked: true},
{ label: ‘CURRENT MOLECULE STATUS’, value: ‘CURRENT_MOLECULE_STATUS’, checked: true },
{ label: ‘LATEST DEVELOPMENT PHASE’, value: ‘LATEST_DEVELOPMENT_PHASE’, checked: true },
{ label: ‘PLATFORM’, value: ‘PLATFORM’, checked: false },
{ label: ‘TARGET ANTIGEN’, value: ‘TARGET_ANTIGEN’, checked: false },
{ label: ‘ORGANIZATION’, value: ‘ORGANIZATIONBroad’, checked: true },
{ label: ‘KD’, value: ‘KD’, checked: false },
{ label: ‘ISOTYPE’, value: ‘ISOTYPE’, checked: false },
{ label: ‘LIGHT CHAIN TYPE’, value: ‘LIGHT_CHAIN_TYPE’, checked: false },
{ label: ‘ORIGIN’, value: ‘ORIGIN’, checked: false },
{ label: ‘ANTIBODY TYPE’, value: ‘ANTIBODY_TYPE’, checked: false },
{ label: ‘HALF-LIFE (T1/2)’, value: ‘HALF_LIFE’, checked: false },
{ label: ‘TOX_ID’, value: ‘TOX_ID’, checked: false }
];

$(“#jqxlistbox”).jqxListBox({ source: listSource, width: 200, height: 500, theme: ‘energyblue’, checkboxes: true });
$(“#jqxlistbox”).on(‘checkChange’, function (event) {
if (event.args.checked) {
$(“#jqxgrid”).jqxGrid(‘showcolumn’, event.args.value);
}
else {
$(“#jqxgrid”).jqxGrid(‘hidecolumn’, event.args.value);
}
});

$(‘#mainSplitter’).jqxSplitter(‘refresh’);
$(‘#mainSplitter’).jqxSplitter(‘collapse’);

$(“#excelExport”).jqxButton({ theme: ‘energyblue’ });
$(“#xmlExport”).jqxButton({ theme: ‘energyblue’ });
$(“#csvExport”).jqxButton({ theme: ‘energyblue’ });
$(“#htmlExport”).jqxButton({ theme: ‘energyblue’ });

$(“#excelExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘tox_advance_search_results’);
});
$(“#xmlExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xml’, ‘tox_advance_search_results’);
});
$(“#csvExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘csv’, ‘tox_advance_search_results’);
});
$(“#htmlExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘html’, ‘tox_advance_search_results’);
});

});
// ]]>

 

 

 

[DimitarParticipant]

Hello Sanatan,

Note that you have set rendergridrows but not virtualmode. Virtual mode can handle large data sets without any performance cost, as shown in the demo Virtual Paging. If the issue persists, please provide us with your code, which is executed when the query is submitted and remember to format your code as explained in the forum topic Code Formatting.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts