Click here to Skip to main content
11,922,788 members (55,251 online)
Click here to Skip to main content
Add your own
alternative version


18 bookmarked

TableActionProvider - row clickable HTML table

, 24 Jan 2006
Rate this:
Please Sign up or sign in to vote.
Row click functionality for any HTML table grid (DataGrid, DataView, etc...).

Sample Image - TableActionProvider.gif


I need the ability to make a DataGrid row clickable. The code must be reusable such that it could be applied to the ASP.NET 2.0 GridView or the HTML Table control. This means that the code will be in JavaScript and adds functionality to the HTML table element.

An online demo can be viewed here.


Those of us that have researched and implemented a solution for this problem have probably implemented something like Dave Hurt in Clickable Rows in a DataGrid. This implementation would not work for me because it is limited to the DataGrid. I could, of course, write the same code for the GridView; but that would not be the best route for reusability. Adding to that, our development team has ran into string concatenation memory leaks in the past and made a rule to avoid string concatenation as much as possible.

Using the code

To use the script, you will need to include two files in your html: EventManager.js and TableActionProvider.js.

The most common code you will use is:

// TableActionProvider.add(gridID, backgroundColor,
//    foreColor, rowToStartHoverEffect, null, true);
TableActionProvider.add("grid1", "blue", "white", 1, null, true);

The code above is to add single click capability to an HTML table element with the table ID "grid1". The mouse hover/highlighting colors are "blue" in the background "white" in the foreground. We also start the hovering effect on row one because the DataGrid puts its headers on row zero. Below is the Add method header for reference:

Desc:    Main function for adding action to a html table
    ctrl            - table control reference or id string
    backgroundColor - background color when mouse over
    color           - fore color when mouse over
    startRow        - table row to start effect 
    actionFunction  - pointer to function when click or dblclick
    useSingleClick  - true to fire action on single click

add: function (ctrl, backgroundColor, color, 
       startRow, actionFunction, useSingleClick) {

Why did I set null for actionFunction and what does it do? The general practice of a grid is to put action links or buttons on the first or the last column. The TableActionProvider implements the rule that action links or buttons should always be the first column. Setting the actionFunction to null tells the TableActionProvider to click the first clickable item in the first column.

However, you could tell TableActionProvider not to do your own bidding by providing your own actionFunction when the user clicks anywhere on the grid row. For example, let say, you want to alert the user what is in column three when the row is clicked:

function alertColumnThree(row) {
    if (row != null && row.cells.length > 3)

TableActionProvider.add("grid1", "blue", "white", 1, 
                            alertColumnThree, true);

As you can see, the action function accepts a table row as its parameter because TableActionProvider passes this data when it calls the function.

By default, TableActionProvider responds to a double-click unless you set useSingleClick to true. In some situations, the user would like to be able to copy the data from the grid so they can paste it somewhere like to a report or to an email. This is when I would set useSingleClick to false or just ignore it all together.

One other note is that TableActionProvider.add must be used after your grid is loaded. The script should be added somewhere in the window or body OnLoad event. You could also use the ASP.NET Page.RegisterStartupScript to register the Add method.


TableActionProvider meets my needs by providing a simple and reusable method for providing row click functionality on any HTML table. Of course, there are many more possible enhancements:

  • Use right click for action and left for selection.
  • Provide coloring for handling selected items.
  • Use a CSS class instead of raw coloring.


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

Web Developer
United States United States
If at first you don't succeed, refract and refract again...

You may also be interested in...

Comments and Discussions

Generaldetecting checkbox state Pin
Ynfynyty21-Jul-06 6:27
memberYnfynyty21-Jul-06 6:27 
GeneralEnableSortingAndPagingCallbacks Pin
fabiucciod25-Jan-06 23:44
memberfabiucciod25-Jan-06 23:44 
GeneralRe: EnableSortingAndPagingCallbacks Pin
Noogen26-Jan-06 4:49
memberNoogen26-Jan-06 4:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.151125.1 | Last Updated 24 Jan 2006
Article Copyright 2006 by Noogen
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid