Introduction
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.
Background
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">
<HeaderTemplate>
<table id="MyTable"
style="behavior:url(dragdrop.htc) url(tablehl.htc) url(sort.htc);">
<thead bgcolor="#000000" style="FONT-SIZE: 12px; COLOR: white">
<tr>
<td width=200>Employee ID</td>
<td width=200>First Name</td>
<td width=200>Last Name</td>
</tr></thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<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>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate> </asp:repeater>
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 HeaderTemplate
. Table
tag declaration is important as its style
attribute contains declarations of DHTML behaviors to be used. Please note that DHTML behaviors have a file extension of .htc (HTML Component) and behaviors are implemented using a set of JavaScript functions. This is a plain text file which can be opened in any text editor such as Notepad. Please note that these files should be in the same web folder where the .aspx file is residing. Since I am using three behaviors in this example, we have declared three behaviors in 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 DataBind
method.
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 gokuldasc@yahoo.com. Good Luck!!!
I am Solution Architect with 20+ years of IT experience in the field of real time,embedded,client/server and web based applications and Business Intelligence . I am currently working as Senior Consultant for Infor.