Skip to main content
Email Password   helpLost your password?

Introduction

This article describes another DataGrid control. Datagrids are very flexible, this one just inherits from the class DataGrid and adds the mouse over event to change the color of the row as the Code Project tables. Got the idea from Chris Maunder tables on Code Project. I looked at his JavaScript and I implemented into the .NET DataGrid class.

Using the code

This is a customer control. I include the source code for the control and a test project how to use it. As any customer control, you need to add the reference to the project. On the ASPX page:

(...)
< MOD:MODataGrid> id="DataGrid1" style="Z-INDEX: 101; 
  LEFT: 320px; POSITION: absolute; TOP: 136px"
  runat="server">

On the aspx.cs file add:

  protected MouseOverDataGrid.MODataGrid DataGrid1;  

I used the Datagrid tutorial example from http://asp.net for the test project

The Control

A simple Inherit from Datagrid class and overriding the Render function with Chris Maunder JavaScript. There are 2 public properties, the SpecialLinkColor as default set to CodeProject mouseover color that you can set to any color you like. And OverLinkHand to display the cursor as a Hand. I did not implement the method for on-click but it is on the JavaScript, so you can always implement it.

 [assembly:TagPrefix("MouseOverDataGrid", "MOD")]
namespace MouseOverDataGrid
{
 /// <summary>

 /// Summary description for MouseOverDataGrid.

 /// </summary>

 public class MODataGrid : System.Web.UI.WebControls.DataGrid
 {  

  [Category("Design"), Description("OverLink Color")]
  private string sBackgroundColor = "#dddddd";
  public string SpecialLinkColor
  {
   get{return(sBackgroundColor);}
   set{sBackgroundColor=value;}
  }

  [Category("Design"), Description("OverLink Hand Type")]
  private bool bOverLinkHand = false;
  public bool OverLinkHand
  {
   get{return(bOverLinkHand);}
   set{bOverLinkHand=value;}
  }

  protected override void Render(System.Web.UI.HtmlTextWriter writer)
  {
   string sDataGridID = this.ID.ToString();

   string sCursor = "";
   if ( OverLinkHand == true )
    sCursor = "elm.style.cursor = Cursor;\r";

   string sJavaScript = "< script language="'\""javascript\"'>\r" +
    "function ShowRow1(elm, BgColour, FgColour)\r" +
    "{\r" +
    "elm.bgColor = BgColour;\r" + sCursor +
    "}\r" +
    "function HilightRow(elm, hover, highlight)\r" +
    "{\r" +
    " var BgColour = (hover)? \"" + SpecialLinkColor + "\" :  \"white\";\r" +
    " var FgColour = \"black\";\r" +
    " var Cursor   = (hover)? \"hand\" :  \"auto\";\r" +
    " ShowRow1(elm, BgColour, FgColour);\r" +
    " return false;\r" +
    "}\r" +
    "function RowOn()  { return HilightRow(this, true, false);  }\r" +
    "function RowOff() { return HilightRow(this, false, false); }\r" +
    "function RowClick()\r" +
    "{\r" +
    " HilightRow(this, false, true);\r" +
    " var elm = eval('document.getElementById(\"' + this.name + '_link\")');\r" +
    " if (elm) elm.click();\r" +
    " return true;\r" +
    "}\r" +
    "var table = document.getElementById(\"" + sDataGridID + "\");\r" +
    "var rows = table.getElementsByTagName(\"tr\");\r" +
    "for (var i = 0; i < rows.length; i++) {\r" +
    "rows[i].onmouseover = RowOn;\r" +
    "rows[i].onmouseout  = RowOff;\r" +
    //"rows[i].onclick     = RowClick;" +

    "}\r</script>\r";
  


   base.Render (writer);   
   base.Page.Response.Write(sJavaScript);
  }

 }
  

Points of Interest

For the Datagrid to work you have to make sure you do not add any color on the item background. If you are using paging, add same color in the footer.

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
GeneralHow to implement paging in your Datagrid custom control Pin
karunakarrao
2:09 23 Feb '05  
GeneralAnother Implementation Pin
6:50 19 Jul '04  
GeneralRe: Another Implementation Pin
7:15 19 Jul '04  
GeneralAnother Implementation Pin
The Code Provider
6:18 19 Jul '04  
GeneralSeems awful complicated for such a simple task Pin
ShamusFu
8:34 16 Jul '04  
GeneralAnother Approach Pin
Brian Nash
6:18 16 Jul '04  
GeneralRe: Another Approach Pin
Brian Nash
6:21 16 Jul '04  
GeneralRe: Another Approach Pin
ttestingonly
9:15 16 Jul '04  
Generalif used two controls,how to? Pin
linhaiyuan
20:29 27 Jun '04  
GeneralHandle right click Pin
enjoycrack
17:00 16 Jun '04  
GeneralEnter key to work like tab key Pin
rags
4:34 2 Jun '04  
GeneralRe: Enter key to work like tab key Pin
jbrink5000
16:26 28 Jun '06  
GeneralWhy separate control Pin
Bee Master
20:47 24 May '04  
GeneralRe: Why separate control Pin
zaf
0:03 25 May '04  
GeneralRe: Why separate control Pin
pmpjr
7:36 3 Jun '04  
GeneralRe: Why separate control Pin
Albert Pascual
6:19 25 May '04  
GeneralRe: Why separate control Pin
spvarapu
1:51 25 May '05  


Last Updated 24 May 2004 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009