[Solved] Mouseover Row Highlighting - 2013 Q1 "Light" Theme

[Randy]

Hi,

I know you have an option for "row select" and that grid row will be highlighted in a certain color.

I'm wondering if your grid has CSS classes for mouseover on a given row.
My company isn't interested in the row select, but they would be interested in the same effect when the customer has the mouse over the row (or I guess when touching the row, if they have a touch device.)

If you do, can you tell me the class names you're using for the "light" theme?
Or is there some way for us to simulate this ourselves with some row events & CSS?

Thanks,

Randy

[Adrian]

Hello Randy,

The easiest way to change the style of a Grid row when mouse is over it is to use the CSS :hover pseudo-class.
You can highlight the hovered row and apply any style you want, however the only limitation of this approach is that you could not change border colors of the hovered row.

.k-grid-content tr:not(.k-grouping-row):hover > td,
.k-grid > table > tbody > tr:not(.k-grouping-row):hover > td {
    background-color: #ebebeb;
}

If you want to use exactly the same style which we use in the selection,  there is another approach that you could use, but it may be slower on not so powerful devices. Performance will mostly depend on the size of your grid.
To try this, copy the following code to a place in your javascript, where the grid is already available:

$(".k-grid-content tr:not(.k-grouping-row), .k-grid > table > tbody > tr:not(.k-grouping-row)").on("mouseover", function (e) {
                e.preventDefault();
                this.classList.add("k-state-selected");
            });

            $(".k-grid-content tr:not(.k-grouping-row), .k-grid > table > tbody > tr:not(.k-grouping-row)").on("mouseleave", function (e) {
                e.preventDefault();
                this.classList.remove("k-state-selected");
            });

Hope this helps.

Greetings,
Adrian
the Telerik team

[Randy]

Thank you Adrian!