Misalignment of rows

2 posts, 0 answers
  1. Ryann
    Ryann avatar
    38 posts
    Member since:
    Sep 2013

    Posted 09 Oct 2013 Link to this post


    Hi,

    I am using row hover for my grid.But its causing the rows to misalign. please help me with a solution.

    Thanks,
    Ryann.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 09 Oct 2013 Link to this post

    Hi Ryann,

    It's hard to identify the issue,can you try the following code snippet.If this doesn't help,please provide your full code snippet.

    ASPX:
    <telerik:RadGrid ID="myRadGrid" runat="server" >
      <ClientSettings EnableRowHoverStyle="true">
       <ClientEvents OnRowMouseOver="RowMouseOver" OnRowMouseOut="RowMouseOut" />
      </ClientSettings>
      <MasterTableView>
         <Columns>
          . . . . . .
         </Columns>
      </MasterTableView>
    </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">
        div.RadGrid .rgHoveredRow
        {
            /* change the background colour for hovered rows */
            background: Red;
        }
             
        .RowMouseOver td
        {
            background-color: Red !important;
        }
        .RowMouseOut
        {
            background: inherit;
        }
    </style>

    Thanks,
    Shinu
Back to Top