View-less Data Storages

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

DataCollection - stores a non-hierarchical collection of records (like list, dataview, datatable, etc.)
TreeCollection - stores a hierarchical collection of records (like tree and treetable)
DataValue - stores a single value like any input control (text, button, label, etc.)
DataRecord - stores a single record like form and htmlform.

Below you can find examples on how to use storages.

Using DataCollection and TreeCollection

DataCollection and TreeCollection allow storing the data in one place and displaying them in the desired component(s) when needed. Collections are commonly used with binding and syncing.

// collections can load remote data
var dataCollection = new webix.DataCollection({
  url:"//docs.webix.com/samples/server/films",
});
 
var treeCollection = new webix.TreeCollection({
// collection can also load local data
  data:cars
});
 
 
$$("list1").sync(dataCollection);
$$("tree1").sync(treeCollection);
 
$$("form1").bind(dataCollection);

Collections have the same API as their "visible" siblings. Note, that in case of syncing with a collection you should call the needed API directly on the collection not on the synced view.

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 display the data and allow editing them.

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

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

2. You can provide a URL for saving operations. Any updates in the collection will be sent to this URL:

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

Note that the save property automatically initializes a DataProcessor for the collection. If you need to configure a DataProcessor (e.g. provide a custom escaping function, operation name, etc.), you can initialize it explicitly:

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

3. Sync a data component with the DataCollection:

list.sync(store);

Read more about Loading and Saving Data to Server Side.