Data Syncing

Data syncing is a technique that allows you to connect data components establishing master-slave relations between them. Syncing allows you to copy data from one data-presenting component (master) and pass them to the other (slave). All changes in the master component (e.g. adding, updating, removing, filtering, sorting, etc.) will be reflected in all the slave component(s) immediately.

Basic usage

Syncing components

To sync components, call the sync method on the slave component or its DataStore passing the master as a parameter:

$$("list1").sync("datatable1");
// or
$$("list1").data.sync("datatable1");

Note that sync() and parse() called to get the data from a component both sync the views:

$$("list1").sync("datatable1");
// or
$$("list1").parse("datatable1");

Disconnecting components

If you no longer want the components to be sync you can disconnect them by calling the unsync method on the DataStore of the slave:

$$("list1").data.unsync();

Data Operations

When views are synced, any data operation on the master is reflected on the slave. Slaves can only update data items on the master. Therefore you should:

update data on the slave or on the master

$$("slave").updateItem("itemId", { new_data:"some data" });
// or
$$("master").updateItem("itemId", { new_data:"some data" });

add or delete items on the master only

$$("master").add({ new_data:"some data" });
$$("master").remove("itemId");

You can add or remove items in the slave component, yet these changes will not be reflected in the master.

Syncing with a Callback

You can also filter out records or group data before they will be shown in the slave component. For this, you can pass a callback function as the second parameter of the sync method.

Filtering data

The example below shows how you can filter the data with the callback. Here only the films shot after 1994 will be shown:

$$("dataview1").sync($$("list1"), function(){
    this.filter(function(data){
        return data.year > 1994;
    });
});

Read more about filtering data in the corresponding article.

Grouping data

You can also group data before it is displayed in a slave component:

$$("chart1").sync($$("treetable1") , function() {
  this.group({
    by:"company",
    map:{
      sales:["sales","sum"]
    }   
  });
});

Read more about grouping data in the corresponding article.

Syncing with View-less Collections

You can sync data components with view-less collections. This approach allows you to store data in separate collections and display them in the desired views when needed. Collections can also take on communication with the server and perform loading and saving operations instead of the views.

var data = new webix.DataCollection({
    url: "remote/data"
    save: "rest->//remote/data"
});
 
var treeData = new webix.TreeCollection({
    // collections can also store local data
    data: treeData
});
 
$$("list1").sync(data);
$$("tree1").sync(treeData);

The principles are the same as for the syncing with visual components. Any data changes in the master collection will be reflected in the slave components. Only updates from the slave components will be reflected on the master collection. That is why you should add data to or remove them directly from the collection.

Notes for Webix Jet Users

If you develop apps with Webix Jet, syncing of visual components is impossible, because the views are most often in different modules and the UI is separated from the data loading/saving logic. The most common approach for Jet is to create a data model with a DataCollection and import it into the views.

Data Import

Data import allows synchronizing the data of two components (one of them can be a DataCollection) without tracking data changes afterwards.

The slave component will be populated with the data of the master via the importData method:

$$("list2").data.importData($$("list1"));

Note that it's a DataStore method, so it should be called for the data of the component.

Also note that the importData method is tricky. It does not create a deep copy of the data, so updates in both widgets will be shared after refreshing.

To fully copy the data from one widget into another one, you need to apply:

var copy = webix.copy($$("list1").serialize());
$$("list2").parse(copy);