GridViewControlExtender II - Header Cell MouseOver Styles and a Few More Live Examples
I recently wrote a posting showing how GridView mouseover effects can be added to your existing GridView's through the use of a AjaxControlToolkit extender control. In the last portion of the post I mentioned how I thought it would be useful to add other features into this extender to support column and header cell cell hover and select effects. So on a recent road trip to Orlando FL I added a couple new features to this extender control and built a handful more grids to show off the new enhancements. One of the new GridView themes uses the Sharepoint 2007 calendar color scheme and the other is derived from the ExtJs Data Grid. All of the grids can be viewed on the demo site and of course you can also download the full source.
Live Demo (IE6, IE7 and FF) | Download
The GridViewControlExtender now includes support for applying column hover and select CSS classes to cells that are in the same column as the currently moused-over cell as well as a separate class for the header cell (TH). If you look at the screenshot below, when the mouse cursor is hovering over the cell with the .cell-over class, the extender control applies the .column-over class to all data cells in the same column, the .hd-col-over to the header cell in the column, and the .row-over to all cells in the same row. Unfortunately, the JavaScript listing for this extender has grown a bit more to support these features, but again the approach is the same - add and remove CSS classes based on DOM mouseover, mouseover and click events.
Below I have a few sample screenshots and a quick overview of the grid features each of the examples supports along with the markup I used to specify the CSS classes.
YUI Data Table Style GridView with Cell Hover and Click Effects
Features
- Cell Hover Effects
- Cell Select Effects
Sample Usage
<mb:GridViewControlExtender runat="server" TargetControlID="gv" CellHoverCssClass="cell-over" CellSelectCssClass="cell-select" />
Screenshot
YUI Data Table Style GridView with Column Hover and Click Effects
Features
- Column Hover Effects
- Column Select Effects
Sample Usage
<mb:GridViewControlExtender runat="server" TargetControlID="gv" ColumnHoverCssClass="column-over" ColumnSelectCssClass="column-select" />
Screenshot
Tablecloth Style GridView with Row/Column Hover and Click Effects
Features
- Row Hover Effects
- Row Select Effects
- Column Hover Effects
- Column Select Effects
Sample Usage
<mb:GridViewControlExtender runat="server" TargetControlID="gv" CellHoverCssClass="cell-over" CellSelectCssClass="cell-select" RowHoverCssClass="row-over" RowSelectCssClass="row-select" ColumnHoverCssClass="column-over" ColumnSelectCssClass="column-select" />
Screenshot
Sharepoint Style GridView with Row Hover and Header Cell Hover Effects
Features
- Row Hover Effects
- Header Cell Hover Effects
Sample Usage
<mb:GridViewControlExtender runat="server" TargetControlID="gvSharepoint" RowHoverCssClass="row-over" HeaderCellHoverCssClass="header-over" />
Screenshot
ExtJs Style GridView with Row Hover and Header Cell Hover Effects
Features
- Row Hover Effects
- Header Cell Hover Effects
Sample Usage
<mb:GridViewControlExtender runat="server" TargetControlID="gvExtJs" RowHoverCssClass="row-over" HeaderCellHoverCssClass="header-over" />
Screenshot
That's it. Enjoy!
Comments
Thank you very much
I love your GridView posts ... keep'em coming ... thanks
Matt,
You continually amaze me. Good job!
The things you are doing with GridViews are pretty cool. However, I'd really like to know how to plug some server-side callbacks (or javascript) into this.
I mean, the visuality of a row/column being selected is very nice, but how do you process that after the fact?
Say I am using the second example where they hover over a row and click it to select it. I have a button below the grid view that when clicked (or even better, when the row itself was clicked/double-clicked) will grab the selected record from code-behind and do whatever with it. How can this be accomplished?
Or, for another example, in the one where it hovers the entire column. It would be pretty sweet if clicking anywhere on the column would resort the grid view. How could this be done? Could this be done?
I really like the visual effects, but I am struggling to see how to make them useful in any other sense.
Keep up the great work, it is very interesting to see what you will do to a GridView next!
Best regards...
Fantastic post, Matt. You make asp.net pretty on the outside too.
Great post dude.
Hello Matt,
Is it possible to fire an even when a row is clicked and get the ID of that row?
Thanks,
Miguel
It seems that the MattBerseth.WebControls.AJAX.dll is not compatible with the latest AjaxControlToolkit.dll v1.0.10920.0
Error: Could not load file or assembly 'AjaxControlToolkit, Version=1.0.10301.0, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference.
Hey Matt..Thanks for the link to my control pack example page.
I'm having the same problem with the reference and version number
@dave, nicograndelli -
I have a few versions of the toolkit floating around my machine ... Looks like I built this example off of an older version. You should be able to remove the reference to the old toolkit version and redirect it to the latest one.
I am also using the GridViewControlExtender in this post. It was built on the the updated toolkit version.
Thanks for letting me know about this.
Matt
@Miguel, @Josh Stodola -
I like these suggestions. Off of the top of my head I am not sure how to implement either of them, but I will look into this.
Thanks for the feedback.
Matt
Hi Matt!
Thanks for a great post again, your blog is my #1 blog!
I have a problem with implementing the GridViewExtender, when I load the page, I get an javascript error:
Row: 6
Sign: 77054
Error: '_behaviors' is null or not an object
Everything is working correctly, but the "Error on page" in statusbar of IE, is a bit annoying.
As I see it, the only differance I have is that I have another ID on my GridView.
Thanks for a great site!
Ulf
hey great work.
I'm having the same problems as Josh Stodola.
Could it be that when you attach the javascript the callback stops propagating the event... event bubbling in javascript?
In IE6 I get a runtime error.
Error: Sys.WebForms.PageRequestManagerServerErrorException: Value cannot be null. Parameter name: input
when using commandfields in gridview
so it may not be bubbling as i originally thought
I am not using this grid actually, although my search for:
'_behaviors' is null or not an object
led me here. I am having this error same error while using the AjaxControlToolkit. I have tried the AutoCompleteExtender and the DropShadowExtender and both produce this error on loading the page and the intended effect of the extender is not seen. If anyone has seen this or has fixed it. I'd appreciate whatever advice.