Recently, I came across an article by Dave Massey, Fun with Tables using DHTML behaviors, on MSDN. The article was quite interesting and had provided dynamic effects such as drag and drop columns of table, sorting of data on any column using DHTML behaviors.
I felt why not apply these behaviors in applications being developed using ASP.NET? As you are aware, ASP.NET
Repeater control is quite flexible and gives full control to developer to decide how to paint data. This article shows how easy it is to use DHTML behaviors in ASP.NET using
Repeater. Those who are new to DHTML behaviors, I recommend them to read it on MSDN under DHTML dude. I have used the behaviors shown in sample code section of Fun with Tables article in my sample application. Because, the purpose of this article is to demonstrate how to use DHTML behaviors in ASP.NET.
In my sample application, I am showing employee list from NorthWind database and binding it to
Repeater control. The HTML code snippet of default.aspx is as shown below. I have only shown code which is related to DHTML behavior. For detailed code, please download using the link at the top of the section.
Using the code
<asp:repeater id="employeeList" Runat="server">
style="behavior:url(dragdrop.htc) url(tablehl.htc) url(sort.htc);">
<thead bgcolor="#000000" style="FONT-SIZE: 12px; COLOR: white">
<td width=200>Employee ID</td>
<td width=200>First Name</td>
<td width=200>Last Name</td>
<tr bgcolor="#ccffff" style="FONT-SIZE: 12px; COLOR: red">
<td><%# DataBinder.Eval(Container.DataItem,"EmployeeID") %></td>
<td><%# DataBinder.Eval(Container.DataItem,"FirstName") %></td>
<td><%# DataBinder.Eval(Container.DataItem,"LastName") %></td>
If you look at the above HTML code, it contains a simple
Repeater control and I have declared a table with three columns showing Employee ID, First Name and Last Name. The declarations about
Table tag are in
Table tag declaration is important as its
style attribute. They are declared using the following syntax.
That's it! You can now do drag and drop the columns or sort the data as per particular column by clicking on header column of the table. To do drag and drop, click the mouse on any header column and drag it and drop it on another column header, and the columns get altered automatically. Also, you can highlight any particular row of data by moving mouse over that row, or select it by clicking mouse over that row.
The code behind of the default.aspx is simple as it contains code to retrieve data from employee table in
page_load event handler, and another method is
BindData method which binds the data to
DataSource property of
Repeater control and invoke its
Points of Interest
Please note that I am returning the employee data as HTML string and storing it in a hidden
Label control and then using this XML string to bind it to the
Repeater. The idea of using XML is to provide loose coupling between GUI and business layer, and as you know, XML is de facto standard for data exchange. Also, the
Label control used is to store the data retrieved from database, and use it to bind to
Repeater to avoid frequent trips to database on subsequent post backs.
Please download the demo project to see the action of the DHTML behaviors. If you face any difficulties, please contact me on my email email@example.com. Good Luck!!!