Radgrid EnableRowHoverStyle Looks funny

[Jason]

I've got a radgrid that highlights a row on hover and allows me to postback when I click on a row. However, the highlighting is really weird in the case where one of the rows has enough content in a cell to require it to wrap two two or more lines. The top line is tinted and the remaining lines in the row have a bright red background color.

I have tried EnableAlternatingItems="false"  with no difference.

Thanks,

Jason Halstead

[Princy]

Hi Jason,

Please try the below sample code snippet,to have the hovering effect on your grid.If this doesn't help,please give your full code snippet.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"    AllowPaging="true" OnSelectedIndexChanged="RadGrid1_SelectedIndexChanged">
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn DataField="OrderID" UniqueName="OrderID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCity" UniqueName="ShipCity">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings Selecting-AllowRowSelect="true" EnablePostBackOnRowClick="true">
        <ClientEvents OnRowMouseOver="RowMouseOver" OnRowMouseOut="RowMouseOut" />
    </ClientSettings>
</telerik:RadGrid>

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:

<style type="text/css">
       .RowMouseOver td
       {
           background-color: lightblue !important;
       }
       .RowMouseOut
       {
           /*this style is taken from the corresponding skin's GridRow_[SkinName] class - GridRow_Default in our case*/
           background: #f7f7f7;
       }
   </style>

Thanks,
Princy