Integration with dhtmlxDataStore

When you deal with multiple DHTMLX components that use the same data, it's convenient to use one data source (specified as a DataStore object) for them and just define the rules how data in different components should be linked. So, a value changed in one component will be reflected in other linked ones.

Loading data from dataStore

To load data from the DataStore object to the grid, use the sync method as in:

mygrid.sync(myStore);

Linking form directly via dataStore

To link Form to Grid through the DataStore object, use the bind method as in:

mygrid.sync(myStore);
mygrid.attachEvent("onRowSelect", function(id){ data.setCursor(id); });
myform.bind(myStore);

Binding to other components (tree, grid, dataview etc.)

To bind Grid to other DHTMLX components use the bind method as in:

mygrid.bind(myCombo, function(data, filter){
        return myGrid.cells(data, 2).getValue() == filter.text;
});
//or
mygrid2.bind(mygrid1, function(data, filter){
        filter.name = data.cell1[0]; //the first letter of the selected author
});
//or
mygrid.bind(tree, function(data,filter){
        filter.name = data.text;
});

Binding to the server side

To bind a grid populated from the server-side to other DHTMLX component use the dataFeed and bind methods as in:

//specify here the path to the file that will get change request
//it'll help you to load new data from the server (instead of the master component)
mygrid.dataFeed("data/grid.php"); 
mygrid.bind(myform, function(master, data){
        if (master.Name == "") return true;
        return mygrid.cells(data, 1).getValue().toLowerCase().indexOf(master.Name)!=-1;
});
//each time some value in form is changed 
//grid will be filtered, based on the defined logic

Back to top