[Solved] Change background color of row highlighted

[Kevin]

I am trying to change the row color of the radgrid row that they mouse over, is this something that is easily achieved, I foound the setting for a row click event but before they click on it I want to be able to highlight the row they are on so they know whihc one they are clicking.

[Kevin]

Ok, I found the clientEvents for this but they do not seem to work.

<ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true" clientEvents-OnRowMouseOver="RowMouseOver">
                    <Selecting AllowRowSelect="true"  />
                </ClientSettings>
                <SelectedItemStyle BackColor="#0066ff" BorderColor="Black" />

<style type="text/css">
        .RowMouseOver td
         {
           background-color: lightblue !important;
         }

   </style>

when I am mousing over the rows nothing is happening, even when I click a row no color changes that I picked it.

 

[Shinu]

Hi Kevin,

 I have tried hovering style through an example.
Please try this if it helps you.

ASPX:

<telerik:RadGrid AutoGenerateColumns="false" ID="RadGrid1" DataSourceID="SqlDataSource1"
       AllowPaging="True" runat="server">
       <ClientSettings>
           <ClientEvents OnRowMouseOver="RowMouseOver" OnRowMouseOut="OnRowMouseOut" />
       </ClientSettings>
       <MasterTableView>
           <Columns>

               <telerik:GridBoundColumn DataField="OrderID" HeaderText="OrderID" UniqueName="OrderID">
               </telerik:GridBoundColumn>

               <telerik:GridBoundColumn DataField="OrderDate" HeaderText="OrderDate"
                   UniqueName="OrderDate">
               </telerik:GridBoundColumn>

               <telerik:GridBoundColumn DataField="ShipCountry" HeaderText="ShipCountry"
               UniqueName="ShipCountry"></telerik:GridBoundColumn>
           </Columns>
       </MasterTableView>
       <ClientSettings>
           <ClientEvents OnRowMouseOver="RowMouseOver"/>
       </ClientSettings>
   </telerik:RadGrid>

JAVASCRIPT:

<script type="text/javascript">

    function RowMouseOver(sender, eventArgs) {

        $get(eventArgs.get_id()).className = "RowMouseOver";

    }  


</script>

CSS:

<style type="text/css">
  .RowMouseOver td
  {
    background-color: lightblue !important;
  }
  </style>

Please take a look into this help documentation for more help.

Thanks,
Shinu.