Intermediate

Customizing Load Pattern with Ajax

By default, Webix loads data to components by an asynchronous Ajax GET request. However, various modifications are possible.

Loading Data via POST Request

You can change the request type to POST:

webix.ui({
    view:"datatable",
    // ..config..
    url: "post->load.php"
});

Loading Data via Synchronous Ajax Request

You can change the request to a synchronous one (sometimes it may be useful).

webix.ui({
    view:"datatable",
    autoConfig:true,
    url:function(params){
        // sync requests - parse only!
        var data = webix.ajax().sync().get("/samples/server/packages").responseText;
        this.parse(data);
    }
});

this points to the data component, datatable in this case.

Modifying Background Ajax Requests

You can catch Webix onBeforeAjax event to modify ANY Ajax request on the page (so be attentive):

Sending Headers

webix.attachEvent("onBeforeAjax", 
    function(mode, url, data, request, headers, files, promise){
        headers["Content-type"] = "application/json";
    }
);

Note that Webix Ajax module (described below) features a built-in functionality for sending headers with server-side requests.

Loading with Webix Ajax Helper

To load data on demand without breaking the application flow, you can resort to Webix Ajax interface.

Any asynchronous Ajax request performed by Webix immediately returns a promise object. When the promise resolves, the then() method receives the data. You can use this object to parse the data into a component. For example, you can wait until the promise resolves and then get JSON data with the json() method of data:

webix.ajax("data/load.php").then(function(data){
    $$("list").parse(data.json());
});

You can also leave the waiting to Webix and simply parse the promise into a component:

var data = webix.ajax("data/load.php");
$$("list").parse(data);

Ajax loading allows passing parameters to a server-side script:

var id = $$("list").getSelectedId();
webix.ajax("server/load.php?id="+id).then(function(data){
    $$("grid").parse(data.json());
});

Pre-processing Data before Loading

A server-side script must return data in one of the supported data formats so that the response can be parsed into the necessary component. If the received data are presented in a non-supported format, you can modify the format and then parse the data.

Suppose this is the data we receive:

{
    "x1":{ name:"Alex" },
    "x2":{ name:"Dan" }
}

and for a Webix component it must be like the following

[
    { id:"x1", name:"Alex"},
    { id:"x2", name:"Dan" }
]

You can change the data inside the then() function. In the snippet below, JSON data are received from the response, then the data object is remapped and loaded into the component:

var data = webix.ajax("data/load.php").then(function(data){
    var js = data.json();
    var new_js = [];
 
    for (key in js){
        new_js.push({
            id:key, 
            name:js[key].name
        });
    };
 
    return new_js;
});
 
$$("list").parse(data);

This technique allows configuring the UI and processing the data separately. You can combine these two processes. In the snippet below the url property gets its value dynamically and the data are loaded into the datatable during the initialization of the UI.

webix.ui({
    view:"datatable",
    autoConfig:true,
    url:function(details){
        return webix.ajax("data.php").then(function(data){
            var js = data.json();
            var new_js = [];
 
            for (key in js){
                new_js.push({
                    id:key, 
                    name:js[key].name
                });
            };
 
            return new_js;
        });
    }
});

You can also change data later on, when they are loaded but not yet parsed. Use Data Drivers for that.

Dynamic Loading

For big amounts of data dynamic loading is used. Customization of dynamic loading calls is different, because it is not possible to control it directly. There are 2 ways to customize dynamic loading.

onDataRequest event

While loading new data into a component, you can cancel the default behavior and define a custom data request with the help of the onDataRequest event.

// onDataRequest
grid.attachEvent("onDataRequest", function(start, count){
    this.parse(
        webix.ajax().get("/server/projects?parent="+id).then(function(data){
            return data = data.json();
        });
    );
    return false;
});

The callback function varies among components. For the Datatable a callback receives two parameters:

start - the position from which the new data are loaded;
count - the number of records that will be loaded.

In the snippet above instead of sending default start and pos parameters, the code sends the page number (which is the starting position divided by the page size).

For the Tree and Treetable the parameter is id - the ID of a parent branch.

Using a proxy object

It's possible to create a custom proxy object, which will work as an intermediate level between a component and a server-side script.

For details, please check the proxy documentation for details.

Proxy object for working in REST mode;
Guidelines about proxy objects and custom proxy objects in particular.
Learn more about Webix Ajax Operations.