Grid expand/collapse slow

[NausherParticipant]

Hi,
I have around 20 parent grid and 20 nested grid.

When programmatically I try to expand/collapse it takes around 6-8 seconds which is very slow.
I am using below code in for loop

$(‘#jqxgrid’).jqxGrid(‘showrowdetails’, rowBoundIndex)
$(‘#jqxgrid’).jqxGrid(‘hiderowdetails’, rowBoundIndex)

Can you please tell any other approach?

Thanks
Nausher

[MartinParticipant]

Hello Nausher,

We were not able to reproduce such behavior.
Can you provide us an example where it could be observed?
Thank you!

Best Regards,
Martin

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

[NausherParticipant]

Hi,

Please find the code below which we are using creating the nested grid

function createGrid() {
/// <summary>
/// Creation of parent grid
/// </summary>
$(“#jqxgridSubmission”).jqxGrid(
{
width: ‘100%’,
theme: ‘metro’,
sortable: false,
groupable: false,
showheader: true,
source: submissionAdapter,
rowdetails: true,
enabletooltips: false,
initrowdetails: initrowdetails,
autoheight: true,
groupsexpandedbydefault: true,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 0px;’></div>”, rowdetailsheight: 100, rowdetailshidden: true },
selectionmode: ‘checkbox’,
altrows: false,
columns: [
{ text: ‘ID’, datafield: ‘fir_submissionid’, hidden: true },
{ text: ‘fir_regulatorystatusValue’, datafield: ‘fir_regulatorystatus’, hidden: true },
{ text: ‘Submission’, datafield: ‘fir_name’, width: widthSubmission, cellclassname: ‘cellHeaderHyperlink’ },
{ text: ‘Variant’, datafield: ‘fir_arvariantcalc’, width: widthVariant, cellclassname: ‘cellHeader’ },
{ text: ‘Regulatory Status’, datafield: ‘fir_regulatorystatus@OData.Community.Display.V1.FormattedValue’, width: widthRegulatoryStatus, cellclassname: cellclass },
{ text: ‘Type’, datafield: ‘fir_grouptype@OData.Community.Display.V1.FormattedValue’, width: widthType, cellclassname: ‘cellHeader’ },
{ text: ‘Base’, datafield: ‘fir_base’, width: widthBase, cellclassname: ‘cellHeader’ },
{ text: ‘Entry Date’, datafield: ‘createdon’, width: widthEntryDate, cellclassname: ‘cellHeader’, cellsformat: fir_constants.dateFormat },
{ text: ‘Submitted By’, datafield: ‘_fir_submittedbyid_value@OData.Community.Display.V1.FormattedValue’, width: widthSubmittedBy, cellclassname: ‘cellHeader’ }
]
});

}

function initrowdetails(index, parentElement, gridElement, record) {
/// <summary>
/// Initialization and creation of nested/Child grid
/// </summary>
var id = record.uid.toString();
var grid = $($(parentElement).children()[0]);
nestedGrids[index] = grid;
// fill the orders depending on the id.
var submmittedproductbyid = [];
for (var m = 0; m < submmittedProducts.length; m++) {
if (id.toLowerCase() == submmittedProducts[m][“_fir_submissionid_value”].toLowerCase()) {
submmittedproductbyid.push(submmittedProducts[m]);
}

}

//Sort as per submmitted product name
submmittedproductbyid.sort(function (a, b) {
var nameA = a.fir_name.toLowerCase(), nameB = b.fir_name.toLowerCase()
if (nameA < nameB) //sort string ascending
return -1
if (nameA > nameB)
return 1.
return 0 //default return value (no sorting)
})

var submmittedproductsource = {
datafields: [
{ name: ‘fir_submittedproductid’, type: ‘string’ },
{ name: ‘_fir_submissionid_value’, type: ‘string’ },
{ name: ‘fir_name’, type: ‘string’ },
{ name: ‘_fir_mainsupplychainnoticeid_value’, type: ‘string’ },
{ name: ‘_fir_mainsupplychainnoticeid_value@OData.Community.Display.V1.FormattedValue’, type: ‘string’ },
{ name: ‘fir_appldosage’, type: ‘string’ },
{ name: ‘_fir_commercialnumberid_value@OData.Community.Display.V1.FormattedValue’, type: ‘string’ },
{ name: ‘fir_commercialname’, type: ‘string’ },
{ name: ‘_fir_commercialnumberid_value’, type: ‘string’ },
{ name: ‘_fir_productid_value’, type: ‘string’ },
{ name: ‘fir_regionalcollectionsfl’, type: ‘string’ },
{ name: ‘fir_regionalclientportfoliofl’, type: ‘string’ },
{ name: ‘fir_regionalpromotionsfl’, type: ‘string’ },
{ name: ‘fir_allregionscollectionsfl’, type: ‘string’ },
{ name: ‘fir_allregionsclientportfoliofl’, type: ‘string’ },
{ name: ‘fir_allregionspromotionsfl’, type: ‘string’ },
{ name: ‘fir_inhighspeedcollectionfl’, type: ‘string’ },
{ name: ‘fir_creationcost’, type: ‘string’ },
{ name: ‘_fir_creationcostcurrencyid_value’, type: ‘string’ },
{ name: ‘_fir_creationcostplantid_value@OData.Community.Display.V1.FormattedValue’, type: ‘string’ },
{ name: ‘_fir_creationcostplantid_value’, type: ‘string’ },
{ name: ‘fir_submission1_fir_pearvariantsid’, type: ‘string’ },
{ name: ‘fir_appldosageuomfl@OData.Community.Display.V1.FormattedValue’, type: ‘string’ },
{ name: ‘enablecollections’, type: ‘boolean’ },
{ name: ‘fir_product_fir_upn’, type: ‘string’ }

],
id: ‘fir_submittedproductid’,
localdata: submmittedproductbyid
};
var nestedGridAdapter = new $.jqx.dataAdapter(submmittedproductsource, {
beforeLoadComplete: function (records) {
var data = new Array();
// update the loaded records.
for (var i = 0; i < records.length; i++) {
var submmittedproduct = records[i];
if (!isNullorEmpty(submmittedproduct.fir_regionalcollectionsfl) && submmittedproduct.fir_regionalcollectionsfl != ‘None’)
submmittedproduct.enablecollections = true;
else
submmittedproduct.enablecollections = false;
data.push(submmittedproduct);

}
return data;
}
});

if (grid != null) {
grid.jqxGrid({
source: nestedGridAdapter,
width: ‘100%’,
height: 125,
theme: ‘metro’,
sortable: false,
showheader: true,
enabletooltips: false,
showstatusbar: true,
selectionmode: ‘checkbox’,
altrows: false,
autoheight: false,
columns: [
{ text: ‘ID’, datafield: ‘fir_submittedproductid’, hidden: true },
{ text: ‘SUBID’, datafield: ‘_fir_submissionid_value’, hidden: true },
{ text: ‘SCID’, datafield: ‘_fir_mainsupplychainnoticeid_value’, hidden: true },
{ text: ‘Submitted Products’, datafield: ‘fir_name’, width: widthSubmittedProduct, cellclassname: ‘cellHeaderHyperlink’ },
{ text: ‘Commercial Number’, datafield: ‘_fir_commercialnumberid_value@OData.Community.Display.V1.FormattedValue’, width: widthCommercialNumber, cellclassname: ‘cellHeader’ },
{ text: ‘Commercial Name’, datafield: ‘fir_commercialname’, width: widthCommercialName, cellclassname: ‘cellHeader’ },
{ text: ‘Appl. Dosage’, datafield: ‘fir_appldosage’, width: widthAppDosage, cellsalign: ‘center’, cellclassname: ‘cellHeader’, cellsrenderer: concatAppDosageUOM },
{ text: ‘In Reg.Coll’, columntype: ‘checkbox’, width: widthIncollection, datafield: ‘enablecollections’, cellclassname: ‘cellHeader’, cellsalign: ‘center’ },
{ text: ‘Supply Chain Notice’, datafield: ‘_fir_mainsupplychainnoticeid_value@OData.Community.Display.V1.FormattedValue’, width: widthMainScNotice, cellclassname: ‘cellHeaderHyperlink’ }

]

});
}

}

Below functions are used when user click the custom expand/collapse and these below function taking more time to expand or collapse

function expandGrid() {
/// <summary>
/// expand the grid
/// </summary>

console.log(“expandGrid End Time- ” + new Date());
for (var m = 0; m < submissionCount; m++) {
$(‘#jqxgridSubmission’).jqxGrid(‘showrowdetails’, m);
}

$(“#columntablejqxgridSubmission div:first div:first”)[0].outerHTML = ‘<div role=”gridcell” onclick=”collapseGrid()” style=”left: 0px; z-index: 88; width:30px;” class=”jqx-grid-cell jqx-grid-cell-metro jqx-item jqx-item-metro jqx-grid-cell-pinned jqx-grid-cell-pinned-metro jqx-grid-details-cell jqx-grid-details-cell-metro jqx-grid-group-expand jqx-grid-group-expand-metro jqx-icon-arrow-down jqx-icon-arrow-down-metro” title=””></div>’;

console.log(“expandGrid Start Time- ” + new Date());
}

function collapseGrid() {
/// <summary>
/// collapsed the grid
/// </summary>

console.log(“summary End Time- ” + new Date());
for (var m = 0; m < submissionCount; m++) {
$(‘#jqxgridSubmission’).jqxGrid(‘hiderowdetails’, m);
}

$(“#columntablejqxgridSubmission div:first div:first”)[0].outerHTML = ‘<div role=”gridcell” onclick=”expandGrid()” style=”left: 0px; z-index: 88; width:30px;” class=”jqx-grid-cell jqx-grid-cell-metro jqx-item jqx-item-metro jqx-grid-cell-pinned jqx-grid-cell-pinned-metro jqx-grid-group-collapse jqx-grid-group-collapse-metro jqx-icon-arrow-right jqx-icon-arrow-right-metro” title=””></div>’;
console.log(“collapseGrid Start Time- ” + startTime);
console.log(“collapseGrid End Time- ” + new Date());
}

Thanks,
Nausher

[MartinParticipant]

Hello Nausher,

I’ve tested the following Example.
It is a grid with 10 nested grids that are opened in a for-loop in the grid’s ready callback.
There is not such delay that you are mentioning.

Best Regards,
Martin

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

[NausherParticipant]

Hi Martin,

Your example not working. Can you please check again for me ?

Thanks,
Nausher

[MartinParticipant]

Hello Nausher,

It was a cross-origin issue with the data’s url.
I have updated the Example.

Best Regards,
Martin

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

[Author]

Posts