Enable DataList Row Highliting and Click Event Postback

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();
}