DataGrid is a powerful server control that displays data binding information in an HTML table. However, there are several UI functions, which are not implemented in the DataGrid, for example, when the mouse slides to a row in the table, the row background color changes, after the mouse is left, the background color is recovered; if there is a list of tables to be sorted Usually there will be a prompt text "Sort by this column" in the column header. Below we describe how to add these features to DataGrid.
Exterior
Create an appearance (FACADE) Webuifacade, providing a simple interface, Facade is an object-oriented design pattern. This class provides several ways to extend the functionality of the DataGrid.
Note: Method SetRowhover requires you a style named Gridhover, which is the color of the background color to change when the mouse is slid to the current row.
Appearance code
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 ()
{
}
///
/// This method creates a prompt for the column header.
/// Note: Only Grid settings can be sorted to use
///
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];
Headeertext = ""
IF (lb! = null)
{
Headeertext = lb.text;
}
Lb.Tooltip = "sort by" lb.text;
}
Catch {}
}
}
}
///
/// 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.
///
/// DataGrid
/// DataGriditeMeventArgs 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
{
}
}
///
/// this method sets the cssstyle for a link button
/// Contained in the DataGrid Item, AlternatingItem,
/// or edititem row.
///
/// DataGriditeMeventArgs
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 {}
}
}
}
}
}
Discoloration style
This is the discoloration style used by Webuifacade.setrowhover.
.gridhover
{
Background-color: #fffcc;
}
DataGrid code
In order to use the method provided by WebUIFACADE, you must instantiate the appearance in the DataGrid Itemcreated event.
Private void DataGrid_Itemcreated (Object Sender, System.Web.ui.WebControls.DataGriditeMeventargs E)
{
// Institute of Webuifacade.
Webuifacade uiFacade = new webuifacade ();
// give each sort sequence
UiFacade.setHeadertooltip (e);
UiFacade.setgridlinkButtonStyle (e);
// The background color of the current line is set when the mouse is slid.
UiFacade.setrowhover (THIS.DATAGRID, E);
}
Use code
1. Create a new class in the web engineering, named Webuifacade
2. Copy code into your class file.
3. Create a new page.
4. Add a DataGrid control to your new page.
5. Copy the corresponding code to the Itemcreated event.
6. Copy the style into your CSS file and you want to include the CSS file.
