Using Pseudo-Classes to set Hover style on the WebDataGrid

Using Pseudo-Classes in CSS you can easily set hover appearance on any html element. Just specify the “<element>:hover” class to any element and you get a nice hover style attached to that element on the page. Since, all of the Infragistics controls use CSS styles for their look & feel; it is very easy to use pseudo-classes to target any of the control elements. CSS standard for “:hover” has improved over time to support all DOM elements, and today it is supported in all the modern browsers. However, it is not fully supported in older browsers, and by that I specifically mean IE6. IE6 supports “:hover” only for anchor tags. So, if you are using IE 6 and want to set hover appearance for element other than "<a>" then you have to use the old-fashion way of handling mouse event, and swaping element styles.

So, if your users have moved away from IE 6 and onto the newer browsers (lucky you!) and you want to use pseudo-class to set a hover style on the WebDataGrid row, you can place the following style in the grid’s style sheet or add it on the page.

tbody.igg_Item>tr:hover>td
{
 background-color:Gray;
 color: White;
}

 Similarly, if you want to set a hover style on a cell you can use the style that will target a TD inside of a grid. Now, when you hover over cells, you get the style applied accordingly.


tbody.igg_Item>tr>td:hover
{
 background-color:Gray;
 color: White;
}
 

 

You can read more on the pseudo classes in CSS and its support for different browsers here. Pseudo classes are really powerful feature and help build stylable application with ease, which was really problematic in the old days of having to use JavaScript to capture mouse over and out events and apply/switch styles accordingly.


Enjoy!


Comments  (4 )

Stumpy74
on Wed, Apr 25 2012 5:43 AM

Hello,

I implemented everything as described here, but it doesn't work. Do I have to set some properties of the webdatagrid to enable Hover-style when user selects a row?

Thanks

Martin

scoobah36
on Mon, Jul 2 2012 9:34 AM

Hi,

So I have implemented this and it works great. I was wondering however if a row could be selected on the mouse hover istead of just the background being changed. what my eventual goal is, to have the user be able to press the 'enter' key and have the page react just like a row had been clicked. i have code to keep the first record selected until the mouseenter event of a containing div. then the first record is re selected when in the mouseleave.

If each row was selected on the hover even i wouldn't have to keep the first record selected as default. here is the code i have so far:

           $(document).ready(function () {

           AddSelection(0);

           $('#grid_container').mouseenter(function () {

               RemoveSelection(0);

           }).mouseleave(function () {

               AddSelection(0);

           });

           function Over(e, a) {

               alert("Over");

           }

           function Out(e, a) {

               alert("Out");

           }

           function AddSelection(row) {

               var grid = $find("ctl00_cphContent_AppGrid");

               try {

                   var selection = grid.get_behaviors().get_selection().get_selectedRows();

                   row = grid.get_rows().get_row(row);

                   selection.add(row);

               } catch (e) {

               }

           }

           function RemoveSelection(row) {

               var grid = $find("ctl00_cphContent_AppGrid");

               try {

                   var selection = grid.get_behaviors().get_selection();

                   var rows = selection.get_selectedRows();

                   rows.remove(rows.getItem(row));

               } catch (e) {

               }

           }

Edson Miranda
on Wed, Mar 6 2013 2:13 PM

Works fine, but how can I change the hover style fo the ActiveRowSelector?

Swetha Koduri
on Thu, Feb 13 2014 1:02 PM

i need to get description of a code when I do mouse hover on that code. How can i be doing that in Asp.net webdata grid? could someone please help?

Add a Comment

Please Login or Register to add a comment.