5,666,132 members and growing! (20,561 online)
Email Password   helpLost your password?
Web Development » Custom Controls » General     Intermediate

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

By Albert Pascual

Datagrid control with mouse over event to change the row color as Code Project
C#, Windows, .NET 1.1, .NET, ASP.NET, Visual Studio, VS.NET2003, Dev

Posted: 24 May 2004
Updated: 24 May 2004
Views: 130,044
Bookmarked: 41 times
Announcements
Loading...



Search    
Advanced Search
Sitemap
14 votes for this Article.
Popularity: 4.21 Rating: 3.68 out of 5
2 votes, 14.3%
1
1 vote, 7.1%
2
1 vote, 7.1%
3
1 vote, 7.1%
4
9 votes, 64.3%
5

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.

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

About the Author

Albert Pascual


Sitebuilder
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

Blog
Occupation: Web Developer
Location: United States United States

Other popular Custom Controls articles:

Article Top
Sign Up to vote for this article
You must Sign In to use this message board.
FAQ FAQ Noise ToleranceSearch Search Messages 
 Layout  Per page   
 Msgs 1 to 17 of 17 (Total in Forum: 17) (Refresh)FirstPrevNext
GeneralHow to implement paging in your Datagrid custom controlmemberkarunakarrao2:09 23 Feb '05  
GeneralAnother Implementationsuss< The Code Provider />6:50 19 Jul '04  
GeneralRe: Another Implementationsuss< The Code Provider />7:15 19 Jul '04  
GeneralAnother ImplementationsussThe Code Provider6:18 19 Jul '04  
GeneralSeems awful complicated for such a simple taskmemberShamusFu8:34 16 Jul '04  
GeneralAnother ApproachsussBrian Nash6:18 16 Jul '04  
GeneralRe: Another ApproachsussBrian Nash6:21 16 Jul '04  
GeneralRe: Another Approachmemberttestingonly9:15 16 Jul '04  
Generalif used two controls,how to?memberlinhaiyuan20:29 27 Jun '04  
GeneralHandle right clickmemberenjoycrack17:00 16 Jun '04  
GeneralEnter key to work like tab keymemberrags4:34 2 Jun '04  
GeneralRe: Enter key to work like tab keymemberjbrink500016:26 28 Jun '06  
GeneralWhy separate controlmemberBee Master20:47 24 May '04  
GeneralRe: Why separate controlmemberzaf0:03 25 May '04  
GeneralRe: Why separate controlmemberpmpjr7:36 3 Jun '04  
GeneralRe: Why separate controlmemberAlbert Pascual6:19 25 May '04  
GeneralRe: Why separate controlmemberspvarapu1:51 25 May '05  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 24 May 2004
Editor: Nishant Sivakumar
Copyright 2004 by Albert Pascual
Everything else Copyright © CodeProject, 1999-2008
Web15 | Advertise on the Code Project