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).

get HTML - of serverside control for Ajax handling

This post is moved to 

ASP DOT NET MATTERS

Click on Above Link to Get Redirect to Desired Page.

Direct Blog address : http://www.aspdotnetmatters.blogspot.com

Ajax-Handle complex data type

This Post is Moved to 

Asp Dot Net Matters


Click on Above like to redirect to Desired page.

Check blog: http://www.aspdotnetmatters.blogspot.com

XMLHTTP class

This post is Move to ASP DOT NET MATTERS

Direct link : http://aspdotnetmatters.blogspot.com/2010/07/xmlhttpjsclass-json-class-for-ajax.html


For More Details check http://aspdotnetmatters.blogspot.com

CSS- Bubble Tooltip

This Post is Moved to


ASP DOT NET MATTERS

http://www.aspdotnetmatters.blogspot.com

Partial Page Rendering

Partial page rendering is one of the very amazing concepts by Microsoft Ajax extension. In this article we will discuss one very common and real time scenario for which Partial page rendering is very useful. Whenever there is need to render a server side control for Ajax web application, partial page rendering is very good option.

For example, in my ICallback articles we have discussed about the Ajaxifying the grid view; but consider following scenario,
Grid view contains details of the all employees of an organization, and then in that case employees are categories in various ways,

• Depending on the role of an employee.

• Depending on the CTC of an employee.

• Depending on the City of an employee.

• Depending on the Department of an employee.

And many more, then in such case if we are using same Gridview to display all employees, and along with it, we need to provide an instant update mechanism in the grid; but for each category of employee, details which need to be edited are different and may contain information which is not part of the grid, grid is containing only common information.

Partial page rendering is a very good option for such case; we don’t need to handle anything on client side other than managing partial rendering calls. For this we will use Microsoft Ajax extension, i.e. Update Panel, Update progress and script manager.
Now if we are going to user different web user controls for different purposes then this approach is more effective.

We will consider following case:

• We have main page which contains a grid.

• On click of edit image in grid column, user should be able to edit the details of that particular employee.

• Depending on the employee id, display information to edit.

• This may contain more than one table to fetch and update the data.

• To make it more modular use Web user controls for data update.

To avoid database dependency we will use Data Tables as properties, and will use sessions to maintain different data tables.

Steps for the code development are as follows.

1. Design a Grid View the way we want it to be displayed.
2. Develop user controls to handle various types of users, and make sure all of them work fine. Here we can keep the login on the same page.
3. Add an update panel in the Design, this update panel contains all required user controls in different Panels and web user controls; visibility of each panel and web user control is set to false.
4. Add one server side Button on which we will update the update panel, add this button as a trigger for update panel.
5. On click event of the button contains code to handle update events.

Develop Aspx Page

Form tag of aspx page will be as below
<br /><form id="form1" runat="server"> <br /><asp:scriptmanager id="ScriptManager1" runat="server"> <br /><scripts> <br /><asp:scriptreference path="JScript.js"> <br /></scripts> <br /></asp:ScriptManager> <br /><div> <br /><%--PUT YOUR GRIDVIEW HERE--%> <br /><div id="divLayer" class="divLayer"></div> <br /><asp:button id="btnClick" text="Click Me" runat="server" onclick="click_Click" cssclass="sethidden"> <br /><asp:updatepanel id="UpdatePanel1" runat="server"> <br /><triggers> <br /><asp:asyncpostbacktrigger controlid="btnClick"> <br /></triggers> <br /><contenttemplate> <br /><asp:hiddenfield id="hdnValue" runat="server"> <br /><%--PUT YOUR USER CONTROLS HERE WITH VISIBILITY SET TO FALSE--%> <br /><uc1:teamleader id="TeamLeader1" runat="server" visible="false"> <br /></contenttemplate> <br /></asp:UpdatePanel> <br /></div> <br /></form> <br />

btnClick is set hidden using Style .

In above logic we have added Triggers for update panel, there can be more than one trigger for the update panel. These triggers are responsible to send Post back of update panel, i.e. Partial page will go to server side, and server will render only the contents inside the Update panel. asp:AsyncPostBackTrigger represents asynchrous post back.

<br /><asp:button id="btnClick" text="Click Me" runat="server" onclick="click_Click"> <br />

We are going to write server side code on the click event of above button, and changes will reflect in update panel. So if we have more than one trigger for an update panel, we can handle different events very much effectively. Also if our update panel contains some user control or some button to update server side data, it gets updated asynchronously , for that we don’t need to put extra code.
E.g. if we have a web user control in Update panel, and that update panel contains, some server side buttons, click event of all such elements get handled automatically.

In the demo code we have used one static class, which has public static table; this is used just to avoid database connection.
We have following tables in the static class.
1. DT – General table containing general (Common) information about the Employees
2. Manager – Table containing information about the employees who are managers.
3. TeamLeader – Table contains information about the employees who are Team leader.

In Demo code we have a GridView which contains common information about employees. Thus on page load we have following code.

<br />GridView1.DataSource = StaticClass.DT; <br />GridView1.DataBind(); <br />


Our girdview on aspx is

<br /><asp:gridview id="GridView1" runat="server" onrowdatabound="GridView1_RowDataBound"> <br /><columns> <br /><asp:templatefield> <br /><itemtemplate> <br /><asp:image runat="server" id="Image1"> <br /></itemtemplate> <br /></asp:TemplateField> <br /></columns> <br /></asp:GridView> <br />

Now onclick of Image1 we need to fire trigger of an update panel i.e. click event of btnClick. So onlick of Image1 we have to do following tasks
Set the employee id in hdnValue, this field is part of an update panel,thus we can read it’s value on server side, for partial page rendering. And call click event of btnClick.
For this we use server side GridView1_RowDataBound event.

<br />protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) <br />{ <br />if (e.Row.RowType == DataControlRowType.DataRow) <br />{ <br />if (((Image)e.Row.FindControl("Image1")) != null) <br />{ <br />Image img = (Image)e.Row.FindControl("Image1"); <br />img.ID = e.Row.Cells[1].Text; <br />img.Attributes.Add("onclick", "window.document.getElementById('" + hdnValue.ClientID + "').value=this.id; window.document.getElementById('" + btnClick.ClientID + "').click()"); <br />} <br />} <br />} <br />

So on click of Image1 in grid, we will fire AsyncPostBack to server. In above code check img.ID = e.Row.Cells[1].Text; this line of code will append empId for DT, to the image id so that we can assing the image id to hiddenField on client side. If we split the img.ID on client side on “_”, the last element of an array will be EmpId.
Check the schema of DT for this.

Up to this point we are able to send Asynchronous Post back request to server; after this we will develop logic to change the contents in Update panel, for the understanding purpose, we will only hide and show the controls in update panel and fetch employee data from table and display it in controls. Further we can make it more and more complex depending on the requirement.

In code Update panel contains one Panel and Two web user control, panel will take care of an employee who is manager and web user controls are used for other types of employees.

btnClick ‘s server side click event is used to hide and show the data.

<br />protected void click_Click(object sender, EventArgs e) <br />{ <br />string[] clientData = hdnValue.Value.ToString().Split('_'); <br />//clientData[clientData.Length - 1] contains id of an Employee; <br />DataRow[] dataRow = StaticClass.DT.Select("EmpId ='" + clientData[clientData.Length - 1] + "'"); <br />if (dataRow[0]["Designation"].ToString().ToUpper() == "MANAGER") <br />{ <br />setManagerData(clientData[clientData.Length - 1]); <br />//Above function take care of displaying Manager Details <br />Panel1.Visible = true; <br />TeamLeader1.Visible = false; <br />Others1.Visible = false; <br />} <br />else if (dataRow[0]["Designation"].ToString().ToUpper() == "TEAM LEADER") <br />{ <br />Panel1.Visible = false; <br />TeamLeader1.Visible = true; <br />Others1.Visible = false; <br />} <br />else <br />{ <br />Panel1.Visible = false; <br />TeamLeader1.Visible = false; <br />Others1.Visible = true; <br /><br />} <br /><br /><br />private void setManagerData(string id) <br />{ <br />hdnValue.Value = id; <br />DataRow[] dtRows = StaticClass.Manager.Select("EmpId =" + id); <br />txtSalutation.Text = dtRows[0]["Salutation"].ToString(); <br />txtPrefferedName.Text = dtRows[0]["PrefferedName"].ToString(); <br />txtFirstName.Text = dtRows[0]["FirstName"].ToString(); <br />txtMiddleName.Text = dtRows[0]["MiddleName"].ToString(); <br />//similarly add otherdetials <br />} <br />

This panel contains Update button, update details is handled totally on serverside.
This is how we will handle Page events of page. Now in click_Click event, TeamLeader1 is an instance of TeamLeader web usercontrol in UpdatePanel. TeamLeader web user control contains all server side logic to update the details of TeamLeader. To access value of hidden field of parent page we will use following line in page load event of web user control.

<br />HiddenField hdn = (HiddenField)Page.FindControl("hdnValue"); <br />//Page.FindControl("hdnValue"); return control of Parent Page. <br />

We have handled all update and retrive events on server side, upto this we have used javascript just to set the value of hidden field.

Now we will discuss about

<br /><asp:scriptmanager id="ScriptManager1" runat="server"> <br /><scripts> <br /><asp:scriptreference path="JScript.js"> <br /></scripts> <br /></asp:ScriptManager> <br />

Script manager is required to execute Asynchronous Post back, whenever we use Update Panel we need Scrpt manger, Scriptmanager is also used to add script refrences as above.

We can handle various client side events related to Partial Postback and Update panels, some of them we have used in Jscript.js file.


PageLoad is one such event in which we can initialize some functions and assign client side events. Page load event is as below, events which can be used, but not required for this demo are commented in the Jscript files. There are many such events Microsoft has provided.

PageLoad() event is as below

<br />function pageLoad() <br />{ <br />var RequestManager = Sys.WebForms.PageRequestManager.getInstance(); <br />RequestManager.add_beginRequest(OnBeginRequest); //RequestManager.remove_beginRequest(Handler); <br />RequestManager.add_endRequest(OnEndRequest); //RequestManager.remove_endRequest(Handler) <br /><br />//RequestManager.add_initializeRequest(Handler //RequestManager.remove_initializeRequest(Handler); <br />//RequestManager.add_pageLoaded(Handler //RequestManager.remove_pageLoaded(Handler) <br />//RequestManager.add_pageLoading(Handler //RequestManager.remove_pageLoading(Handler); <br /><br />} <br />

OnBeginRequest and OnEndRequest are functions which get called on perticular event. Here we haved used them to display a Processing Div tag, irrespective of update panel.
Update Process is one of the control provided by Microsoft Ajax1.0, which does the same thing but we need it to associate with UpdatePanel., we are not going into details, of it.

<br /><div id="divLayer" class="divLayer" style="z-index:1000;"></div> <br />

z-index of this div tag is set very high so that whenever it is visible, it will be above all objects of the page.
Just check JavaScript used for it.

<br />function OnBeginRequest(sender, args) <br />{ <br />displayDiv('visible', 'divLayer', ' processing...'); <br />//Here we can write logic to display processing, or any additional <br />//operation if any. <br />} <br /><br />function OnEndRequest(sender, args) <br />{ <br />displayDiv('hidden', 'divLayer', ''); <br />} <br /><br />function displayDiv(state, elem, msg) <br />{ <br />var adiv = $get(elem); <br />adiv.style.visibility = state; <br />adiv.innerHTML = msg; <br />}<br />

Now this div tag will be visible when ever partial page render request goes to server, whether request is because of elements inside the update panel or out side the update panel. Many times such approch is useful, because , we might use partial page renderring many times on the page, with more than one update panel also.

args contains arguments, please debug the JavaScipt using breakpoint,just like c#.net, and check the atributes. There are many useful attributes, we can make use of.


Conclusion of this article
Many times it is useful to develop code using concept of partial page rendering, which can excel the development time, and managing code becomes more easy, no need to write extra JavaScript to handle Ajax requests.

ICallback Event handler

This Post is Moved to

ASP DOT NET MATTERS