Radgrid EnableRowHoverStyle Looks funny

2 posts, 0 answers
  1. Jason
    Jason avatar
    1 posts
    Member since:
    May 2013

    Posted 05 Sep 2013 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Sep 2013 Link to this post

    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
Back to Top