fires when dynamically-loaded data is requested

void onDataRequest(id id, [function callback,string url] );
ididid of the parent node whose the children should be loaded
callbackfunctioncallback function, if any
urlstringserver API endpoint, if any


tree.attachEvent("onDataRequest", function (id, callback, url) {
    // code

Related samples


Dynamic loading for tree-like structures is triggered for nodes with the webix_kids flag set. When those nodes are expanded, the loadBranch method is automatically called. The component will use the data source specified either by its url property or in the url parameter passed to the load method.

When looking at the related samples, note that during the initial loading, data is returned with the webix_kids property set:

{ id: 1, value: "Branch 1", webix_kids: true }

This event can be used to change the default data loading logic:

tree.attachEvent("onDataRequest", function (id, callback, url) {
    webix.ajax().get("data/data_dyn_json.php?parent=" + id).then(function (data) {
      //{ parent: id, data:[ ... ]}
      return data.json();
  // cancels default behavior
  return false;

You need to return the following data object in the handler function for the correct processing:

  • parent - id of the related tree branch
  • data - array of data records
See also
Back to top
If you have not checked yet, be sure to visit site of our main product Webix web development library and page of javascript tree data structure product.