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
{
public class WebUIFacade
{
public WebUIFacade()
{
}
public void
SetHeaderToolTip(System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Header)
{
string headerText = "";
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{}
}
}
}
public void SetRowHover(DataGrid dg,
System.Web.UI.WebControls.DataGridItemEventArgs e)
{
try
{
string className = "";
if((e.Item.ItemType == ListItemType.Item) ||
(e.Item.ItemType == ListItemType.AlternatingItem))
{
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
{
}
}
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)
{
WebUIFacade uiFacade = new WebUIFacade();
uiFacade.SetHeaderToolTip(e);
uiFacade.SetGridLinkButtonStyle(e);
uiFacade.SetRowHover(this.dataGrid, e);
}
Using the Code
- Create a new class in the Web Project called
WebUIFacade
.
- 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.
- Create a new web page.
- Add a
DataGrid
to the page and call it dataGrid
.
- 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
.
- Add the style to a CSS file and include it in your web page, or add the style to the head of your page.