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!


TrackBack

TrackBack URL for this entry:
http://mattberseth.com/blog-mt/mt-tb.fcgi/81

Comments


Posted by: Sapacool on October 29, 2007 12:00 AM

Thank you very much

Posted by: Jamal on October 29, 2007 12:00 AM

I love your GridView posts ... keepem coming ... thanks

Posted by: Nebbercracker on October 30, 2007 12:00 AM

Matt,

You continually amaze me. Good job!

The things you are doing with GridViews are pretty cool. However, Id 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...

Posted by: G-moon on October 30, 2007 12:00 AM

Fantastic post, Matt. You make asp.net pretty on the outside too.

Posted by: Gregor Suttie on October 31, 2007 12:00 AM

Great post dude.

Posted by: Miguel on October 31, 2007 12:00 AM

Hello Matt,

Is it possible to fire an even when a row is clicked and get the ID of that row?

Thanks,
Miguel

Posted by: dave on October 31, 2007 12:00 AM

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 assemblys manifest definition does not match the assembly reference.

Hey Matt..Thanks for the link to my control pack example page.

Im 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

Posted by: Ulf Elfving on December 27, 2007 12:00 AM

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.

Im 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. Id appreciate whatever advice.

Open up the solution in VS 2008.
Add the first grid to a UpdatePanel.
Everything works.

Now add a 'Select' CommandField to said grid.
When the row is "Selected", the styling is removed.

Anyway to prevent this from happening? Basically I would like the RowSelectCssClass to stay if a row is selected using the standard ASP.NET CommandField.

Posted by: onur on October 6, 2008 03:34 AM

Hi sir I follow your block in a sort time I have some problem I use their grid but my project have a lot of grid more than 40 so I want to be custom control to use grid but I did't succesed so please take feedback about this thanks you time consuming

Posted by: Mario Jancula on October 9, 2008 01:00 PM

Hi Matt,

I love the look of your grids as well as the mouse over effects. I used your custom control on one of my grids that has quite a few rows and columns.

It works very fast in FireFox 3 but if you have more than 20 rows in IE 7 it just chokes. The script totally slows down IE so it's not really usable. I wonder what can be done to fix that for IE.

Thanks.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • Mario Jancula wrote: Hi Matt, I love the look of your grids as well as the mouse over effects. I used your custom contr...
  • onur wrote: Hi sir I follow your block in a sort time I have some problem I use their grid but my project have ...
  • Travis wrote: Open up the solution in VS 2008. Add the first grid to a UpdatePanel. Everything works. Now add ...
  • Roberto Ortega wrote: I am not using this grid actually, although my search for: _behaviors is null or not an object led ...
  • Leblanc Meneses wrote: hey great work. Im having the same problems as Josh Stodola. Could it be that when you attach the ...
  • Leblanc Meneses wrote: In IE6 I get a runtime error. Error: Sys.WebForms.PageRequestManagerServerErrorException: Value can...
  • Ulf Elfving wrote: Hi Matt! Thanks for a great post again, your blog is my #1 blog! I have a problem with implementin...
  • Matt Berseth wrote: @dave, nicograndelli - I have a few versions of the toolkit floating around my machine ... Looks ...