Monday, March 9, 2009

Ajaxified Grid 2

Ajax enabled grid using ICallbackEventHandler
In my previous article of “Ajax enabled grid using ICallbackEventHandler”, we have discussed about following operations

1.Sort the grid in ascending or in descending order by clicking on the arrows next to column name.
2.Change pages of the grid.
3.Change page length of the gird

In this article we will discuss about editing the grid, i.e. just double click on the grid cell and the cell become editable. Change the content of the cell and click on Update button. This will update server side data without refreshing the page.
Best features of this grid are as follows

Data will be bind to grid only once, i.e. on page load.
Only modified data goes to server and update the Data.

Logic for Grid Update : We can see grid and Data table as two dimensional array. User will update any cell i.e. row[i][j] this is like playing with two dimensional array in learing phase of programming; update cell row[i][j] in grid and the onclick of update button Update datable or other two dimensional array.

The basic UI will contain one grid and one update button. Will bind data to grid on page load

1.Simply copy paste following code in the tag of the page

We have activated RowDataBound event of the grid.

2.We will maintain a datatable, so that we can avoid fetching data from database. This is only to make understanding more simpler. We will assume that we have datatable and we define get and set properties for the table as follows.

We can write a function which will return data table, and the get property will simply return that table. This time we have used session variable instead of Viewstate to store the table; because we need to update data on server side, if we use viewstate , to update it we need to do post back of the page.

To use this table we will simply say “_grid.DataSource = _sampleData;”
And to set new data table we will say _sampleData = _tempTable;

Here _tempTable is the updated table after updating the grid on client side.

3.We will follow typical ICallbackEventHandler procedure and add folloing points on server side page, i.e. in c# code.

Implement ICallbackEventHandler interface

public partial class Default : System.Web.UI.Page , ICallbackEventHandler

Write RaiseCallbackEvent(string eventArgument) and GetCallbackResult()

Which will be as follows

result is a global variable declared on the page.
We are following the same conversions in RaiseCallbackEvent(string eventArgument) which we have used in my last article

4.To make cell editable on double click we need to add javascript which will convert the cell in to textbox or in dropdownlist in such way that we can keep track of each updated cell.
As we have discussed earlier; we will look at the grid as a two dimentional array. Thus we will maintain unique id for each cell; in such a way that cell id will tell position of that perticular cell data in data table.

Here understand that grid data is exact copy of the data table so row[i][j] in data table will match with row[i][j] of grid, unless we define our own order for binding the data to grid.

5.In step 1 we have activated RowDataBound event of the grid. In this step we will write code for RowDataBound event.
Define _rowNumber as global variable for same page.

To make cell editable we have added

MakeCellEditable(this) will write this JavaScript function in next step.

To identify each cell as unique cell and to mach it with corrosponding datatable entry, we will give id to each cell in such a way that it will follow row[i][j] structure.

And we are increasing row number each time. Observe the way we have given id, we will get [i][j] position just by spliting the is on “_”.

6.To make cell editable we will write following function in JavaScript

This function will convert the cell into text box and set focus in that text box. Check the way we have assinged id to the text box; i.e.[i]_[j]_input obj is the cell, read step 5

7.Upto point 6 we are able to make cell editable; now we need to write a code which will pick all updated values and send them to server to update the datatable.
On click of update button we have called one javascript function ( reffer step 1), named UpdateTable().
We will write this JavaScript function

Please reffer step 1 for 'Gridview','input' and UpdateGrid('updateTable$'+data);
data = textboxId|textboxData~textboxId|textboxData
data is string of modified data along with their textbox id.

8.UpdateGrid function will call RaiseCallbackEvent(string eventArgument) on server side.

Reffer step 3 where we have defined RaiseCallbackEvent(string eventArgument) and GetCallbackResult(). In step 3 we will observe

if (args[0] == "updateTable") updateTable(args[1]); also observer last 3-4 lines of step 7
On server side updateTable is a function; which is responsible for updateing the Datatable. The function will be as follows.

In step 7 we have seen the javascript function JSUpdateTable()
And how we are sending updated data in the format of string.
For further understanding lets assume that we are getting data to server side and
_data = “0_1_input|ABC~3_3_input|XYZ” , this is how we send data from client to

Now in above function just observe how we will manipulate _data. Here understanding of each step is important so for this we can check the demo code and debug it.

result = "SUCCESS"; result is a global string.
After updating DataTable on server side we will send result to client, and if result = "SUCCESS" we will come to know that datatable has been updated successfully.

After this GetCallbackResult() function (ref. point 3) will send result string to client.

9.On client side we need one function which will automatically get called. In step one we have registered following function

(Please reffer my "Ajaxified Grid 1" articles if you are not getting what this function means)

ShowResult JavaScript function will get called automatically after this GetCallbackResult(), so now we will write this function.

Above function is used only remove editable cells, i.e. to remove textboxes and to indicate that the server data has been updated.

10.On page load bind the grid

For editing the grid some points need to be considered; we have discussed only about text box, in the same way we can go for dropdown list, Text Areas etc. Possibilities are many.
But while updating the grid if we are using pagging and sorting then to update the corresponding row in data table is a problem. In this case we will add one column in the data table in which corresponds to table row, so if we can sort the table and can still maintain the row number i.e [i] in row[i][j].And this column will be hidden so that we can use it for adding and deleting the the data also.
Digg Technorati Delicious StumbleUpon Reddit BlinkList Furl Mixx Facebook Google Bookmark Yahoo
ma.gnolia squidoo newsvine live netscape tailrank mister-wong blogmarks slashdot spurl

blogger templates 3 columns | Make Money Online