Check documentation for the latest version of dhtmlxSuite Dynamic Loading DHTMLX Docs

Dynamic Loading

Common

Dynamic Loading mode allows loading data partially, not all at once, by a client-side request. It decreases initial loading time and loading of the server.

To work correctly, the related mode should be enabled on the client side:

  • grid - smart rendering and paging modes
  • treegrid - dynamic branch loading mode
  • tree - dynamic branch loading mode
  • combo - partial autocomplete ( you don't need it for normal autocomplete)

To activate the mode you should use the method dynamic_loading():

conn.dynamic_loading(true); //tree/treegrid
//or
conn.dynamic_loading(50); //combo/grid

Parameters:

  • true/false for a tree,treegrid.
  • number of rows which should be initially loaded (the value should be greater than a number of rows visible in a grid, or at least any positive number) for a grid.
  • maximum number of options which the server will send to a combo in the 'autocomplete mode' for a single data request.

In the 'dynamic loading' mode you can't use GROUP BY within SQL query

Tree/TreeGrid specific

Normally, the connector makes all operations automatically and doesn't need customization.

But in case of dynamic loading in tree/treeGrid, a database can contain a field a field indicating if the current item is a branch or a leaf. In beforeRender event handler you are allowed to mark an item as a leaf or a branch (it decreases the number of SQL queries and increases the performance).

class ChildBehavior extends ConnectorBehavior{
            public void beforeRender(DataItem data){
                  if (data.get_value("is_a_branch").equals("1"))
                         data.set_kids(1);
                  else
                         data.set_kids(0);
            }
}
tree.event.attach(new ChildBehavior());

The same approach can be used for the non-dynamic mode of tree/treeGrid as well. It's not obligatory but lets you increase data generation performance.

Back to top