Grid row hover effect?

[T]

How can I turn on (or create) a subtle hover highlight for rows when my grid is row-selectable?  

This should be a built-in feature since such an effect should look good within the chosen theme.  

If it's not, can you suggest some CSS and what class to apply it to that would use theme-friendly hover highlighting?

[Dimo]

Hi,

You can use:

.k-grid > table > tbody > tr:hover,
.k-grid-content > table > tbody > tr:hover
{
        background: ........ ;
}

The two selectors are for Grids without scrolling and with scrolling, respectively.

For a theme-friendly look, you can use Javascript and apply the k-state-hover CSS class to the currently hovered row.

Kind regards,
Dimo
the Telerik team

[Vince]

It's more complicated then this.  It needs to be able to update/render each cell, since the hover style could conflict with the font, etc.
What is needed is to have another row.state for "hover", along with css etc to go with it.
Thanks

[T]

I implemented this with javascript but it fails after the grid is sorted.  What's the best way to handle that?

    addExtraStylingToGrid = function() {
        // add row hilighting on hover and make sure to remove it on click
        $(rowQueryString).hover(
            function () {
                $(this).addClass('k-state-hover');
            },
            function () {
                $(this).removeClass('k-state-hover');
            }
        );
        $(rowQueryString).click(
            function () {
                $(this).removeClass('k-state-hover');
            }
        );
    }

[Dimo]

Hello,

You need to execute the script in the dataBound event handler, i.e. after sorting, paging, etc. This is because the row DOM elements are replaced in these cases.

Kind regards,
Dimo
the Telerik team

[T]

So far dataBound works great, thanks!

[Vince]

Can you post your code.  Thanks

[T]

It's the "addExtraStylingToGrid()" code I posted above.  The missing element is to add

   dataBound:addExtraStylingToGrid

in the grid configuration options.

[whibs]

Here's a working demo if you'd like to check it out:
http://jsbin.com/ezovaw/2/edit 

[Lee]

In this referenced JSBin example the row selection style and the row hover style are both showing up as gradients....I am only able to get the solid color to appear.....What am I missing?

[Lee]

It is the public, static style sheets that are different than the ones I have from my purchase....

[Andrew]

I think the problem here is the version of KendoUI
I tried the code with the latest kendoui release and jquery 1.9.1 and it does not work at all.

http://fiddle.jshell.net/zawisza/47J8M/

[Dimo]

Hi Andrew,

The following expression

$("table.k-focusable tbody tr")

does not return anything, because the Grid table does not have a k-focusable class.

Regards,
Dimo
Telerik

[Andrew]

Dimo,
Is there a replacement?
How would one do this with the current version?

[Dimo]

Hello Andrew,


Inspecting the Grid HTML reveals that the widget wrapper (the table's parent <div>) always has a k-grid class applied, so you can use that element in the selector.

$(".k-grid > table > tbody > tr")

Note that <div class="k-widget k-grid"> is a direct parent of the Grid table only when scrolling is disabled. If scrolling is enabled, the table's parent is different.
 

$(".k-grid-content > table > tbody > tr")

 
Regards,
Dimo
Telerik

[Andrew]

Thanks. That works perfectly.