jQuery UI Widgets Forums Grid Grid expand/collapse slow

This topic contains 5 replies, has 2 voices, and was last updated by  Martin 5 years, 9 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Grid expand/collapse slow #102080

    Nausher
    Participant

    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

    Grid expand/collapse slow #102123

    Martin
    Participant

    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/

    Grid expand/collapse slow #102303

    Nausher
    Participant

    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

    Grid expand/collapse slow #102315

    Martin
    Participant

    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/

    Grid expand/collapse slow #102319

    Nausher
    Participant

    Hi Martin,

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

    Thanks,
    Nausher

    Grid expand/collapse slow #102321

    Martin
    Participant

    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/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.