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

Radgrid EnableRowHoverStyle Looks funny

1 Answer 41 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Jason
Top achievements
Rank 1
Jason asked on 05 Sep 2013, 08:19 PM
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

1 Answer, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 06 Sep 2013, 10:21 AM
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
Tags
General Discussions
Asked by
Jason
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Share this question
or