DataProcessor lets to save data changes and its main advantage is that you needn’t to use ajax requests all the time - just specify the appropriate server file in the parameter url and it will make all the work. Moreover, if it's dhtmlxConnector file you needn’t to care about server-side at all.
Step 1. First of all, we'll declare the needed elements.
dhx.ui({ rows:[ // to the first row we put toolbar with 2 buttons { view:"toolbar", type:"MainBar", data:[// the parameter 'data' specifies controls of the toolbar { type:"button", label:"Add", click:"add_item" }, { type:"button", label:"Remove", click:"remove_item" } ]}, // to the second row we put a list filled with data from 'data.php' file { view:"list", id:"mylist", url:"data.php", type:{ width:"auto", template:"#name#" }, select:true }, // to the third row we put a form with 3 text input fields and 1 button { view:"form", id:"myform", data:[ { type:"text", label:"Name", id:"name"}, { type:"text", label:"Age", id:"age"}, { type:"text", label:"City", id:"city"}, { type:"button", label:"Save", click:"save_form"} ]} ] });
Step 2. Our next action - to create for the grid a dataprocessor with 2 parameters: master and url.
var dp = new dhx.DataProcessor({ master:$$('mylist'), url:"validate.php" });
Step 3. Then - to link our dataprocessor with the form in order that grid's record details will be shown in the form.
dp.link($$('myform'));
Step 4. As we have to show notice messages when the entered data is incorrect, we'll add the following code:
dp.attachEvent("onAfterInvalid", function(result){// the event 'onAfterInvalid' fires when the entered data don't match the defined criteria dhx.notice(result.value); });
Step 5. At this stage, we'll put all the previous code to the dhx.ready() function. What's for? It'll ensure that our code will be called just after the page has been completely parsed and protect you from potential errors.
Step 6. To realize 'add' possibility we'll use the list's method add().
function add_item(){ $$('mylist').add({},1); };
Step 7. To realize 'remove' possibility we'll use the method remove().
function remove_item(){ $$('mylist').remove($$('mylist').getSelected()); };
Step 8. And saving. To save form changes we'll use the method save which allows to save data changes not only in the calling object but also in the related data source.
function save_form() { this.save(); };