articles >> asp.net ajax >> Creating an AJAX-Enabled Grid using ICallbackEventHandler (Part ...

Creating an AJAX-Enabled Grid using ICallbackEventHandler (Part 2)

By : Ashish Sarda Aug 19, 2007

Printer friendly

Page 2 / 2

7. Up to this point we have made the cell editable - now we need to select all updated values and send them to server to update the datatable.

Onclick of the Update button has a javascript function named UpdateTable() (refer to step 1). This function is listed below:

function JSUpdateTable()
{
var ddl = window.document.getElementById('Gridview');
var ddl1 = ddl.getElementsByTagName('input');
var data = "";
for(i = 0 ; i < ddl1.length ; i++)
    {
      ddlId[i] = ddl1[i].id; //ddlId is a global array in JS we will use it in step 9
      if(i == 0 ) data = ddl1[i].id + "|" +  ddl1[i].value;
      else data = data + "~" + ddl1[i].id + "|" +  ddl1[i].value;
    }
UpdateGrid('updateTable$'+data);
}

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

Recall step 3 where we defined RaiseCallbackEvent(string eventArgument) and used the updateTable function. On the updateTable is a server-side function which is responsible for updating the Datatable. The function will be as follows.

private void updateTable(string _data)
    {
        string[] _NewData = _data.Split('~');
        DataTable _tempTable = _sampleData;
        for (int i = 0; i < _NewData.Length; i++)
        {
            string [] _changedTxt = _NewData[i].Split('|');
            string[] _rowCol = _changedTxt[0].Split('_');
            _tempTable.Rows[Convert.ToInt32(_rowCol[0])][Convert.ToInt32(_rowCol[1])] = _changedTxt[1];
        }
        _sampleData = _tempTable;
        result = "SUCCESS";
    }

In step 7 we have seen the javascript function JSUpdateTable() and how we send updated data in the format of string.

For further understanding lets assume that we are sending data to the server and  _data = “0_1_input|ABC~3_3_input|XYZ”. Now in the above function observe how we manipulate and parse _data.

result = "SUCCESS"; result is a global string.

After updating the DataTable on the server-side we will send result to client, and if result = "SUCCESS" we will know that the datatable has been updated successfully.

The GetCallbackResult() function (ref. step 3) will send result string to client.

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

function UpdateGrid(args)
    {
        <%= ClientScript.GetCallbackEventReference(this,"args", "ShowResult", null) %>;
    }
(Please reffer my previouse AJAX Grid article for more details on this function)

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

var ddlId = new Array();//Elements are added in step 7
// This array contain ids of textboxes
function ShowResult(eventArgument ,context)
{
    formObj = window.document;
    if(eventArgument == "SUCCESS")
        {
           for(j = 0 ; j < ddlId.length ; j++)
            {
            var ids = ddlId[j].split("_");
formObj.getElementById(ids[0] + "_" + ids[1]).innerHTML = formObj.getElementById(ddlId[j]).value;
            }
           document.getElementById('ServerMsg').innerText = "Data has been updated Successfully...";
        }
}

The 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 we bind the grid :

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            _grid.DataSource = _sampleData;
            _grid.DataBind();
        }
    }

Further Enhancements

For editing the grid some points need to be considered. We have discussed only about using text boxes for editing but we could also use a dropdownlist or other controls.

If we are using paging and sorting updating a row in the datatable causes a problem for cell referencing. In this case we can add a column to the datatable which corresponds to table row, so if we sort the table and can still maintain the row number (i.e [i] in row[i][j] ). This column will be hidden in the grid so that we can use it for adding and deleting the the data as well.

Code 

The full code can be downloaded here

The code contains two aspx pages

• EditGridDemo.aspx : This page contains the code in this article.
• AjaxifiedGrid.aspx: This page contains the code for fully ajaxified grid.