ASP.NET Extended DataGrid UI Features

Extended DataGrid UI Features Introduction

The ASP.NET DataGrid Server Control is a versatile control. The control displays data bound information in an HTML table. There are several key UI features that the DataGrid does not have. For instance, many HTML tables that show data in a list change the color of the row when the mouse hovers over. Also, when a list can be sorted, there is usually a tooltip text for each of the column headers that state "Sort by this column". This article shows how to incorporate these common features into a DataGrid.

The Facade

To reduce the complexity and redundancy for some of the interface methods, I created a facade called the WebUIFacade. A facade is a OO Design Pattern where you create a class that provides a simplified interface. There are several methods that extend the features of a DataGrid in the facade.

*** Note *** The SetRowHover method requires that you have a style named gridHover with a background color set to the color you want the row hover color to be.

Facade Code Example

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace YourProject.WebApp
{
    /// <SUMMARY>
    /// Summary description for WebUIFacade.
    /// </SUMMARY>
    public class WebUIFacade
    {
        /// <SUMMARY>
        /// Constructor.
        /// </SUMMARY>
        public WebUIFacade()
        {
            
        }

        /// <SUMMARY>
        /// This method creates a tooltip for the header columns in a datagrid.  
        /// Note:  This should only be used when the grid has sorting enabled.
        /// </SUMMARY>
        /// <PARAM name="e">DataGridItemEventArgs</PARAM>
        public void 
           SetHeaderToolTip(System.Web.UI.WebControls.DataGridItemEventArgs e)
        {
            // Is the item type of type header?
            if (e.Item.ItemType == ListItemType.Header)
            {
                string headerText = "";
                // Add the onmouseover and onmouseout
                // attribute to each header item.
                foreach (TableCell cell in e.Item.Cells)
                {
                    try
                    {
                        LinkButton lb = (LinkButton) cell.Controls[0];
                        headerText = "";

                        if(lb != null)
                        {
                            headerText = lb.Text;
                        }
                        
                        lb.ToolTip = "Sort By " + lb.Text;
                    }
                    catch{}
                }
            }
        }
    
        /// <SUMMARY>
        /// This method changes the color of the row when the mouse is over it.
        /// Note: You must have a class called gridHover
        ///       that sets the color of the hover row.
        /// </SUMMARY>
        /// <PARAM name="dg">DataGrid</PARAM>
        /// <PARAM name="e">DataGridItemEventArgs</PARAM>
        public void SetRowHover(DataGrid dg, 
            System.Web.UI.WebControls.DataGridItemEventArgs e)
        {
            try
            {
                string className = "";

                // Is the item an item or alternating item?
                if((e.Item.ItemType == ListItemType.Item) || 
                    (e.Item.ItemType == ListItemType.AlternatingItem))
                {
                    // Is the itemtype of type item?
                    if (e.Item.ItemType == ListItemType.Item)
                    {
                        className = dg.ItemStyle.CssClass;
                    }
                    else if(e.Item.ItemType == ListItemType.AlternatingItem)
                    {
                        className = dg.AlternatingItemStyle.CssClass;
                    }

                    e.Item.Attributes.Add("onmouseover", 
                             "this.className='gridHover';");
                    e.Item.Attributes.Add("onmouseout", 
                             "this.className='" + className + "';");
                }
            }
            catch
            {
            }
        }
        /// <SUMMARY>
        /// This method sets the CssStyle for a link button
        /// contained in the datagrid item, alternatingitem,
        /// or edititem row.  
        /// </SUMMARY>
        /// <PARAM name="e">DataGridItemEventArgs</PARAM>
        public void 
          SetGridLinkButtonStyle(System.Web.UI.WebControls.DataGridItemEventArgs e)
        {
            if(e.Item.ItemType == ListItemType.Item || 
                e.Item.ItemType == ListItemType.AlternatingItem ||
                e.Item.ItemType == ListItemType.EditItem)
            {
                foreach(TableCell cell in e.Item.Cells)
                {
                    try
                    {
                        LinkButton lb = (LinkButton) cell.Controls[0];
        
                        if(lb != null)
                        {
                            lb.CssClass = "GridLink";
                        }
                    }
                    catch{}
                }
            }
        }

    }
}

The Hover Style

This is the style used by the WebUIFacade.SetRowHover method.

.gridHover
{
    background-color: #ffffcc;
}

DataGrid Code Behind

In order to use the methods provided by the WebUIFacade, you must instantiate the facade in the ItemCreated event of the DataGrid. You will then have access to the facade's publicly available methods.

private void dataGrid_ItemCreated(object sender, 
         System.Web.UI.WebControls.DataGridItemEventArgs e)
{
    // Create a new WebUIFacade.
    WebUIFacade uiFacade = new WebUIFacade();
    
    // This is gives a tool tip for each
    // of the columns to sort by.
    uiFacade.SetHeaderToolTip(e);
    
    
    // This sets a class for the link buttons in a grid.
    uiFacade.SetGridLinkButtonStyle(e);
    
    // Make the row change color when the mouse hovers over.
    // *** You must have a class called gridHover with a different background 
    // color in your StyleSheet.
    uiFacade.SetRowHover(this.dataGrid, e);
}

Using the Code

1. Create a new class in the Web Project called WebUIFacade.
2. Copy the code for the WebUIFacade and paste it into your class. Ensure the namespace is the same as that of your web page. If not, include the facade in your web page references.
3. Create a new web page.
4. Add a DataGrid to the page and call it dataGrid.
5. Copy the code from the ItemCreated event and place it in your page's code behind. Make sure the event is fired by the DataGrid.
6. Add the style to a CSS file and include it in your web page, or add the style to the head of your page.