Page 1 of 1

ASP.Net GridView ExtenderControl using JQuery

#1 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 445
  • View blog
  • Posts: 1,501
  • Joined: 28-April 09

Posted 17 January 2011 - 09:45 PM

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


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


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


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


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


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

Spoiler


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


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

Spoiler


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


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


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

Spoiler


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>


Attached Image

Is This A Good Question/Topic? 0
  • +

Page 1 of 1