Introduction
In the article on optimized DataGrid sorting, we introduced non-display button and how to use it to trigger postback event. In this article, we will demonstrate how to enable ASP.NET DataList
row highlighting and row click event response using combination of non-display button and some advanced databinding techniques.
Implementation
It is not hard to realize table row highlighting using DHTML and JavaScript. However, to implement to transfer table row click event with identifiable information, we have to resort to dynamic databinding. The ASPX code is as follows:
<asp:DataList ID="testDL" Runat="server">
<HeaderTemplate>
<table style="border-collapse:collapse; " border="1" cellpadding="4"
cellspacing="0" rules="rows"
width="100%">
<thead bgcolor="#0066ff" style="FONT-WEIGHT: bold; COLOR: white">
<td>First Name</td>
<td>Last Name</td>
<td>Address</td>
<td>Region</td>
<td>City</td>
<td>Postal Code</td>
<td>Country</td>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr <%# TRJavaScript(Container) %> >
<td><asp:Button
style="display:none;"
CommandArgument='<%# DataBinder.Eval(Container.DataItem,"EmployeeID")%>'
ID="HiddenButton" Runat="server" Text="View">
</asp:Button>
<%# DataBinder.Eval(Container.DataItem,"FirstName") %></td>
<td><%# DataBinder.Eval(Container.DataItem,"LastName") %></td>
<td><%# DataBinder.Eval(Container.DataItem,"Address") %></td>
<td><%# DataBinder.Eval(Container.DataItem,"Region") %></td>
<td><%# DataBinder.Eval(Container.DataItem,"City") %></td>
<td><%# DataBinder.Eval(Container.DataItem,"PostalCode") %></td>
<td><%# DataBinder.Eval(Container.DataItem,"Country") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
Non-display button is similar to usual button in DataList
. The tricky part is <%# TRJavaScript(Container) %>
. In DataList
item template, Container
is of type DataListItem
and every DataListItem
is a Control
. Here, we bind HiddenButton
's ClientID
to row OnClick
event response code. bSwitch
, color1
and color2
are class members and they help to implement alternate row background. Row highlighting color is yellow.
private bool bSwitch = false;
string color1 = "#ffffcc";
string color2 = "#ccff99";
public string TRJavaScript(Control con)
{
string tmp;
DataListItem dli = con as DataListItem;
Button btn = dli.FindControl("HiddenButton") as Button;
string _js = "bgcolor={0} onMouseover='rowcolor=this" +
".style.backgroundColor;this.style.backgroundColor" +
"=\"yellow\"; this.style.cursor = \"hand\"' " +
"onMouseout='this.style.backgroundColor=rowcolor;' " +
" onclick='document.getElementById(\"{1}\").click();' ";
tmp = bSwitch? string.Format(_js,color1, btn.ClientID) :
string.Format(_js,color2, btn.ClientID);
bSwitch = !bSwitch;
return tmp;
}
The DataList
ItemCommannd
event response is as usual. Here, we display employee ID. Note that we use MS SQL NorthWind database and its employee table.
private void testDL_ItemCommand(object source, DataListCommandEventArgs e)
{
this.lblID.Text = "This employee's ID is " + e.CommandArgument.ToString();
}