jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid expand/collapse slow
Tagged: grid, hiderowdetails, nestedgrid, showrowdetails
This topic contains 5 replies, has 2 voices, and was last updated by Martin 6 years, 5 months ago.
-
Author
-
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
NausherHello Nausher,
We were not able to reproduce such behavior.
Can you provide us an example where it could be observed?
Thank you!Best Regards,
MartinjQWidgets Team
http://www.jqwidgets.com/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,
NausherHello 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,
MartinjQWidgets Team
http://www.jqwidgets.com/Hi Martin,
Your example not working. Can you please check again for me ?
Thanks,
NausherHello Nausher,
It was a cross-origin issue with the data’s url.
I have updated the Example.Best Regards,
MartinjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.