Highlight Gridview Row on Mouse Hover Using in Asp.Net C#

03:06:00  , , , ,  No comments

Highlight Gridview Row on Mouse Hover 

Display Gridview Row on Mouse Hover Highlight Row  Different  Color Using in Asp.Net  C#

                                  DEMO 

                      Download
                  
                    HTML Coding
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Highlight Gridview Row on Mouse Hover Using in Asp.Net C# </title>
</head>
<body>
    <form id="form1" runat="server">
    <div align="center">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" OnRowCreated="GridView1_RowCreated">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Id"/>
                <asp:BoundField DataField="Course" HeaderText="Course Name"/>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html> 
                             C# Coding
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
     
        SqlConnection con=new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dbcon"].ToString());
        con.Open();
        SqlDataAdapter adp = new SqlDataAdapter("select * from Reg",con);
        DataTable dt = new DataTable();
        adp.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();

    }
    protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
    {       
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            var Mouseover = "this.style.backgroundColor='lightpink'";

            var Mouseout = "this.style.backgroundColor='white'";

            e.Row.Attributes.Add("onmouseover", Mouseover);
            e.Row.Attributes.Add("onmouseout", Mouseout);
        }
    }

}

 First Add New Form - Select Gridview From Toolbox


Next  - Gridview - Edit Column - Add Header Text & Data field






Next - Gridview - Property  Select - RowCreated Event - Double Click






Add - Color For Gridview Row on Mouse Hover

0 comments:

Post a Comment