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);
Related sample: Smart Rendering with dynamic loading and buffering
The parameters here are:
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:
XML also should contain two additional parameters within the <rows> tag:
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);
Back to top