DHTMLX Docs & Samples Explorer

Increasing Performance

Smart Rendering or Paging

The first thing , which need to be tried, if your grid loading too slow - enable smart rendering for it. Just include dhtmlxgrid_srnd.js and add next line to the grid's initialization

        grid.enableSmartRendering(true);

It most cases not any other changes will be required. Static smart rendering mode compatible with nearly any other functionality of grid except of rowspans and grouping functionality. ( if you don't like the live-scroll behavior, you can try to use static paging, which provides the same loading time boost )

Methods works fine for datasets with lesser than 10k of rows.

Dynamic Smart Rendering or Dynamic Paging

If amount of rows event more big, you can try to use dynamical mode. In such mode data will load from server by parts, which allows fast initialization.

Step by step guide

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. Changing number of records per portion and delay (in milliseconds), the user can change the speed of loading.

      grid.enableDistributedParsing(mode,count,time);

The parameters here are:

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

"FAST" Mode

The file that should be included into the project to make “FAST” mode work is dhtmlxgrid_fast.js.

Starting from v1.5, the user can turn on “FAST” mode during some operations in the grid. This enables completing these operations much faster because of skipping rendering stage for each operation and moving it to the end of chain. The following methods should be used:

      grid.startFastOperations(); // start "FAST" mode
      // code for any grid operations placed between start and stop commands
      grid.stopFastOperations(); // stop "FAST" mode (all events will be skipped between start and stop)