[Nakor]

The ControlExtender is an abstract class that allows for adding additional client-side functionality to existing controls. This tutorial is going to show how to create a GridView extender control that enables highlighting of rows when the mouse passes over them. This project will contain a C# class file, GridViewExtender.cs, and a javascript file, GridViewExtender.js. So create a new library project and add a C# class, a javascript file and let's get started. Since we are creating a control library we will need to add the javascript file as a web resource and script resource in the AssemblyInfo.cs file before we actually get started on the code for the control. This file is located inside the Properties folder of the project.

[assembly: WebResource("ExtenderControls.GridViewExtender.GridViewExtender.js", "text/javascript")]
[assembly: ScriptResource("ExtenderControls.GridViewExtender.js",
           "ExtenderControls.GridViewExtender", "ExtenderControls.Resource")]

Let's get started by creating the basic shell of the GridViewExtender class.

Spoiler

using System.Collections.Generic;
using System.Web.UI;
using System.Web.UI.WebControls;


namespace ExtenderControls
{
    public class GridViewExtender : ExtenderControl // Inherits from ExtenderControl
    {

    }
}

The ExtenderControl class is part of the System.Web.UI namespace and implements IScriptControl. One of the namespaces we are using for the class is the ComponentModel namespace. This provides the definitions of some needed attributes for our control. We will need an attribute that designates which type of control we are wanting to extend and we also need to let Visual Studio know how to display the tag that is created when we drag the control from the toolbox into the designer. The TargetControl and ToolboxData attributes perform these functions for us and are added just before the class declaration.

Spoiler

[TargetControlType(typeof(GridView))]
[ToolboxData("<{0}:GridViewExtender runat=\"server\"></{0}:GridViewExtender>")]
public class GridViewExtender : ExtenderControl
{

}

Since we are extending the GridView control we specify GridView as the target control type in the TargetControlType attribute. IScriptControl, which is implemented by ExtenderControl, requires that we override two of its methods. The GetScriptDescriptors method and the GetScriptReferences methods contain information about the client-script libraries to be included with the control as well as representing the javascript events and properties.
GetScriptReference does just what it sounds like, it provides a reference to the javascript file. Since we're creating a control library this will provide a reference to the assembly that the javascript is in.

Spoiler

// Generate the script reference
        protected override IEnumerable<scriptReference>
                GetScriptReferences()
        {
            yield return new ScriptReference("ExtenderControls.GridViewExtender.GridViewExtender.js", this.GetType().Assembly.FullName);
        }

The GetScriptReference method does the work of loading the javascript file. The work of creating the the our GridViewExtender class properties to their corresponding javascript properties and events handlers is left up to the GetScriptDescriptors method. Before we get to that, let's go ahead and create the class property we'll use to set the css class for the highlighted rows.

Spoiler

private string _hoverCssClass;

        public string HoverCssClass
        {
            get { return _hoverCssClass; }
            set { _hoverCssClass = value; }
        }

Ok, so here we have a private field, "_hoverCssClass", and it's accessor property, "HoverCssClass". This single property is all we're going to need to get a simple gridview extender working.

Spoiler

protected override IEnumerable<scriptDescriptor>
                GetScriptDescriptors(System.Web.UI.Control targetControl)
        {
            ScriptbehaviorDescriptor descriptor = new ScriptbehaviorDescriptor("ExtenderControls.GridViewExtender", targetControl.ClientID);
            descriptor.AddProperty("hoverCssClass", this.HoverCssClass);

            yield return descriptor;
        }

That completes the C# part for the control. The finished class should look something like this:

Spoiler

using System.Collections.Generic;
using System.Web.UI;
using System.Web.UI.WebControls;


namespace ExtenderControls
{
    /// <summary>
    /// Summary description for ExtenderControl1
    /// </summary>
    [
        TargetControlType(typeof(GridView))
    ]
    public class GridViewExtender : ExtenderControl
    {
        private string _hoverCssClass;

        public string HoverCssClass
        {
            get { return _hoverCssClass; }
            set { _hoverCssClass = value; }
        }

        protected override IEnumerable<scriptDescriptor>
                GetScriptDescriptors(System.Web.UI.Control targetControl)
        {
            ScriptbehaviorDescriptor descriptor = new ScriptbehaviorDescriptor("ExtenderControls.GridViewExtender", targetControl.ClientID);
            // this will set the value of a hoverCssClass variable in the javascript with the value of our
            // HoverCssClass property. You will need to make sure the case of the javascript variable matches
            // the name used here. Convention seems to be to define the javascript variable with an underscore,
            // such as "_hoverCssClass"
            descriptor.AddProperty("hoverCssClass", this.HoverCssClass);

            yield return descriptor;
        }

        // Generate the script reference
        protected override IEnumerable<scriptReference>
                GetScriptReferences()
        {
            yield return new ScriptReference("ExtenderControls.GridViewExtender.GridViewExtender.js", this.GetType().Assembly.FullName);
        }
    }
}

Now on to the javascript file. The javascript file for an ExtenderControl, and really any control that inherits from IScriptControl, follow a fairly specific format. The basic template for the javascript file involves registering the namespace, then initializing, configuring, and registering the class.

Spoiler

Type.registerNamespace("ExtenderControls");

ExtenderControls.GridViewExtender = function(element) {
    ExtenderControls.GridViewExtender.initializeBase(this, [element]);
    
    // Class fields defined here
}

ExtenderControls.GridViewExtender.prototype = {
    initialize: function () {
        ExtenderControls.GridViewExtender.callBaseMethod(this, 'initialize');
        // Add code to run when initializing the class, this is where
        // we add event handlers or set attributes
    },
    dispose: function () {
        //Add custom dispose actions here
        ExtenderControls.GridViewExtender.callBaseMethod(this, 'dispose');
    }
    // Class methods and properties defined here
}
ExtenderControls.GridViewExtender.registerClass('ExtenderControls.GridViewExtender', Sys.UI.behavior);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

So let's create our hoverCssClass variable, this is done in the initializeBase function.

Spoiler

    ExtenderControls.GridViewExtender = function(element) {
        ExtenderControls.GridViewExtender.initializeBase(this, [element]);

        // the case for this variable should match that defined in the ScriptDescriptor of the .cs file
        this._hoverCssClass = null;
}

Now that the class variable is created we need to create some accessors for getting and setting its value. We'll define these just after the dispose function in the prototype definition.

Spoiler

dispose: function () {
        //Add custom dispose actions here
        ExtenderControls.GridViewExtender.callBaseMethod(this, 'dispose');
    },

    // Get the hoverCssClass variable
    get_hoverCssClass: function () {
        return this._hoverCssClass;
    },

    // Set the hoverCssClass variable
    set_hoverCssClass: function (value) {
        if (this._hoverCssClass != value)
            this._hoverCssClass = value;
    }

Now that we have our hoverCssClass variable as well as a way to get and set its value, we just need a way to attach this value to each row of the GridView control. We do this in the initialize function of the prototype definition. Here we'll use some jquery code so that we only highlight the data rows, avoiding the header row and the pager row. Of course this means you will have to have jquery loaded on your site for this to work, but if you're not already using jquery then you really need to look into it!

Spoiler

initialize: function () {
        ExtenderControls.GridViewExtender.callBaseMethod(this, 'initialize');

        var hover_css = this.get_hoverCssClass();

        $("#" + this.get_element().id + " tr:not(tr:last-child)").filter(function () {
            return $('td', this).length && !('table', this).length
        }).hover(function () {
            $(this).toggleClass(hover_css);
        });

    }

So, finally, our completed javascript file should look like:

Spoiler

Type.registerNamespace("ExtenderControls");

ExtenderControls.GridViewExtender = function(element) {
    ExtenderControls.GridViewExtender.initializeBase(this, [element]);

    this._hoverCssClass = null;
}

ExtenderControls.GridViewExtender.prototype = {
    initialize: function () {
        ExtenderControls.GridViewExtender.callBaseMethod(this, 'initialize');
        var hover_css = this.get_hoverCssClass();

        $("#" + this.get_element().id + " tr:not(tr:last-child)").filter(function () {
            return $('td', this).length && !('table', this).length
        }).hover(function () {
            $(this).toggleClass(hover_css);
        });
    },
    dispose: function () {
        //Add custom dispose actions here
        ExtenderControls.GridViewExtender.callBaseMethod(this, 'dispose');
    },

    get_hoverCssClass: function () {
        return this._hoverCssClass;
    },

    set_hoverCssClass: function (value) {
        if (this._hoverCssClass != value)
            this._hoverCssClass = value;
    }
}
ExtenderControls.GridViewExtender.registerClass('ExtenderControls.GridViewExtender', Sys.UI.behavior);

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

After adding the control to your toolbox, just drag it onto your .aspx file, set the targetControlID property and the HoverCssClass, and instant gridview row highlighting.

<cc1:GridViewExtender ID="GridView1_GridViewExtender" runat="server" 
    HoverCssClass="hover" TargetControlID="GridView1">
</cc1:GridViewExtender>