Check documentation for the latest version of dhtmlxSuite Loading Big Datasets DHTMLX Docs

Loading Big Datasets

Smart Rendering

The first thing you need to try if your grid loads too slow - to enable the "Smart Rendering" mode. In most cases any other changes won't be required.

To enable the "Smart Rendering" mode, call the enableSmartRendering method:

mygrid.enableSmartRendering(true); // false to disable

The mode works fine for datasets with less than 10k of rows.

In most cases, no other changes will be required. Read more on "Smart Rendering" mode here.

Static smart rendering mode is compatible with nearly any other functionality of grid except for rowspans and grouping functionality.

Related sample:  Smart Rendering (static)


If you don't like the live-scroll behavior, you can try to use the "Paging" mode which provides the same loading time boost.

The mode works fine for datasets with less than 10k of rows. Read more details on the "Paging" mode here.

Related sample:  Paginal Output

Dynamic Smart Rendering or Paging

If the amount of rows is even bigger, you can try to use the dynamic mode. In such a mode data will be loaded from server by parts, which allows fast initialization.

You can read more details here.

Distributed Parsing

To decrease time before the grid appears on page, the user can enable Distributed Parsing. In this case, the grid will be shown right after the first portion of data is parsed, although it continues parsing other portions in async mode. By changing the number of records per portion and delay (in milliseconds), the user can change the speed of loading.


The parameters of the method are:

  • mode (true/false) - enable or disable distributed parsing;
  • count - the count of nodes parsed at one step (10 by default);
  • time - the time between parsing counts in milliseconds (the 250 by default).

Related sample:  Distributed parsing

"FAST" Mode

The "FAST" mode enables completing grid's operations much faster because of skipping the rendering stage for each operation and moving it to the end of chain. The following methods should be used:

grid.startFastOperations();  //starts "FAST" mode
//make grid operations between start and stop commands
grid.stopFastOperations();//stops "FAST" mode(all events skipped between start and stop)

Related sample:  Fast row adding

Back to top