Beginner

Data Loading

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

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

After data has been pushed to the 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 a value of the component's url property. Data will be loaded right after initialization of the component. The 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 of the load() method that you apply to the component on the necessary event.

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

The load function has three parameters:

  • a path to the necessary file or script;
  • a datatype - in case of JSON data this parameter can be omitted;
  • a 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 an inner event of the component.

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 that you should pass into the url property or the 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 a server.

Setting an Alternative Data Source for a Bound Component

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

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

Read more information on Data Binding.

Loading Messages

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

  • to inform users that the 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, you can define Overlay Boxes and Progress Bar (Progress Icon) with the help of the dedicated modules.

// or "this" pointer if the method is called within the component
webix.extend($$("list1"), webix.OverlayBox); 
 
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 the 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 the parse() method that takes the data and the datatype as parameters.

Data Parsing from XML string

webix.ui({
    view:"dataview",
    id:"dataview",
    datatype:"xml"
});
 
// function is executed on a predefined event, e.g. on a 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 the 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 the 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 the 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 the server.

3 . You can make use of the 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
});

Read more about Webix and Promiz.js integration.

Back to top