Smart Rendering

Smart Rendering is a basic technique to load and render data on demand. This way must be used when you are dealing with big datasets to increase the performance speed of the app. As soon as you start to notice that the grid slows down, move from general loading to Smart Rendering.

The stated functionality requires PRO version of the dhtmlxGrid (or DHTMLX Suite) package and doesn't work with the Paging mode enabled.

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

mygrid.enableSmartRendering(true);

The parameters here are:

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

Smart Rendering mode increases the overall grid performance working with big amounts of data by saving time for the render operation that is the most time-consuming one in dhtmlx. When this mode is activated, only those rows that are in the visible area are rendered. The user can apply it for the 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).

To pre-render rows during the scrolling, use the enablePreRendering method:

mygrid.enablePreRendering(50); // 50 - a number of rows that will be prerendered

To enable the dynamic "Smart Rendering" mode, you need to specify the "posStart" and "count" URL parameters for the data:

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 the <rows> tag:

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

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

mygrid.setAwaitedRowHeight(25);