ASP.NET DataGrid Customization: Highlight and Select Row with Client-side JavaScript

Provided by the FMS Development Team

With the built-in ASP.NET DataGrid control, you can design the template inside VS.NET (via the DataGrid Property Builder user interface). By default, you can use ItemStyle, AlternatingItemStyle, and SelectedItemStyle to control the DataGrid row style. You could add a Button Column to the DataGrid so the user can click on the button (Link Button or Push Button) to select a row in the DataGrid.

There are some shortcomings with the above built-in DataGrid behavior:

1. ItemStyle is defined at design-time. Although you can change it at run-time, post-back is required to apply the changing style to the DataGrid. The DataGrid does not provide any visual feedback unless such operation triggers post-back.
2. Using a select button is less obvious to the user. In comparison, in most DataGrids within desktop applications, the user can click anywhere in the row to select an individual row.

You can customize the DataGrid with client-side JavaScript to overcome the above shortcomings. Following are steps to do so:

1. Setup the DataGrid template. Use the Select Button to add a column to use for selection in the DataGrid.
2. Add the Event Handler for the DataGrid ItemCommand. Set the Select Button Column to be hidden (Visible="False"). You will hide this column, at the same time you can still trigger the Select ItemCommand via the client-side script and respond to it:
   
     private void grid_ItemCommand(object source,   
     System.Web.UI.WebControls.DataGridCommandEventArgs e)
     {
        if(e.CommandName == "Select")
        {
           grid.SelectedIndex = e.Item.ItemIndex;
           ...
           }
     }
    
3. Attach the following client-side script:

     <script language="javascript">
      <!--
      function highlightRow(obj, newColor)
      {
        obj.style.cursor = "hand";
        // light-yellow, can be changed to whatever desired.
        obj.style.backgroundColor = "#ffffcc";
      }
    
      function dehighlightRow(obj, originalColor)
      {
        obj.style.backgroundColor = originalColor;
      }
      //-->

    </script>
    

4. Add the following Event Handler to the DataGrid:
   
   You will change the cursor to Hand and highlight the current row when the user moves the mouse over the DataGrid row. The user can double-click anywhere in the row to select the row. (Select will trigger a post-back.)
   
     // Change this constant accordingly to the column index of the Select
     // ButtonColumn.
     const int SelectButtonColumnIndex = 0;
    
     private void grid_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
     {
       if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
       {
          if(grid.EditItemIndex < 0)
          {
             // By default, ButtonColumn is mapped to LinkButton.
             LinkButton button = (LinkButton) e.Item.Cells[SelectButtonColumnIndex].Controls[0];
   
             if(button != null)
             {
                e.Item.Attributes["ondblclick"] = Page.GetPostBackClientHyperlink(button, "");
             }
          }
      
          if(e.Item.ItemType == ListItemType.Item)
          {
             e.Item.Attributes.Add("onmouseenter", "highlightRow(this, '" + ToHTMLColor(grid.SelectedItemStyle.BackColor) + "')");
             e.Item.Attributes.Add("onmouseleave", "dehighlightRow(this, '" + ToHTMLColor(grid.ItemStyle.BackColor) + "')");
          }
          else
          {
             e.Item.Attributes.Add("onmouseenter", "highlightRow(this, '" + ToHTMLColor(grid.SelectedItemStyle.BackColor) + "')");
           e.Item.Attributes.Add("onmouseleave", "dehighlightRow(this, '" + ToHTMLColor(grid.AlternatingItemStyle.BackColor) + "')");
         }
       }
     }

Furthermore, you can create your own version of the DataGrid by inheriting the built-in DataGrid. With this, you can encapsulate all code above within your own control. This way the ASP.NET page developer can use this DataGrid the same as the built-in DataGrid while having all the customization available.

Reference:

ASP.NET Data Web Controls Kick Start
by Scott Mitchell

Return to Tips & Techniques Page