Introduction

The ASP.NET 2.0 Framework comes with the GridView, a feature-rich ASP.NET server control to display, page through, and edit data on a webpage. Paging, selecting, sorting and editing of the GridView is achieved by declaratively adding properties to the markup of the GridView. This adds link buttons to the data rows of the GridView. You have to click on one of the link buttons to delete or edit a row. One feature I missed is the ability to use these features via keyboard shortcuts.

To achieve that, I developed an ASP.NET 2.0 AJAX Extensions Extender Control for use with ASP.NET 2.0 GridView on ASP.NET 2.0 AJAX enabled web pages.

What You Can Do with the Extender and How to Use It

You can use this extender control in existing ASP.NET 2.0 AJAX Extension application web pages which contain the ASP.NET 2.0 GridView server control.

In the current version, the extender control must be placed at the same level in the control tree as the GridView it belongs to.

In the current release, the extender provides the following navigation and editing features, and the following default keyboard shortcut scheme:

Feature

Feature Description

Default Shortcut Key

Paging

If paging is enabled for the GridView, you have shortcuts to navigate to the next, previous, first, and last pages. You can navigate to first and last page by keyboard even if the link buttons for the first and last page aren't currently visible.

Next page: Right arrow key

Previous page: Left arrow key

First Page: ALT + Pos1

Last Page: ALT + End

Selecting

If selecting is enabled and a row is preselected, you have shortcuts to navigate to the next and previous row.

Select next row: Down key

Select previous row: Up key

Edit

If editing is enabled and a row is preselected, you have shortcuts to all editing features.

Switch selected row to edit mode: ALT + m key

Cancel editing: ALT + q key

Update changes: ALT + u key

Delete

If deleting is enabled and a row is preselected, you have shortcuts to delete that row.

Delete row: Del key

Sort

The GridView keyboard Extender supports sorting of columns now. To activate sorting on the GridView, you need to do the following:

You don't need to display the corresponding link buttons in order to select, delete, sort and edit a data row by keyboard shortcuts.

This default keyboard scheme can easily be changed by changing the default key values in the extender class.

To configure the keyboard scheme for a GridView, you can set the corresponding public key values XXXKey to a value of the Keys enumeration.

For paging, the extender works with both the numeric and the next/previous pager scheme. It works for all four existing GridView.PagerSettings.Mode values. If the grid doesn't support paging at all, nothing happens when pressing the keyboard shortcuts.

Background

The solution is based on an ASP.NET 2.0 AJAX Extender WebControl. This makes it easy to change the keyboard scheme on server-side and minimize work in the client-side JavaScript.

The extender control works by simulating the corresponding postback commands of the GridView's link buttons. So, the keyboard shortcuts are compatible to the default client/server based GridView navigating and editing scheme, and the ViewState of the GridView remains in sync.

The article will not cover the general steps in developing Extenders and Behaviour controls, but will describe the solution specific details. For a comprehensive documentation on how to develop an ASP.NET 2.0 AJAX Extensions Extender Control, read the documentation on AJAX.ASP.NET, and particularly the article about developing an Extender control.

In a few words, to develop an Extender control which extends the client behavior of an ASP.NET server control on the client side, you must create an ASP.NET 3.5 AJAX Extender Control for the server side, and a corresponding JavaScript class, derived from the "Sys.UI.Behavior" class, for client side handling. You need to register the JavaScript class in the server side Extender class so the script is emitted at runtime.

Server-side Code

In the following section, I will describe the important server side steps to build up the Extender control. In the following snippet, you see the definition of the Extender class on the server-side.

The extender only makes sense in conjunction with a GridView control. We can limit the use of the extender control to the target type GridView by adding the TargetControlType attribute to the class definition. A System.ArgumentNullException is thrown when the control, targeted by the TargetControlID property of the Extender control, is not of type GridView.

As stated before, the extender works by triggering the postbacks of the GridView. So, we need three properties for each action: the unique ID value of the GridView control on the page, the key value of the keyboard which is intended to fire the postback, and the command argument of the corresponding action on the GridView.

The following code snippet shows the server side properties for handling the delete event. All other events have analogous properties.

The property DeleteCmdArgument holds the value for the command argument of the corresponding GridView event. The actual value depends on the current state of the GridView, and is determined later.

The public property DeleteKey is used for the key value so we can configure it declaratively, e.g., in a User Control. For attaching this key value to a corresponding key value on the client side, we use a property which gives back the string representation of the ASCII key value of the selected public key enumeration value.

The key values are defined and enumeration found in the file KeyCodeEnums.cs.

We need the unique id of the GridView on the client side to fire a postback on it.

The GridView object the extender belongs to is determined by gaining a reference to the control with the ID value of the TargetControlID of the extender control. The extender property TargetControlID is the ID of that control the extender is associated with.

In the OnPreRender override, we set up the command arguments for postback of the GridView. The current values of the command arguments depend on the current state of the GridView, e.g., the index of the selected page or row.

During postback, for security purposes, the ASP.NET runtime checks whether the control ID and the command argument is a valid combination that is allowed to fire postback events. For that, we need to register the GridView's control ID and the command arguments the GridView could post back. This is achieved by calls to the method RegisterForEventValidation of the ClientScriptManager class. This step must be done in the override of the Render method of our extender control. After registering the combination of the ID and the command arguments, the extender is allowed to post back these commands of the GridView.

To bridge the server side part of the extender with the client side part, you have to override the method GetScriptDescriptors of the extender class. There you map the server properties with properties on the client side Behavior class.

Another thing we do here is deactivate any keyboard shortcuts of the browser that conflict with one of our keyboard shortcuts. In this case, we deactivate the "Add to Favorites" (ALT+D) of the Firefox browser that conflicts with our Save Changes shortcut when editing a row in the GridView. We have to dispose the event handler to avoid memory leaks. We use the dispose function for that.

In the handler, you can edit the code to adapt the behavior of the extender when pressing a key (combination) to your needs.

In the KeyDown handler on the client side, we check if the pressed key (combination) is one of the keyboard shortcuts for the GridView actions we defined on the server side. If this is the case, we call the __doPostBack function with the ID of the GridView and the command argument which fires the corresponding command on the server side. The __doPostBack function is emitted by the ASP.NET framework to the HTML markup of the page. The purpose is for posting back (submitting the HTML form) as a response to a user action or another client side event which calls for server side handling.

Using the Code

To use the extender in your project, unzip the code and add it to your solution.

Now, you are ready to use the extender in your existing or upcoming projects. You can add it in the ASP.NET Toolbox if you use it regularly.

The following ASP.NET markup shows how the GridView and the extender control coexist. One important property is the TargetControlID. This is the ID of the control, in our case the GridView control, the extender control adds client behavior to. TargetControlID is a property of the System.Web.UI.Extender class.

Comments and Discussions

Hi Rolf,
I used this extender, it is superb. I face only one problem with this, i have a pop-up window for editing. After Pressing short cut keys for edit, pop-up window appears but I can't write anything in textboxes and when I press up/down arrow key, my pop-up window disappears. Kindly help me.