Page takes long time for 10000 records with grid and searchbox

Posted by: hpalli on 15 October 2019, 8:53 am EST

  • Posted 15 October 2019, 8:53 am EST

    We analyzed the javascript when loading a grid and its associated searchbox with 10000 records of 10 columns where atleast two text columns have majorly unique values. The grid load is fast in less than 1.5 sec. But the searchbox association and load time takes atleast 7 or more seconds.

    The majority of the time is spent in the updateData function.

    We cant make the searchbox completely to run in a non-blocking async operation because of the dependency of the search box with DOM elements.
  • Replied 15 October 2019, 8:54 am EST

    Is dataviewJS more performant?
  • Replied 15 October 2019, 5:41 pm EST

    Hi,

    We are able to observe the difference in performance for the search box as compared to the grid. Hence we have created an enhancement request to improve search box performance. The internal tracking ID for the issue is JSVIEW-351. We will let you know about any updates regarding the same.

    >> Is dataviewJS more performant?
    Yes, since DataviewJS is an updated/better version of Spread.Views, it is better in performance.

    Regards
    Sharad
  • Replied 29 October 2019, 8:02 pm EST

    Hi Harsha,

    Devteam is working on to improve the performance of the search box. For the time being, they have suggested excluding columns with lots of unique values in order to work around the performance issues with SearchBox. This could be achieved by using facets option of the search box, please refer to the following snippet:
    /* this function returns all unique values for given data field */
    function getColumnValues(field) {
    return _.uniq(_.map(data, item => item[field]));
    }

    const layout = new GC.DataViews.GridLayout();
    const dataView = new GC.DataViews.DataView(document.getElementById('grid'), data, cols, layout);
    const visualSearch = new GC.DataViews.SearchBox(dataView, {
    container: '#search_box',
    facets: {
    // key can be a column id, caption or dataField
    id: getColumnValues('id'),
    country: getColumnValues('country'),
    },
    });


    Regards
    Sharad
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels