CODEWITHSUNDEEP
c#asp.netgridviewhovermouseover
Kevin
Kevin

Reputation: 3379

mouseover hover in Gridview ASP.net using CSS

This is probably a really simple thing but I am completely new to CSS. I just want to be able to have mouseover hover effect on my rows in gridview, changing the color of the row if it is being hovered over. I'm curious as to whether or not my CSS file is in the right place? Should my Gridview.CSS be in the same folder as my gridview.aspx (I assume so?).

Here is my CSS file: 

.Gridview tr.normal
 {
   background-color:white;
 }

 .Gridview tr.highlight
  {
     background-color:yellow;
  }

And here is how I am trying to implement it: In the .aspx file:

 <asp:GridView ID="MsgInbox" runat="server" ....OnRowCreated="Gridview_RowCreated" CssClass = "Gridview">

And in the C# code behind: 

    protected void Gridview_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.CssClass = "highlight";
        }
    }

I know I must be missing something really simple in my C#. Any help would be appreciated! Thanks!

Upvotes: 6

Views: 31300

Answers (10)

Dilip Kumar Choudhary
Dilip Kumar Choudhary

Reputation: 469

This is for column cell hover color in the Gridview with ToolTip and ForeColor

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Cells[2].Attributes["onmouseover"] = "this.style.cursor='pointer';this.style.textDecoration='underline';this.style.backgroundColor='aqua'";
        e.Row.Cells[2].Attributes["onmouseout"] = "this.style.textDecoration='none';this.style.backgroundColor='white'";
        e.Row.Cells[2].ToolTip = "You can click this cell";
        e.Row.Cells[2].ForeColor = System.Drawing.Color.Blue;
    }
}

Thank you

Upvotes: 0

Code
Code

Reputation: 749

 protected void grdDis_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {


            #region to highlight the grid view row 
            e.Row.Attributes.Add("onmouseover", "this.originalcolor=this.style.backgroundColor;" + " this.style.backgroundColor='#FDCB0A';");
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalcolor;");
            #endregion
}
}

Upvotes: 0

ErTR
ErTR

Reputation: 905

I think I have the shortest and easiest solution to implement so far. There is no need to edit code behind or id/class names. The only edit you need to make is adding this CSS:

tr[class^='dxgvDataRow']:hover td{ 
    background-color: #272727 !important;
}

Upvotes: 0

Vasanthakumar Ayyanar
Vasanthakumar Ayyanar

Reputation: 1

Better way yo can handle this mouseover using OnRowCreated

protected void RowCreated_report(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add("onmouseover", "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='yellow'");
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalstyle;");
                e.Row.Attributes.Add("style", "cursor:pointer;");
            }
}

Upvotes: 0

Malcont3nt
Malcont3nt

Reputation: 430

I stole part of my solution to this from another answer so my styling affects ALL gridviews in one shot.

Add this CssClass="GridView" to your asp:GridView tag.

<asp:GridView ID="grdLongID" runat="server" CssClass="GridView" CellPadding="4" ForeColor="#333333" GridLines="None" AllowSorting="true" OnSorting="grdLongID_Sorting" RowStyle-HorizontalAlign="center" AutoGenerateColumns="False" Width="100%">

Then in your style.css you can do things like the following:

table.GridView th {
  border-bottom: 1px solid #ED7A0A;
  text-decoration: none;
}

table.GridView tr:hover {
  background-color: #fabf85;
}

The key is the :hover pseudo-class.

Upvotes: 4

Ankit
Ankit

Reputation: 790

This is so simple thing.

add the CSS in head part 

#MainContent_gvDevice tr:Hover
{  
    background-color:#F6F6F6;
}

here instead of gvDevice put your gridview id.

Upvotes: 0

Brian
Brian

Reputation: 558

Here is how I accomplished this:

Follow this tutorial to change the highlighted row on mouseover:

http://msmvps.com/blogs/deborahk/archive/2010/01/25/asp-net-selecting-a-row-in-a-gridview.aspx

This also explains the code to process a row selection. My gridview has alternating row colors. In order to restore the original color of the row you just hovered, create a custom attribute in mouseover for the original backgroundColor and restore it on mouseOut like so:

row.Attributes["onmouseover"] = "this.originalstyle=this.style.backgroundColor;this.style.cursor='hand';this.style.backgroundColor='#ffccff';";

row.Attributes["onmouseout"] = "this.style.textDecoration='none';this.style.backgroundColor=this.originalstyle;";

Upvotes: 1

Satinder singh
Satinder singh

Reputation: 10218

This is how i done in my project

CSS:

.tdonhover { background-color:#d9d9d9 !important; }

<script type="text/javascript">
        $(document).ready(function () {
         $('td').hover(function () {
                $('tr').each(function () {
                    $(this).removeClass('tdonhover');
                });
                $(this).parent().addClass('tdonhover');
            });
          });

    </script>

Default.aspx page : This page contains gridview control.

               ` <asp:GridView ID="GridView1" runat="server" CellPadding="4" Width="940px" CssClass="gvClass gvalign" BorderColor="#E0DCD0" BorderStyle="Solid" BorderWidth="1px"
                       ForeColor="#333333" GridLines="None" >
                        <Columns>
                        <asp:TemplateField HeaderText="Srno" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="40">
                            <ItemTemplate>
                                <%# Container.DataItemIndex+1 %>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <FooterStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" />
                    <RowStyle ForeColor="#603813" BackColor="#F7F6F3" />
                    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                    <HeaderStyle BackColor="#A86E07" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
                    <EditRowStyle BackColor="#999999" />
                    <AlternatingRowStyle BackColor="White" ForeColor="#A86E07" />
                </asp:GridView>`

Using 

<RowStyle ForeColor="#603813" BackColor="#F7F6F3" />
<AlternatingRowStyle BackColor="White" ForeColor="#A86E07" />

you can set Alternate row Background color and fontcolor

Upvotes: 0

vadim
vadim

Reputation: 1726

You can create hover effect using RowCreated because this will need postback for this. You should use hover pseudo-class within you css. Something like this

.Gridview tr:hover
{
  background-color:blue;
  color:white;
}

where Gridview css class applied to your Gridview

Upvotes: 0

Aristos
Aristos

Reputation: 66649

First you set the Row style using this code, inside the GridView, I call it .row

<RowStyle CssClass="row"  />

then you use this css to make it change the background color, or what ever you like when the mouse is move over. 

tr.row
{
    background-color:#fff;
}


tr.row td
{ 
}

tr.row:hover td, 
tr.row.over td
{ 
    background-color: #eee;
}

The trick here is that because GridView is rendered as table, I add the td and the tr in the style to access the mouse over the table lines.

Because there is also the alternative row style AlternatingRowStyle if you like to use it, you can simple make one more style the same way.

Upvotes: 3

Related Questions