Binding Components to DataStore

Components bound to DataStore will keep their data synchronized with the data stored in DataStore. They will also be bound with each other (e.g. a grid and a form).

Methods used for data binding

sync() - copies all the data from the store (used for multirecords components like a grid).
bind() - copies just a single record related to some item (used for single-record component like a form).
dataFeed() - helps to reload data from the server (instead of the master component).

Binding cases

binding components to DataStore:

var list1 = new dhtmlXDataStore({ url:"../data/data1.json", datatype:"json" });
grid.sync(list1);

binding 2 DataStores:

var data1 = new dhtmlXDataStore({ url:"../data/data1.json", datatype:"json" });
var data2 = new dhtmlXDataStore({ url:"../data/data2.json", datatype:"json" });
 
data2.bind(data1, function(data, filter){
    if (filter)
        return data.id == filter.id;
});
 
grid1.attachEvent("onRowSelect", function(id){
    data1.setCursor(id);
});
grid1.sync(data1);
grid2.sync(data2);

binding DataStore to the server-side:

var data1 = new dhtmlXDataStore({ url:"../data/data1.json", datatype:"json" });
var data2 = new dhtmlXDataStore({ dataFeed:"../data/json.php", datatype:"json" });
 
data2.bind(data1, function(data, filter){
    filter.Package = "Filter by "+data.Package;
});
 
grid1.attachEvent("onSelectStateChanged", function(id){
    data1.setCursor(id);
});
grid1.sync(data1);
grid2.sync(data2);

Unbinding DataStore objects

The unbind() method is used to unbind 2 DataStore objects:

...
data2.bind(data1, function(data, filter){
    if (filter)
        return data.id == filter.id;
});
 
data2.unbind(data1);

CRUD operations in bound components

To perform any data manipulation in the bound-to-DataStore component(s) you should remember the main thing: operations are performed with components indirectly, by means of the related dhtmlxDataStore object.

What does it mean? For example, if you want to delete some record from a grid, you should delete it from the DataStore the grid is bound to. After the record has been deleted from Datastore, it will be automatically deleted from the grid. This rule concerns any operation: update, deletion, creation, filtering or sorting.

var store = new dhtmlXDataStore({  
    url:"php/data.php"
});
 
myGrid.sync(store);
...
var selectedItem = myGrid.getSelectedRowId();
store.remove(selectedItem);

Tip 1

Some components (grid, dataview, form) while being bound to dataStore start to have the method save(item_id) available. The method allows you to save changes in Datastore programmatically.

Let's assume, you have a grid. When you edit some record and press 'Enter', the changes are saved automatically. To save some data programmatically just use the following code:

var store = new dhtmlXDataStore();
 
myDP = new dataProcessor("php/data.php");
myDP.init(store);
 
grid.sync(store);
var selectedItem = myGrid.getSelectedRowId();
grid.save(selectedItem);

Tip 2

The second tip concerns the method setCursor(item_id). When dealing with several components, you can be confused while loading data from master to slave components - for which one to call the method. Remember, the method is called for the master to push data to slaves.

For example, if you have a grid bound to DataStore and a form bound to the grid, and want to update form data, call:

myform.bind(mygrid);
mygrid.setCursor(row_id);

Sorting and Filtering in Grid binded to DataStore

When you bind Grid to DataStore, the filtering and sorting functions won't work properly in Grid.
If you reload the page, the changes made in Grid will be reverted, as DataStore won't apply them.

To solve this issue, while binding grid to datastore with the help of the sync method, you need to pass the second parameter to this method - object with two attributes that switches on the filtering and sorting functionality of DataStore:

rule - (object) object with two attributes to enable filtering and sorting of DataStore

myGrid.sync(data, {sort:true, filter:true});

In the downloaded dhtmlxSuite package you can find a sample of such a case, by following the path dhtmlxDataStore/samples/04_mastergrid/01_client.html.