TableActionProvider - row clickable HTML table

• Download source files - 23.1 Kb

Introduction

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.

Background

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:

/*
----o0o============================================================o0o----
Desc:    Main function for adding action to a html table
Inputs:
    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

----o0o============================================================o0o----
*/
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)
        alert(row.cells[2].innerText);
}

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.

Conclusion

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.