Click here to Skip to main content
15,867,750 members
Articles / Web Development / ASP.NET
Article

ASP.NET Extended DataGrid UI Features

Rate me:
Please Sign up or sign in to vote.
4.44/5 (17 votes)
29 Aug 20042 min read 127K   62   13
The ASP.NET DataGrid Server Control is a versatile control. The control displays data bound information in a 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.

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

C#
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.

HTML
.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.

C#
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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralExcellent Pin
miah alom20-Mar-06 10:51
miah alom20-Mar-06 10:51 
Very helpful article.

Generalwhy use linkbutton Pin
scow14-Nov-05 22:32
scow14-Nov-05 22:32 
Questionwhy create new instance when you can reference with &quot;this&quot;? Pin
Swift coder14-Oct-05 12:49
Swift coder14-Oct-05 12:49 
AnswerRe: why create new instance when you can reference with &quot;this&quot;? Pin
Anonymous14-Oct-05 13:45
Anonymous14-Oct-05 13:45 
GeneralRe: why create new instance when you can reference with &quot;this&quot;? Pin
Swift coder21-Apr-06 15:35
Swift coder21-Apr-06 15:35 
Generalreal poor idea Pin
yg70014-Jul-05 17:42
yg70014-Jul-05 17:42 
GeneralRe: real poor idea Pin
Anonymous5-Jul-05 1:13
Anonymous5-Jul-05 1:13 
GeneralRe: real poor idea Pin
Kenneth Young5-Jul-05 2:53
Kenneth Young5-Jul-05 2:53 
GeneralInheritance Pin
Anonymous30-Aug-04 11:17
Anonymous30-Aug-04 11:17 
GeneralRe: Inheritance Pin
Kenneth Young30-Aug-04 11:44
Kenneth Young30-Aug-04 11:44 
GeneralRe: Inheritance Pin
Anonymous30-Aug-04 16:25
Anonymous30-Aug-04 16:25 
GeneralRe: Inheritance Pin
Kenneth Young31-Aug-04 3:41
Kenneth Young31-Aug-04 3:41 
GeneralRe: Inheritance Pin
hejo756-Apr-05 9:25
hejo756-Apr-05 9:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.