Beginner

Data Loading

After a data component has been initialized, you need to populate it with data in any of supported formats: JSON, XML, CSV, JSArray, HTMLtable.

There we have two major possibilities that are true for all the data components.

After data has been pushed to component (loaded or parsed) it should be rendered within the component with the help of Webix templates.

Loading from External Resource

To load data from an external file or database, you should specify the path to this file/or server-side script that fetches data:

1 . As value of the component url property. Data will be loaded right after component initialization. Type of incoming data should be specified (if it's not JSON) as well.

{
    view:"list"
    url:"data.xml"
    datatype:"xml"
}

2 . As a parameter to the load() function you apply to the component on the necessary event.

$$("mylist").load("data.xml");

Load function has three parameters:

  • path to the necessary file or script;
  • datatype - in case of JSON data this parameter can be omitted;
  • callback function if needed.
$$('component_id').load(".../data.xml", "xml", function(){
  //callback function
});

Related sample:  Form: Loading

It can be called on the necessary page event (button clicking, etc.) as well as on component inner event.

As soon as the component is parsed:

webix.ui({
view:"list",
ready:function(){
    this.load("data/books2.xml","xml");
    this.select(this.getFirstId());
    }
});

Loading via Proxy Objects

At the same time, you can set rather a complicated loading pattern in a proxy object you pass into the url property or load() function.

Webix features predefined proxy objects for offline support, connector usage, etc. To learn more about proxy functionality, consult the dedicated article.

view:"list"
url:{
    $proxy:true, 
    load: function(self){
        self.load(a.json);
    },
     save:function(){
     ...
    }
}

Furthermore, if a server-side dataset is too big, dynamic loading allows to load limited quantity of data items first and then load new data only as you scroll or page through the component.

Note that there's a separate article dedicated to Server-Side Integration. There you'll also find customization patterns for loading from server.

Setting an Alternative Data Source for a Bound Component

With bound components you can enable data loading not from master component (as expected by default), but directly from server.

{
    view:"list"
    url:"data/list.php" //the default data source
},
{ 
    view:"form", 
    id:"form11",
    ...  
    dataFeed: "data/form.php" //data source for the form only 
}
 
// form takes data from selected record in list
$$('form1').bind($$('list1'));

More on Data Binding

Loading Messages

Webix provides info boxes that are laid over the component for a while to display desired data, e.g.:

  • to inform users that data is being loaded (in case of big datasets);
  • to inform users that there's no data for this component.

Webix (datatable) features info message support out of the box in the form of overlay boxes with any text or html content:

dtable.showOverLay("Loading");
dtable.hideOverlay();

Related sample:  Loading screen

More info on datatable loading screen support.

For other components there exists a possibility to define Overlay Boxes and Progress Bar (Progress Icon) with the help of the dedicated modules.

webix.extend($$("list1"), webix.OverlayBox); // on "this" pointer if the method is called within the component
 
webix.ui({
    view:"list", 
    id:"list1",
    url:"...",
    ready:function(){
        if (!this.count()){ //if no data is available
            webix.extend(this, webix.OverlayBox);
            this.showOverlay("<div style='...'>There is no data</div>");
        }
    }
});

Related sample:  Empty list

More info on overlay boxes and progress bar

Data Loading Events

Webix offers the following events to control the beginning and the end of the loading process:

  • onBeforeLoad - fires just the moment XML data loading begins;
  • onAfterLoad - fires when XML data loading is complete;
  • onStoreLoad - fires when raw external data is fully loaded (regardless of data type).
mygrid.attachEvent("onAfterLoad", function(){
    webix.message("Data loaded");
})

Related sample:  Loading screen

In case something goes wrong with loading (and sometimes it does!) learn how to handle errors on the client side in the Processing loading errors article.

Parsing

Here the data in supported formats comes as it is (string or array).

Firstly, it may be the value of data parameter.

JSON array within the DataView object

webix.ui({
    view:"dataview",
    template:"#title# Year: #year#, rank: #rank#",
    data:[
        { id:1, title:"The Shawshank Redemption", year:1994, rank:1},
        { id:2, title:"The Godfather", year:1972,  rank:2},
        { id:3, title:"The Godfather: Part II", year:1974, rank:3}
    ]
});

JSON object is stored in a variable declared beforehand

var tabledata=[
    { id:1, title:"The Shawshank Redemption", year:1994, rank:1},
    { id:2, title:"The Godfather", year:1972,  rank:2},
    { id:3, title:"The Godfather: Part II", year:1974, rank:3},
    { id:3, title:"The Godfather: Part II", year:1974, rank:3}
];
 
webix.ui({
    view:"dataview",
    template:"#title# Year: #year#, rank: #rank#",
    data: tabledata
});

The variable may be declared either in the same file or in an external js-file you refer to in the document's head.

Secondly, data can be parsed with the help of parse(); method that takes data and datatype as parameters.

Data Parsing from XML string

webix.ui({
    view:"dataview",
    id:"dataview",
    datatype:"xml"
});
 
 //function is executed on pre-defined event, e.g. on button click
 
function parse(){ 
   var str = "<data>
      <item id='10'><title>The Lord of the Rings</title> 
      <year>2003</year><rank>10</rank></item>
      </data>";
   $$("dataview").clearAll();
   $$("dataview").parse(str,"xml");
}

Related sample:  Dataview: XML Dataset

If you want to parse data in addition to the existing dataset, specify position of parsing, namely the index from which you insert new data:

$$("datatable").parse({
      pos: $$("datatable").count(), //number of records will be right the last index +1
      data:dataset
  });

Data Parsing Events

  • onParse - fires when a component has received inline data and is ready for usage:
dtable.attachEvent("data->onParse", function(driver, data){
    //for json data
    webix.message("Count of records "+data.length);
});

Since the event is triggered for the component DataStore, the handler should be prefixed by "data->".

Promise API in Data Loading

Webix is integrated with Promiz.js library to treat the result of asynchronous operations (like data loading) without callbacks.

It means that any Ajax request returns a promise object than can be treated with Promiz.js API.

"Promise" object is returned by either of these methods

var promise = grid.load("my.php");
var promise = webix.ajax("my.php");
var promise = webix.ajax().get("my.php");
var promise = webix.ajax().post("my.php");

Bonuses

1 .You may forget about callbacks and process the result of a request in Promiz.js way:

promise.then(function(realdata){
    //success
}).fail(function(err){
    //error
});

2 .You can "parse" promise objects directly into the component:

list.parse( webix.ajax("my.php"));

The data will be parsed the moment it comes from server.

3 . You can make use of waitData property each data component is supplied with and apply Promiz.js methods to it:

//"promise" approach
grid.waitData.then(function(){
    //when we have data - do some actions
});

Alternatively, Webix onAfterLoad event can be used:

//standard approach
grid.attachEvent("onAfterLoad", function(){
    //when we have data - do some actions
});

More about Webix and Promiz.js integration.

Back to top