DHTMLX Docs & Samples Explorer

Smart Rendering in Grid

dhtmlxgrid_srnd.js required

Smart Rendering mode increases overall grid performance working with big amounts of data by saving time on render operation that is most time consuming in dhtml. When this mode is activated, only those rows are rendered that are in the visible area. The user can apply it with already loaded content or activate dynamical loading to fetch rows from the server each time (or activate buffering additionally to decrease the number of server requests).

If the user activates dynamical loading, he should understand that rows that are not loaded yet can't be used in script methods (select, delete etc). The following method should be called before data loading takes place:

mygrid.enableSmartRendering(mode,buffer);

The parameters here are:

  • mode(true|false) - enable|disable smart rendering;
  • buffer - count of rows requested from the server by single operation, optional parameter; has sense only in dynamical loading mode.

To pre-render rows during scrolling,the following method should be used:

mygrid.enablePreRendering(buffer);
  • buffer - count of rows which will be prerendered

In case of dynamical loading, XML should be created on the server taking the following URL parameters into account:

  • posStart - starting position of the row in the dataset to start output with. For example, the user has 1000 records in the dataset and got posStart=200. This means that first 199 rows will be ignored and start XML with 200th row of the dataset;
  • count - the number of rows is expected in the output (the user can change it with the second parameter of script method). So, if count=100, then the output should contain 100 rows starting from the one specified with posStart.

XML also should contain two additional parameters within <rows> tag:

  • total_count - number of records in the dataset (in total);
  • pos - start position of the first row in XML in the dataset (generally it is the same as incoming posStart parameter).

In case you've modified grid row height (for example updating css or setting specific style for rows), you need to let grid know new height using the following command:

mygrid.setAwaitedRowHeight(25);