After a data component has been inited, 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.
To load data from an external file or database, you should specify the path to this file/or serverside 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:
$$('component_id').load(".../data.xml", "xml", function(){
//callback function
});
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());
}
});
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 serverside 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 Serverside Integration. There you'll also find customization patterns for loading from server.
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 datasource
},
{
view:"form",
id:"form11",
...
dataFeed: "data/form.php" //datasource for the form only
}
// form takes data from selected record in list
$$('form1').bind($$('list1'));
More on Data Binding
Webix provides info boxes that are laid over the component for a while to display desired data, e.g.:
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>");
}
}
});
More info on overlay boxes and progress bar
Webix offers the following events to control the beginning and the end of the loading process:
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.
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
});
dtable.attachEvent("onParse", function(driver, data){
//for json data
webix.message("Count of records "+data.length);
});
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" objects 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");
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