Page takes long time for 10000 records with grid and searchbox

Page takes long time for 10000 records with grid and searchbox

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

• 

  hpalli

  • Post Options:
  • Link
    Copy

  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.

• 

  hpalli

  • Post Options:
  • Link
    Copy

  Posted 15 October 2019, 8:54 am EST

  Is dataviewJS more performant?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 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