View-less Data Storages

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

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({
var treeCollection = new webix.TreeCollection({
// collection can also load local data

Related sample:  Data Syncing: Collections and Widgets

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({

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({

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:


Related sample:  Data Syncing with DataCollection

Read more about Loading and Saving Data to Server Side.

Back to top