Dynamic Loading for Plain Structures

Data can be loaded to non-hierarchical components in portions:

  • Firstly, a limited number of records is loaded;
  • Then, data is loaded at the moment when:
    • user scrolls the component;
    • user switches to the new page within the component (in case pager is defined);
    • loadNext method is applied;

Currently dynamic loading for linear data is implemented for the following components: DataTable, DataView and List (you need to set the dynamic:true property for the List widget).

Configuring Dynamic Loading Behavior

To enable dynamic data loading you need to:

1. Set the component data source that will load initial data. It can be done either with the help of url property or load method;

webix.ui({
    id:"dview",
    view:"dataview",
    url:"data/data_dyn.php"
});
//or
$$("dview").load("data/data_dyn.php");

2. Optionally, define various aspects of dynamic loading such as:

  • datafetch - the number of records that should be loaded from server side during each dynamic loading request. 50 by default;
  • datathrottle - time in milliseconds between subsequent dynamic loading calls, which helps to minimize the quantity of requests during quick paging or scrolling;
  • loadahead - the number of records that should be loaded ahead of the "datafetch" parameter.
webix.ui({
    view:"dataview",
    datafetch:50,
    datathrottle: 500,
    loadahead:100
});

Related Samples

Server-side Request

When scrolling or pagination occurs, the component will automatically issue a request based on the data source, e.g. "data/data_dyn.php?continue=true&count=100&start=130" where:

  • continue - the flag that indicates that this request was formed automatically;
  • count - the value of the datafetch parameter;
  • start - the index of the first data item to start loading from.

Note that your server script should be able to handle these parameters.

Server-side Response

Server-side response should include the following information:

  • data - the array of data records;
  • pos - position in the data component to add the loaded data to;
  • total_count - the total number of records available on the server.

Sample of JSON response

{
    "data":[
        {"id":1,"package":"acx100-source"},
        {"id":2,"package":"acx200-source"}
    ],
    "pos":0,
    "total_count":999
}

Dynamic Loading by API

The loadNext method can be used to send a request that loads the specified number of records and parses them into the component. The arguments are:

  • count - the number of records that will be loaded on function execution;
  • start - the start position to insert the loaded data to;
  • callback - function to be executed after the response comes ( or null if you don't need the one);
  • url - the loading URL (if it wasn't specified in the component constructor);
  • now - boolean to ignore datathrottle and start loading data immediately on loadNext() execution.

Using URL set in the component constructor

webix.ui({
    id:"grida",
    view:"datatable",
    url:"data/data_dyn.php"
});
$$("grida").loadNext(10, 0);

Related sample:  Dynamic Loading with Removing the Existing Content

Using given URL

$$("gridb").loadNext(50,900,function(){
    this.showItem(903);
}, "data/data_dyn.php");

Related sample:  Setting Loading Position

Use Cases

The method allows the following scenarios:

  • new data may be added to the end of current component data:
$$("grida").loadNext(30, pos, function(){
    this.showItemByIndex(pos);
    pos += 30;
});
 
// pos - index of the last data item

Related sample:  Dynamic Loading with Appending Content

  • new data may substitute current component data (it should be cleared beforehand);
webix.ui({
    view:"datatable",
    "data->onParse":function(){
        this.clearAll();
        this.data.url = "data/data.php";
    }
});
$$("grida").loadNext(10, base);
 
// base - index of the last data item

Related sample:  Dynamic Loading with Removing the Existing Content

Dynamic Loading Events

You can capture the moment just before a dynamic loading request is sent to server with the help of an onDataRequest event.

It can be used to cancel the default behavior and issue a custom data request:

$$("dtable").attachEvent("onDataRequest", function(start, count){
    var data = custom_load_data(start, count);
    this.parse(data, "json");
    return false;
));

Related articles

Back to top