An important advantage of DataProcessor is that it lets not only to load data from different sources but also filter them according to your desires. And we're gonna show this and other related information by way of example.
So initially, the right column was empty (Child List and form). Then we chose D letter and in the right list the appropriate records appeared while the form was still empty. We chose the first record and form filled up.
Step 1. First of all, we'll declare the mentioned elements.
dhx.ui({ cols:[//specifies a layout {//the first column rows:[// the first row of the column. We put a toolbar with a label and a button there. {view:"toolbar", type:"MainBar", data:[{type:"label", label:"Master list"}] }, // the second row of the column. We put a list which will contain our letters there. {view:"list", id:"mylist1", data:[{ name:"A"},{ name:"D"},{ name:"E"},{ name:"N"},{ name:"S"},{ name:"W"},{ name:"Z"}], select:true, type:{ width:"auto", template:"#name#" } }] }, {// the second column rows:[// again, we put a toolbar to the first row of the column. {view:"toolbar", type:"MainBar", data:[ {type:"label", label:"Child list"} ]}, {// to the second row of the column we put a grid. Grid takes data by means of 'data.php' file. view:"grid", id:"mylist2", fields:[// the parameter 'fields' specifies columns of the grid { id:"name", width:100, label:"Name" }, { id:"city", width:100, label:"City" }, { id:"sex", width:50, label:"Sex" } ], url:"data.php" }, {// and to the last, third row of the column we put a form. view:"form", id:"myform", data:[// the parameter 'data' specifies controls of the form. In our case, these are 3 text input fields. { type:"text", label:"Name", id:"name"}, { type:"text", label:"Age", id:"age"}, { type:"text", label:"City", id:"city"}] }] }] });
Step 2. Then, we need to create two dataprocessors: one for Master list (list) and the other for Child List (grid). The first one will link the list and the grid. And the second - the grid and the form.
var dp = new dhx.DataProcessor({ master:$$('mylist1')// the parameter 'master' defines the appropriate data source. }); var dp2 = new dhx.DataProcessor({ master:$$('mylist2') });
Step 3. As we created dataprocessors, we can start to link them. And we'll make it with the help of the method link. The name says for itself - the method allows to link data source with any component operated on data.
dp.link($$('mylist2'), function(master, linked){ //linking list('Master list') with grid('Child list') return linked.name.indexOf(master.name) == 0;// checks whether 'name' attribute of the record from the linked 'Child list' matches with the selected letter. }); dp.link($$('myform'));// links the grid('Child list') with the form
Step 4. Next, we need to save form changes in the grid. For this, we'll use the event onCursorChange which we'll attach to the 'grid' dataprocessor (dp2).
Some words about the method save. It allows to save data changes not only in the calling object but also in the related data source. About our example, if you change something in the form it will be automatically changed in the grid.
dp2.attachEvent("onCursorChange", function(){ $$('myform').save(); });
Step 5. And our last step - the function dhx.ready() where we'll put all our code. The alternative to onDocumentReady event, it ensures that our code will be called just after the page has been completely parsed and protects you from potential errors.
We linked the grid's dataprocessor with the form and the form was filled up automatically. But there is another handy way of form filling. It's the method loadValues() that allows to load all form's values from an external data source at once. An external data source can be both some xml, json, jsarray or csv file and some server file.
For example:
$$('myform').loadValues('xml/data.xml'); //or $$('myform').loadValues('data.php?action=get&id=1');