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

OnRowMouseover and Out events

2 Answers 149 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 25 Jun 2013, 06:29 PM
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

























2 Answers, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 2
answered on 26 Jun 2013, 04:55 AM
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


0
Kevin
Top achievements
Rank 1
answered on 27 Jun 2013, 01:18 PM
thanks princy works.
Tags
Grid
Asked by
Kevin
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Kevin
Top achievements
Rank 1
Share this question
or