Click here to Skip to main content
12,827,276 members (47,014 online)
Click here to Skip to main content
Add your own
alternative version


52 bookmarked
Posted 24 May 2004

Datagrid custom control to change the row color on Mouse Over event

, 24 May 2004
Rate this:
Please Sign up or sign in to vote.
Datagrid control with mouse over event to change the row color as Code Project


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"

On the aspx.cs file add:

protected MouseOverDataGrid.MODataGrid DataGrid1;

I used the Datagrid tutorial example from 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

  [Category("Design"), Description("OverLink Hand Type")]
  private bool bOverLinkHand = false;
  public bool OverLinkHand

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

   string sCursor = "";
   if ( OverLinkHand == true )
    sCursor = " = 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(\"' + + '_link\")');\r" +
    " if (elm);\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;" +

   base.Render (writer);   


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.


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


About the Author

Albert Pascual
Web Developer
United States United States
Al is just another Software Engineer working in C++, ASp.NET and C#. Enjoys snowboarding in Big Bear, and wait patiently for his daughters to be old enough to write code and snowboard.

Al is a Microsoft ASP.NET MVP


You may also be interested in...


Comments and Discussions

QuestionHow to implement paging in your Datagrid custom control Pin
karunakarrao23-Feb-05 2:09
memberkarunakarrao23-Feb-05 2:09 
GeneralAnother Implementation Pin
< The Code Provider />19-Jul-04 6:50
suss< The Code Provider />19-Jul-04 6:50 
GeneralRe: Another Implementation Pin
< The Code Provider />19-Jul-04 7:15
suss< The Code Provider />19-Jul-04 7:15 
GeneralAnother Implementation Pin
The Code Provider19-Jul-04 6:18
sussThe Code Provider19-Jul-04 6:18 
GeneralSeems awful complicated for such a simple task Pin
ShamusFu16-Jul-04 8:34
memberShamusFu16-Jul-04 8:34 
GeneralAnother Approach Pin
Brian Nash16-Jul-04 6:18
sussBrian Nash16-Jul-04 6:18 
GeneralRe: Another Approach Pin
Brian Nash16-Jul-04 6:21
sussBrian Nash16-Jul-04 6:21 
GeneralRe: Another Approach Pin
ttestingonly16-Jul-04 9:15
memberttestingonly16-Jul-04 9:15 
Questionif used two controls,how to? Pin
linhaiyuan27-Jun-04 20:29
memberlinhaiyuan27-Jun-04 20:29 
GeneralHandle right click Pin
enjoycrack16-Jun-04 17:00
memberenjoycrack16-Jun-04 17:00 
GeneralEnter key to work like tab key Pin
rags2-Jun-04 4:34
memberrags2-Jun-04 4:34 
GeneralRe: Enter key to work like tab key Pin
jbrink500028-Jun-06 16:26
memberjbrink500028-Jun-06 16:26 
GeneralWhy separate control Pin
Bee Master24-May-04 20:47
memberBee Master24-May-04 20:47 
GeneralRe: Why separate control Pin
zaf25-May-04 0:03
memberzaf25-May-04 0:03 
GeneralRe: Why separate control Pin
pmpjr3-Jun-04 7:36
memberpmpjr3-Jun-04 7:36 
GeneralRe: Why separate control Pin
Albert Pascual25-May-04 6:19
memberAlbert Pascual25-May-04 6:19 
GeneralRe: Why separate control Pin
spvarapu25-May-05 1:51
memberspvarapu25-May-05 1:51 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170326.1 | Last Updated 25 May 2004
Article Copyright 2004 by Albert Pascual
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid