How to change row colour on MouseOver

[Stephen]

Hi,

How do you change the row colour on a mouse over - as per the Office2007 skin?

Thanks

Indy

[Konstantin Petkov]

Hello Stephen,

You can control the row hover style through ClientSettings -> EnableRowHoverStyle property. Setting it to true you get the row hover style automatically.

Regards,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Stephen]

Great thanks

[Remi]

Hello,

That works great, but if you have the 

AlternatingItemStyle-BackColor

="#F5F5F5"

Property set on the RadGrid, then the highlight skips over the row. The highlight doesn't function over rows affected by the AlternatingItemStyle-BackColor property.

We're using Q2 2008 Ajax ASP.Net.

Thanks.

[Pavel]

Hello Remi,

You can make it work by adding the following .css class in the Head tag of the page where the Grid is:

<style>
    .GridRowOver_Office2007
    {
        background-color: orange !important;
    }
</style>

I am attaching a sample page for reference.

Kind regards,
Pavel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Remi]

Hello Pavel,

That solution achieves our desired objective.

It highlights both the non-alternating and alternating rows in the grid.

I would suspect that setting the property in the grid should default to highlight all rows as I cannot imagine a case where a developer would only want non alternating rows to be highlighted on a mouseover. The mouseover suggests a user is on a specific row, regardless of whether its an alternating row or not, its abstract any other way.

If there was a concern that this function should be turned on, or toggled have another property on the grid (alternatingitemstyle-mouseover = true / false).

Thanks again for the assistance, just wanted to provide my feedback as a developer.

Cheers! Remi

[Sajida]

Hi,
I have a similar problem but here my skin is Telerik and the alternating style is #FFF2D2..
<telerik:RadGrid runat="server" ID="grdAssignedTkts" AllowPaging="true" AllowSorting="true"AllowCustomPaging="true" AllowFilteringByColumn="false" PageSize="<%$appSettings:ITSMLandingPageGridSize %>"

AutoGenerateColumns="false" OnPageIndexChanged="grdAssignedTkts_OnPageIndexChanged"

 

Skin="Telerik" OnNeedDataSource="grdAssignedTkts_NeedDataSource" OnItemDataBound="grd_ItemDataBound"

 

AlternatingItemStyle-BackColor="#FFF2D2" >

 

<ExportSettings HideStructureColumns="true" IgnorePaging="true" ExportOnlyData="true"

 

Excel-Format="ExcelML" />

 

<ClientSettings EnableRowHoverStyle="true">

 

<ClientEvents OnRowClick="RowClick" />

 

<Resizing AllowRowResize="true" ShowRowIndicatorColumn="false" />

 

</ClientSettings>

I have included the gridhover style too, but the style is not getting appended. Please find below the style code for the above control.

.GridRowOver_Telerik
 {
  background-color: #F2F2F2 !important;
  cursor:pointer;
 }
Please let me know where i am going wrong. Thanks in advance

[Shinu]

Hi,

Please try the following CSS.

CSS:

<style type="text/css">
  .RadGrid_Telerik .rgSelectedRow td, .RadGrid_Telerik .rgSelectedRow td.rgSorted
  {     background:url("WebResource.axd?d=ZwLO4cxF3YBmaUeZH4Re0D2vstkdCxMUTd1I5ZqpjOFEb62qgNE0sIAP8V5Be9tsEgXQ7wueGzIL-Eq7KLo6MlJ8cXjoQOua95OVMCrgojYcCC0fJNwbOZO3iwfC9Luk8RFLAY1dj3tGlu6-FUrckN2mcRgQBfBqlB_S4G05opM1&t=634648121040000000") repeat-x scroll 0  -3900px #63AC38 !important;
  }
</style>

Thanks,
Shinu.

[Sajida]

HI,

This is not working. Telerik team, can you suggest some other working solution. I have bugs logged against this thing.



Thanks in advance

[Sebastian]

Hello Sajida,

Have you tried the approaches suggested by my colleagues Konstantin and Pavel down in this thread? Also specify which version of RadControls for ASP.NET AJAX you are using in your project (as your account does not indicate you downloaded any version of the suite yet).

Regards,
Sebastian
the Telerik team

[Sajida]

Hi Sebastian, 

Thanks for the quick reply. Yes i did try them but it isnt working. Thing is the solution by pavel suits and works well when the skin of the grid is office2007 but its not the same for telerik Skin. And Iam using 2010.1.519.35 version dll. Please ehlp me out. Thanks in advance..