Matt Berseth

In a recent post, I created a GridView that with the help of some JavaScript and CSS rendered similar to the Tablecloth style table shown here.  I like the Tablecloth sample because the presentation of the grid changes as the user interacts it.  It does a good job of keeping the user focused on the data elements the they are currently working with.           

Live Demo (IE6, IE7, FF) | Download  

The design of the Tablecloth grid is fairly simple.  It boils down to adding and removing CSS classes to the individual HTML Table elements (mostly TD's and TH's) in response to a four different DOM events (mouseover, mouseup, mousedown and click).  For example, when the mouse cursor is positioned over a particular cell in the table, the mouseover event fires and a bit of JavaScript runs and applies a CSS class to all of the cells that share the same rowIndex or cellIndex.  The image below shows how this works.  When the mouse is positioned over a particular cell, the .over CSS class is applied to all cells in the same row and column.  In this sample, the same CSS class is applied to all cells, but it wouldn't be too difficult to apply different classes to header or footer cells. 

While looking at the Tablecloth code, I thought it would be useful to incorporate similar features into an AjaxControlToolkit Extender control.  So I created a new GridViewExtenderControl that allows you to specify what CSS classes you want applied to the rows of the GridView when they are hovered on or clicked.  My plan is to implement a couple of simple features, and add on additional functionality after I get the plumbing in place.

For the first version of this new extender control, I implemented the following features:

• Apply a CSS class to the data rows of the gridview as they are moused-over
• Apply a CSS class to a selected data row (if you have the demo page open, try click on a data row)

After I created the control, I tested the functionality by extending a couple of my existing grids.  Below are the screenshots, but you can also try them out by viewing the interactive demo.

The markup for the GridViewExtenderControl exposes 3 main attributes:

1. TargetControlID: The ID of the GridView you want extended
2. RowHoverCssClass: The Css Class you want applied to the TR elements as they are moused-over
3. RowSelectedCssClass: the Css Class you want applied to the TR elements as they are clicked on

Here is some sample markup for how this would be used:

<asp:GridView 
    ID="gvTableCloth" runat="server" 
    CssClass="tablecloth-theme" AutoGenerateColumns="false" 
    DataSourceID="odsCustomers" AllowSorting="true">
    <RowStyle CssClass="data-row" />
    <AlternatingRowStyle CssClass="alt-data-row" />
    <Columns>
        <asp:BoundField HeaderText="ID" DataField="customerid" SortExpression="customerid" />
        <asp:BoundField HeaderText="Company" DataField="companyname" SortExpression="companyname" />
        <asp:BoundField HeaderText="Contact" DataField="contactname" SortExpression="contactname" />
        <asp:BoundField HeaderText="City" DataField="city" SortExpression="city" />
        <asp:BoundField HeaderText="Country" DataField="country" SortExpression="country" />
    </Columns>
</asp:GridView>
<%-- RowHover is applied to TR's as they are moused-over  --%>
<%-- RowSelect is applied to TR's as they are clicked  --%>
<mb:GridViewControlExtender 
    runat="server" TargetControlID="gvTableCloth" 
    RowHoverCssClass="row-over"
    RowSelectCssClass="row-select" 
/>

And here are the CSS classes for the row-over and row-select classes:

/* mouseover row style */
.tablecloth-theme .row-over { background-color:#ECFBD4; }

/* mouseover row style */
.tablecloth-theme .row-select 
{ 
    background:#BCE774;
    color:#555;
}

Like I said, this is really just the initial draft of this control (and so this posting is tagged as 'Prototype').  But, I am already finding it useful, and I have a feeling that I will be extending it further to include the following features as well ...

• Use the up and down keyboard arrows to navigate between selected data rows.  The YUI DataTable control does this.  You can play with it here
• Apply a CSS class to the individual cells of a column that is moused over (to get the veritical highlight effect)
• Apply a CSS class to the header and footer cells when a cell is moused over.  This would be a nice way to highlight the column a cell belongs to by just changing the style of the header cell, but not all of the other data cell in the column.
• Apply a CSS class when the mouse-down event fires for a cell.  The Tablecloth grid does this when a header cell is clicked to highlight the column.

The complete source is included in the download.  Feel free to take a look and send me your feedback.  The complete JavaScript file non-minified is only 130 LOC, so hopefully it isn't too intimidating.

That's it.  Enjoy!