Data Binding in Code Samples

When you deal with multiple related components on client-side, you can define rules how their data will be linked. So changed value in some component will be reflected in other components.

There are 2 main ways to link data:

• when data in master component is changed - slave component gets new data;
• when selection in master component is changed - slave component gets new data.

In both cases, based on configuration:

• slave can take new data from master component;
• slave can take new data from server side.

Basically, you can load data just once, in single global data store and define rules, how different components will use it.

Functionality described above can be applied to the following components:

• chart
• combo
• dataview
• form
• grid
• tree
• treeGrid

• loading data from dhtmlXDataStore.
  
  The logic shown below allows to sync two copy of all data or a part of it from one DataCollection to another. Slave collection will automatically update itself, each time when master is updated
  

  barChart.sync(myStore);

• loading data from dhtmlXDataStore
  

  mycombo.sync(myStore);

• binding to other components (tree, grid, dataview etc.)
  

  mycombo.bind(mygrid);

• binding to server-side
  

  mycombo.dataFeed("data/combo.php");//specify here the path to a file which will get change requests
  mycombo.bind(myview);

• loading data from dhtmlXDataStore
  

  myview.sync(myStore);

• binding to other components (tree, grid, dataview etc.)
  

  myview.bind(grid);

• binding to server-side
  

  myview.dataFeed("data/dataview.php");//specify here the path to a file which will get change requests
  myview.bind(myform);

• loading data from dhtmlXDataStore
  

  myform.bind(myStore);

• binding to other components (tree, grid, dataview etc.)
  

  myform.bind(mygrid);

  Beware, for correct running you should specify the same IDs for grid columns and form controls:

  myGrid.setColumnIds("col1, col2, col3");
   
  var formData = [
  		{type: "input", name:"col1"},
  		{type: "input", name:"col2"},
  		{type: "input", name:"col3"}
  ]
  myform = new dhtmlXForm("box", formData);

• binding to server-side
  

  myform.dataFeed("data/form.php");//specify here the path to a file which will get change requests
  myform.bind(mygrid);

• pushing data back.
  
  If you have form which is bound to grid (common edit scenario ), after values in form changed by user, you may need to push updated data back to the master grid. To do so, just call:
  

  myform.bind(mygrid);
  myform.attachEvent("onButtonClick", function(id){
       myform.save() //will push updates back to the master list
  });

  If you have 2 forms bound to a DataStore object, sequential saving their changes can provoke data loss. In this case, use the saveBatch() method to prevent losses and save data simultaneously.
  

  myform1.bind(myStore);
  myform2.bind(myStore);
   
  myStore.saveBatch(function(){
          myform1.save();
          myform2.save();
  });

• loading data from dhtmlXDataStore

  mygrid.sync(myStore);

• linking form directly though dhtmlxDataStore

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

• binding to other components (tree, grid, dataview etc.)
  

  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 server-side
  

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

• binding to other components (tree, grid, dataview etc.)
  

  mytree.bind(myview);

• binding to server-side
  

  mytree.dataFeed("data/tree.php");
  mytree.bind(mygrid);

Components which are used as source of bind operation receive few extra events and API commands, which allow you to push data in slave components.

You can use

mygrid.setCursor(item_id)

to force loading of the necessary data in all components, which use the grid as the master control.

and

var id = mygrid.getCursor()

to get the current position of the cursor.