Part 2. Some actions will come in useful if you decide to process data

Related sample: tutorial/quick_start/part2.html

In the first part of 'Quick Start' we gave you the rudiments of app building - app's interface creating. In the continuation, we'd like to tell you how to make the interface 'alive', force it to implement a number of actions.

This tutorial we start with recapitulation of the first part.

So, in the first part we've created a simple contact book which contains:

  • a toolbar in the top (add(delete) contact buttons)
  • a grid contained a list of contacts
  • a detailed form

Our upgrades:

  • details of the selected contact are shown in the form
  • click the button “delete” deletes the selected contact
  • click the button “add” addes a new row in the grid

Ok, let it roll.

Details of the selected contact are shown in the form

To achive this goal we must attach the appropriate event handler.

We'll open a list of grid events and find the appropriate - onAfterSelect. The event fires when a row of the grid is selected.

$$("grid").attachEvent("onAfterSelect", fill_form);
 
function fill_form(id){
$$("topForm").setValues( $$("grid").item(id) );
}

Comments:

  • Through $$(“grid”), we refer to the grid (“grid” - the id of our grid).
  • Through $$(“topForm”), we refer to the form (“topForm” - the id of our form).
  • fill_form() - event handler. We specified it as an individual function.
    • item() allows to get hash with properties of an item, i.e. lets to get details of the selected row.
    • setValues() allows to set values of the form's controls, i.e. lets to fill form with details of the selected row.

Click the button "delete" deletes the selected contact

First of all, we need to mention that for implementing two last items in our upgrade list we need to add parameter click to the buttons and specify there the appropriate click handlers. After these changes, our buttons' definitions will look as:

{view:"button", type:"round", id:"add", name:"add", label:"Add", click:"add_row"},
{view:"button", type:"round", id:"delete", name:"delete", label:"Delete", click:"delete_row"}

delete_row(). Exactly this function answers for deleting the currently selected row.

The simplest variant:

function delete_row() {
	var id=$$("grid").getSelected();
	$$("grid").remove(id);
}

Comments:

  • The variable id contains the id of the selected row.
    • getSelected() allows to get currently selected row of the grid.
  • remove() removes element from datastore, i.e. the selected row of the grid.

But we're going to extend the function a little - to add a confirm window. So now, before deletion a confirm window will appear.

function delete_row() {
	var id=$$("grid").getSelected();
	dhx.confirm({
		title: "Delete",// the text of the header
		message: "Are you sure you want to delete the selected contact?",// the text of the body
		callback: function(result) { //callback function that will be called on the button click. The result is true or false subject to the clicked button.
			if (result) {
				$$("grid").remove(id);
				} 
			}
		});
}

Click the button "add" addes new contact with data entered into form

As we told before, the function add_row() will answer for adding.

function add_row(id) {
	var newRecord = {id:dhx.uid()};
	$$("grid").add(newRecord);
}
  • add() adds item to the grid store, i.e. a new row.
  • dhx.uid() lets to create a record with unique id.

Related sample: tutorial/quick_start/part2.html

Part 1.Create the app interface? Easily!Part 2. Some actionsPart 3. From client- to server-side