Saving

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.

The Goal

  1. Click the button Add adds a new empty record to the grid.
  2. Click the button Remove removes the currently selected record from the grid.
  3. Details of the currently selected record are shown in the form.
  4. Click the button Save saves data changes made in the form.
  5. If data, entered in form, doesn't match the set criteria - a notice message will appear.

The Solution

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.

  • master - specifies a linked data source. It can be both some independent data source and one of the following components: list, grid, toolbar.
    You can refer to component whether as $$('component_id') or as component_id.
  • Defines the path to the file which will get change requests. It's an optional parameter and if you don't deal with server-side you needn't to use it.
    In other words, it's a path to server (if you use dhtmlxConnector, a path to its file can be set as this parameter. In this case, dhtmlxConnector will do all the server work).
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();
};

Full code of the solution