Data Binding and Syncing with Non-UI Objects

The Webix library contains several view-less data components. They have no graphic representation and are used to store data.

These collections have the same API as their "visible" siblings. For example, you can bind() and sync() components with them.

DataCollection and TreeCollection Usage

DataCollection and TreeCollection are non-UI components used to load and store data on the client side. They can serve as a shared data sources for visible data components (DataTable, List, Tree, Chart, etc).

var data = new webix.DataCollection({
    url:"server/some_data"
});
 
$$('list').sync(data);
$$("datatable").sync(data);

Any data changes in the master collection will be reflected in the slave components. Only updates from slave components will be reflected on the master collection. That's why you should add or remove data items directly from the collection.

Note that sync() and parse() called to get the data from a DataCollection or a TreeCollection both sync the view with the collection:

$$("slave").parse(someDataCollection);
// is the same as
$$("slave").sync(someDataCollection);

Binding a Form to a DataCollection

Apart from binding a form directly to a visible data component, you can bind it to the DataCollection:

$$("form1").bind(data);

There is one difference from binding to a data component. You have to set the cursor on a record. Call the setCursor() method with the ID of the record:

$$('list').attachEvent("onAfterSelect", function(id){
    data.setCursor(id);
});

Related sample:  DataCollection Synching

For more details on the cursor, read Working with Bound Components.

Simultaneous Operations within Synced Components

In case of two and more components synced to one data source (either a visual data component or a DataCollection), it seems nice to synchronize user operations as well.

For instance, if an item is selected in one of components, the same item should be selected in the synced one. This is easily done using the API.

Let's assume that we have a dataview and datatable both synced with the same DataCollection.

var data = new webix.DataCollection({
    url:"../my_data.json" //load data from an external file
});
 
$$("dataview_1").sync(data);
$$("datatable_1").sync(data);

When the user selects an item in any of the components, the onAfterSelect event of the component is triggered. You can handle the event and select the same item in the other component. The handler function receives the ID of selected item as a parameter:

$$("dataview_1").attachEvent("onAfterSelect", function(id){
    $$("datatable_1").select(id);
}); //item ID of dataview coincides with that of datatable  row
 
$$("datatable_1").attachEvent("onAfterSelect", function(id){
    $$("dataview_1").select(id.row);
}); //item ID of datatable row coincides with that of dataview item

Related sample:  Data Binding

Server-Side Integration with non-UI Components

DataCollection can communicate with the server side for loading and saving data. Components synchronized with the collection will show the data, allow editing them, etc.

1. Define a DataCollection and populate it with data from the database:

var store = new webix.DataCollection({
    url:"server/data"
});

2. Declare a DataProcessor for the DataCollection:

var dp = new webix.DataProcessor({
    master: store,
    url: "server/data"
});

You can also set up the DataProcessor implicitly with the help of the save property of DataCollection:

store = new webix.DataCollection({
    url:"server/data",
    save:"server/data"
});

3. Sync a data component with the DataCollection:

list.sync(store);

Related sample:  Data Syncing with DataCollection

Read more about Loading/Saving Data on Server Side.

Back to top