Ajaxified Grid 1

Use of ICallbackEventHandler may not be the good option to make grid Ajax enabled

In this post I will discuss following

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

We will used RenderControl function to get HTML.

Using this function of control we are able to get HTML of that control., but for this we will have to use HtmlTextWriter and StringWriter as follows

e.g.


<br />using (StringWriter sw = new StringWriter())<br /><br />{<br /><br />HtmlTextWriter htw = new HtmlTextWriter(sw);<br /><br />_grid.RenderControl(htw);<br /><br />htw.Flush();<br /><br />string result = sw.ToString();<br /><br />}<br />

Here result will contain HTML format of the grid control. We will convert grid control to HTML after binding the data.


We will start developing the UI and code in following steps

Simply copy paste following code in the tag of the page

<br /><div id="Gridview"><br /><br /><asp:gridview enableviewstate="false" runat="server" id="_grid" onrowdatabound="_grid_RowDataBound" allowpaging="True"><br /><br /></asp:GridView><br /><br /><br /><br /><br /></div> Change page length to --><br /><br /><asp:dropdownlist id="ddl" runat="server"><br /><br /></asp:DropDownList><br />

In above code we are just creating one grid and one dropdownlist.

You can switch to Design view to see it.

We have activated RowDataBound event of the grid.


Now we will create a DataTable to be used as DataSource to grid.


<br />public DataTable _sampleData<br /><br />{<br /><br />get {<br /><br />DataTable dt = (DataTable)ViewState["DataTable"];<br /><br />if(dt == null)<br /><br />{<br /><br />dt = new DataTable();<br /><br />dt.Columns.Add(new DataColumn("Contact Name",typeof(string)));<br /><br />dt.Columns.Add(new DataColumn("Company Name", typeof(string)));<br /><br />dt.Columns.Add(new DataColumn("City", typeof(string)));<br /><br />dt.Columns.Add(new DataColumn("Country", typeof(string)));<br /><br /><br />dt.Rows.Add(new object[] { "Maria Anders" ,"Alfreds Futterkiste","Berlin","Germany"});<br /><br />dt.Rows.Add(new object[] { "Ana Trujillo" ,"Emparedados y helados ","México D.F.","Mexico"});<br /><br />dt.Rows.Add(new object[] { "Antonio Moreno", "Antonio Moreno Taquería", "México D.F.","Mexico" });<br /><br />session["DataTable"] = dt;<br /><br />}<br /><br />return dt;<br /><br />}<br />


To use this table we will simply say “_grid.DataSource = _sampleData;”


We will write following four functions for grid operations


<br />private void sortGrid(string Argument , string pageLength)<br /><br />{<br /><br />DataView dv = _sampleData.DefaultView;<br /><br />result = "";<br /><br />dv.Sort = Argument;<br /><br />_grid.DataSource = dv;<br /><br />_grid.PageSize = Convert.ToInt16(pageLength);<br /><br />_grid.DataBind();<br /><br />renderGrid(_grid);<br /><br />}<br /><br /><br />private void changePage(string Argument , string pageLength)<br /><br />{<br /><br />result = "";<br /><br />_grid.DataSource = _sampleData;<br /><br />_grid.PageSize = Convert.ToInt16(pageLength);<br /><br />_grid.PageIndex = Convert.ToInt16(Argument);<br /><br />_grid.DataBind();<br /><br />renderGrid(_grid);<br /><br />}<br /><br /><br />private void changePageLength(string Argument, string pageLength)<br /><br />{<br /><br />result = "";<br /><br />_grid.DataSource = _sampleData;<br /><br />_grid.PageSize = Convert.ToInt16(Argument);<br /><br />_grid.DataBind();<br /><br />renderGrid(_grid);<br /><br />//pageLength is not used<br /><br />}<br /><br /><br />private void renderGrid(GridView _grid)<br /><br />{<br /><br />using (StringWriter sw = new StringWriter())<br /><br />{<br /><br />HtmlTextWriter htw = new HtmlTextWriter(sw);<br /><br />_grid.RenderControl(htw);<br /><br />htw.Flush();<br /><br />result = sw.ToString();<br /><br />}<br /><br />}<br /><br />

Name of the above functions indicate their functionality. Second parameter of the first three functions is “pageLength” this is the value of the dropdown list

I.e.

<br /><asp:dropdownlist id="ddl" runat="server"><br /><br /></asp:DropDownList><br />


Result string is declared on top of the page so that all members of the page can access it “string result = string.Empty;”. Check it in the demo code.


If there is any confusion please again go through above pages.

We need four functions for ICallBackEventHandler two are JavaScript functions one for Callback to server and another for displaying response data from server.

And two are Server side functions (RaiseCallbackEvent(string eventArgument) and GetCallbackResult())


JavaScript functions are as follows

<br />function UpdateGrid(args)<br /><br />{<br /><br />args = args + "$" + window.document.getElementById('ddl').value;<br /><br /><%= ClientScript.GetCallbackEventReference(this,"args", "ShowResult", null) %><br /><br />}<br /><br />After rendering if we open the source of the page; above function will appear as<br /><br /><br />function UpdateGrid(args)<br /><br />{<br /><br />args = args + "$" + window.document.getElementById('ddl').value;<br /><br />WebForm_DoCallback('__Page',args,ShowResult,null,null,false)<br /><br />}<br />

When we want to do Callback, we are actually firing an event which is related to WEBFORM. So we will have to put UpdateGrid(args) function in tag. Otherwise we will get JavaScript error.

Since we can register this function by using “Page.ClientScript.RegisterClientScriptBlock” If we register above function using this that function will appear in tag only.

<br /><br />function ShowResult(eventArgument,context)<br /><br />{<br /><br />window.document.getElementById('Gridview').innerHTML = eventArgument;<br /><br />}<br /><br />

This function will be fired after server sends response back to client, thus this function will manipulate server response. We have simply put the response as innerHTML of the Div tag. This innerHTML contains HTML format of the updated grid.


Server-Side functions are as follows

<br />public string GetCallbackResult()<br /><br />{<br /><br />return result;<br /><br />}<br />

This function simply returns the result which we have put as innerHTML in ShowResult function (Refer previouse point)


<br />public void RaiseCallbackEvent(string eventArgument)<br /><br />{<br /><br />string[] args = eventArgument.Split('$');<br /><br />if (args[0] == "sort") { sortGrid(args[1], args[2]); }<br /><br />else if (args[0] == "changePage") { changePage(args[1], args[2]); }<br /><br />else if (args[0] == "changePageLength") { changePageLength(args[1], args[2]); }<br /><br />}<br />

In this function eventArgument will appear as “changePage$1$10” or “sort$1$10” or “changePageLength$1$10” or “sort$Contact Name Asc$10” or “sort$Contact Name Desc$10”

If we split this on “$”, we will get

- Action .
- Page index of the Grid.
- Page size from the dropdown list (i.e. id is ‘ddl’).

(In changePageLength we don’t need args[2]; I have kept is just to makecoding little simple)

In RaiseCallbackEvent we have simply called the function which we have decleared in POINT 3, each function in point 3 will do the respective action and return a HTML string of the Grid.

Add following code protected void Page_Load(object sender, EventArgs e)

<br />if (!IsPostBack)<br /><br />{<br /><br />_grid.DataSource = _sampleData;<br /><br />_grid.DataBind();<br /><br />ddl.Items.Add("10");<br /><br />ddl.Items.Add("20");<br /><br />ddl.Items.Add("30");<br /><br />ddl.Attributes.Add("onchange", "javascript:UpdateGrid('changePageLength$' + this.value);");<br /><br />}<br /><br />

[At this point if we compile the code we will able to chage the page length ]


Now we will write code in the RowDataBound event of the Grid.. I.e. in protected void _grid_RowDataBound(object sender, GridViewRowEventArgs e)


For adding columnwise sorting functionality in grid, we will modify columnheader row of the grid.

<br />if (e.Row.RowType == DataControlRowType.Header)<br /><br />{<br /><br />for (int i = 0; i < text =" string.Format(" alt="\" src="\" onclick="\"><img alt="\" src="\" onclick="\" />", e.Row.Cells[i].Text);<br /><br />}<br /><br />}<br />

We have added Up and down images and onclick of either of them we have called UpdateGrid function (Ref. Point 4) , for sorting Ascending and Descending order repectively. [At this point you can complie the code and the grid will be Sortable].


After this we will modify the Pager row in such a way that we can use it to change the page index of the grid using UpdateGrid function.(Ref. point 4 public void RaiseCallbackEvent)


<br />else if (e.Row.RowType == DataControlRowType.Pager)<br /><br />{<br /><br />GridView gdv = (GridView)sender;<br /><br />int _pageCount = gdv.PageCount;<br /><br />e.Row.Cells[0].Text = "";<br /><br />for (int i = 0; i < hyp =" new" text =" i.ToString()" l =" new" text = " " hyp =" null;">

_pageCount contains the pagecount of the grid. We have to display pages as Numbers so we used HyperLink and Label to add space after each page number. We can choose our own way to display pages, just we will have to take care of adding the attribute of JavaScript.


And now we have created an Ajax enabled grid using ICallbackEventHandler.

(Don’t forget to Add ICallbackEventHandler).