Set style on mouse over | RadGrid for ASP.NET AJAX Documentation
Edit this page

Set style on mouse over

Sometimes, it may be necessary to style a given row/header in Telerik RadGrid, whenever the user hovers with the mouse over it. With RadGrid this functionality is easily achievable. The control provides a CSS class like GridRowOver_. Such style is present under each embedded skin and defines the visual appearance of the hovered grid row. For example:

.GridRowOver_[SkinName]
{
background-color: orange;
cursor:pointer;
}

To enable the hover style for the grid rows, merely set the ClientSettings -> EnableRowHoverStyle property of RadGrid to true.

note

This depends on RadGrid client-side object. For performance reasons, the RadGrid client object is available only when certain client features/events are enabled. If no client features/events are available in the grid but you still need this functionality, you can attach an empty javascript function to a client event (for example OnRowClick).

If you want to attain the same functionality without the built-in feature of RadGrid for ASP.NET AJAX or with disabled skins, the steps below show how to achieve this:

  1. Create the Telerik RadGrid instance and the data source to which it will be bound.

  2. Create a style class, in the head section of the .aspx code, which will be used to style the active row/header. This may look something like this:

    CSS

  3. This particular approach relies on the OnRowMouseOver, OnRowMouseOut, OnColumnMouseOver and OnColumnMouseOut client-side functions, to use the style mentioned above. Declare these functions in the ClientSettings ->ClientEvents section of the grid declaration like this:

    ASP.NET


    OnColumnMouseOut="ColumnMouseOut" />

  4. Before the grid tag on the page or in the head section, include the client-side JavaScript functions mentioned above:

    JavaScript

After these steps have been performed, when the user hovers with the mouse over the control, the styles mentioned above will be applied, as shown in the following screenshot:

Set Row Style On Hover

See Also

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy