[Solved] OnRowMouseover and Out events

[Kevin]

I am implimenting the clickability of rows on my radgrid, which I got working, but as soon as I tried to change the color or the highlighted row everything stopped working, so no clue at this point.  What i am trying to do is impliment clicking on a row which will then pull open a panel and hide grid, had this working but I need the row highlighted a brighter color and on mouse out it should go back to my alternating grid colors.

<asp:Panel ID="pnlGrid" runat="server" CssClass="dvGridWrapper">
        <telerik:RadGrid ID="myRadGrid" runat="server" Width="75%" Skin="Web20" CssClass="dvGridWrapper">
               <ClientSettings EnablePostBackOnRowClick="true" Selecting-AllowRowSelect="true" EnableRowHoverStyle="true" >
                   <ClientEvents OnRowMouseOver="GridRowOver_Web20" />
               </ClientSettings>
               <MasterTableView AutoGenerateColumns="false" Font-Size="10" DataKeyNames="RecId">
                   <HeaderStyle ForeColor="White" Font-Bold="true" HorizontalAlign="Center" />
                   <ItemStyle HorizontalAlign="Center"/>
                   <AlternatingItemStyle BackColor="#B0C4DE"  HorizontalAlign="Center" />
                       <Columns>
                           <telerik:GridBoundColumn DataField="LName" HeaderText="LAST NAME" />
                           <telerik:GridBoundColumn DataField="FName" HeaderText="FIRST NAME" />
                           <telerik:GridBoundColumn DataField="Mname" HeaderText="MIDDLE NAME" />
                           <telerik:GridBoundColumn DataField="Recruiter" HeaderText="RECRUITER" />
                           <telerik:GridBoundColumn DataField="dtProcessing" HeaderText="DT PROCESSING" />
                           <telerik:GridBoundColumn DataField="status" HeaderText="ENLISTMENT STATUS" />
                       </Columns>
               </MasterTableView>
           </telerik:RadGrid>
   </asp:Panel>

<style type="text/css">

    .GridRowOver_Web20
    {
        background-color: orange !important;
        cursor:pointer;
    }

   </style>

Protected Sub myRadGrid_SelectedIndexChanged(sender As Object, e As EventArgs) Handles myRadGrid.SelectedIndexChanged
       pnlGrid.Visible = False
   End Sub

[Princy]

Hi Kevin,

I guess you want to change the row hover background color.
Please try the following code snippet.

1-Just apply the CSS property and set EnableRowHoverStyle="true".
CSS:

div.RadGrid .rgHoveredRow
{ 

    background: Red;

}

OR
2-you can set the Client events as follows:

ASPX:

<ClientSettings EnableRowHoverStyle="true">
  <ClientEvents OnRowMouseOver="RowMouseOver" OnRowMouseOut="RowMouseOut" />
</ClientSettings>

JS:

<script type="text/javascript">
function RowMouseOver(sender, eventArgs) {
    $get(eventArgs.get_id()).className += " RowMouseOver";
}

function RowMouseOut(sender, eventArgs) {
    var row = $get(eventArgs.get_id());
    row.className = row.className.replace("RowMouseOver", "RowMouseOut");
}
</script>

CSS:

.RowMouseOver td
{
    background-color: Red !important;
}
.RowMouseOut
{
    background: #f7f7f7;
}

Hope this helps.

Thanks,
Princy

[Kevin]

thanks princy works.