This is a migrated thread and some comments may be shown as answers.

How to change row colour on MouseOver

10 Answers 507 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Stephen
Top achievements
Rank 1
Stephen asked on 16 Apr 2008, 07:15 PM
Hi,

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

Thanks

Indy

10 Answers, 1 is accepted

Sort by
0
Konstantin Petkov
Telerik team
answered on 17 Apr 2008, 05:41 AM
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
0
Stephen
Top achievements
Rank 1
answered on 17 Apr 2008, 08:29 AM
Great thanks
0
Remi
Top achievements
Rank 2
answered on 27 Aug 2008, 02:54 PM
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.

0
Pavel
Telerik team
answered on 28 Aug 2008, 06:36 AM
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.
0
Remi
Top achievements
Rank 2
answered on 28 Aug 2008, 12:58 PM
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
0
Sajida
Top achievements
Rank 1
answered on 01 Oct 2012, 02:47 PM
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

0
Shinu
Top achievements
Rank 2
answered on 03 Oct 2012, 09:26 AM
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.
0
Sajida
Top achievements
Rank 1
answered on 09 Oct 2012, 01:21 PM
HI,

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



Thanks in advance
0
Sebastian
Telerik team
answered on 10 Oct 2012, 08:49 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Sajida
Top achievements
Rank 1
answered on 10 Oct 2012, 12:54 PM
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..

Tags
Grid
Asked by
Stephen
Top achievements
Rank 1
Answers by
Konstantin Petkov
Telerik team
Stephen
Top achievements
Rank 1
Remi
Top achievements
Rank 2
Pavel
Telerik team
Sajida
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Sebastian
Telerik team
Share this question
or