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:
Our upgrades:
Ok, let it roll.
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:
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:
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); } } }); }
As we told before, the function add_row() will answer for adding.
function add_row(id) { var newRecord = {id:dhx.uid()}; $$("grid").add(newRecord); }
Related sample: tutorial/quick_start/part2.html
Part 1.Create the app interface? Easily! ← Part 2. Some actions → Part 3. From client- to server-side