AzamSharp

Custom Extender to Highlight GridView Rows

GridView row highlighting based on mouse events is a very common operation. This feature is implemented in most of the websites. A good idea it to create a Custom Extender which will extend the functionality of the GridView control and hence giving it the highligting feature. Let's check out our custom extender.

NOTE: If you are not familiar in creating Custom Extenders then I suggest that you check out the following documentation.

http://ajax.asp.net/ajaxtoolkit/Walkthrough/CreatingNewExtender.aspx

GridView Row Highligh Custom Extender:

Here is the complete code for the .JS file:

Type.registerNamespace('GridViewCustomExtenderControl');

GridViewCustomExtenderControl.GridViewCustomExtenderControlBehavior = function(element) {

GridViewCustomExtenderControl.GridViewCustomExtenderControlBehavior.initializeBase(this, [element]);

this._rowCssClass = null;

this.InitializeGridViewExtender();

}

GridViewCustomExtenderControl.GridViewCustomExtenderControlBehavior.prototype = {

initialize : function() {

GridViewCustomExtenderControl.GridViewCustomExtenderControlBehavior.callBaseMethod(this, 'initialize');

// TODO: add your initalization code here

},

dispose : function() {

// TODO: add your cleanup code here

GridViewCustomExtenderControl.GridViewCustomExtenderControlBehavior.callBaseMethod(this, 'dispose');

},

InitializeGridViewExtender : function()

{

var gridview = this.get_element();

var rows = gridview.getElementsByTagName("TR");

for(i=1; i<rows.length; i++)

{

// attach the css style

rows[i].className = this._rowCssClass;

}

},

get_RowCssClass : function() {

return this._rowCssClass;

},

set_RowCssClass : function(value) {

if(this._rowCssClass != value)

{

this._rowCssClass = value;

this.raisePropertyChanged('RowCssClass');

this.InitializeGridViewExtender();

}

}

}

GridViewCustomExtenderControl.GridViewCustomExtenderControlBehavior.registerClass('GridViewCustomExtenderControl.GridViewCustomExtenderControlBehavior', AjaxControlToolkit.BehaviorBase);

And here is the .CS file (Please note this is not the designer file):

using System;

using System.Web.UI.WebControls;

using System.Web.UI;

using System.ComponentModel;

using System.ComponentModel.Design;

using AjaxControlToolkit;

[assembly: System.Web.UI.WebResource("GridViewCustomExtenderControl.GridViewCustomExtenderControlBehavior.js", "text/javascript")]

namespace GridViewCustomExtenderControl

{

[Designer(typeof(GridViewCustomExtenderControlDesigner))]

[ClientScriptResource("GridViewCustomExtenderControl.GridViewCustomExtenderControlBehavior", "GridViewCustomExtenderControl.GridViewCustomExtenderControlBehavior.js")]

[TargetControlType(typeof(GridView))]

public class GridViewCustomExtenderControlExtender : ExtenderControlBase

{

[ExtenderControlProperty]

[DefaultValue("")]

public string RowCssClass

{

get { return GetPropertyValue("RowCssClass", ""); }

set { SetPropertyValue("RowCssClass", value); }

}

}

}

And finally here is the Default.aspx page that uses the custom extender:

<%@ Register Assembly="GridViewCustomExtenderControl" Namespace="GridViewCustomExtenderControl" TagPrefix="cc1" %>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

<asp:GridView ID="gvCategories" runat="server" />

<cc1:GridViewCustomExtenderControlExtender RowCssClass="row" TargetControlID="gvCategories" runat="server" />

The important thing to note is the RowCssClass attribute and the row class which does all the work.

tr.row:hover

{

background-color:Yellow;

}

tr.row

{

background-color:Green;

}

You will need to tweak the code to get it working for the alternate row rows. The example works for both IE and FireFox browsers.

Published Tuesday, May 08, 2007 6:18 PM by azamsharp