How to Change Selected Row Color in Gridview in Asp.Net

Description:-

As we know there are many events in Gridview for different Operation here we want to change row color when we mouse over on row for that we will user RowDatabound event of Gridview. RowDatabound event read each row of Gridview and bind in Gridview Control. So ser can see dynamically when he/she over mouse control in Gridview row. So let’s start to achieve this functionality.

Create table in Database and Fill Some Data.

CREATE TABLE [dbo].[Employeee](

                [Number] [int] IDENTITY(1,1) NOT NULL,

                [Name] [varchar](50) NOT NULL,

                [Gender] [varchar](50) NOT NULL,

                [Email] [varchar](50) NOT NULL,

                [MobileNumber] [bigint] NOT NULL,

                [Bdate] [date] NULL,

 CONSTRAINT [PK_Employeee] PRIMARY KEY CLUSTERED

(

                [Number] ASC

)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]

) ON [PRIMARY]

GO

Design your Webpage like below.

<div>

<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound"

            BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px"

            CellPadding="4" ForeColor="Black" GridLines="Horizontal"     OnSelectedIndexChanged="OnSelectedIndexChanged" Height="153px" Width="681px">

            <FooterStyle BackColor="#CCCC99" ForeColor="Black" />

            <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />

            <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />

            <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />

            <SortedAscendingCellStyle BackColor="#F7F7F7" />

            <SortedAscendingHeaderStyle BackColor="#4B4B4B" />

            <SortedDescendingCellStyle BackColor="#E5E5E5" />

            <SortedDescendingHeaderStyle BackColor="#242121" />

</asp:GridView>

<br />

<asp:Label ID="msg" runat="server" Text=""></asp:Label>

</div>

Now Go to Code behind and Bind Data in Gridview so we can see data in Gridview Control. Bind data in Page_load () event.

protected void Page_Load(object sender, EventArgs e)

        {

            SqlDataAdapter da = new SqlDataAdapter();

            DataSet ds = new DataSet();

            string sql = null;

            string connetionString = "Data Source=UMESH-PC\\SQLEXPRESS;Initial Catalog=UH;Integrated Security=True";

            sql = "select * from Employeee";

            SqlConnection connection = new SqlConnection(connetionString);

            connection.Open();

            SqlCommand command = new SqlCommand(sql, connection);

            da.SelectCommand = command;

            da.Fill(ds);

            da.Dispose();

            command.Dispose();

            connection.Close();

            GridView1.DataSource = ds.Tables[0];

            GridView1.DataBind();

        }

Now generate Gridview_RowDataBound () event of Gridview so we can read each row and change color or particular row from Gridview.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

   if (e.Row.RowType == DataControlRowType.DataRow)

   {

     e.Row.Attributes["onmouseover"] = "this.style.backgroundColor='aquamarine';";

     e.Row.Attributes["onmouseout"] = "this.style.backgroundColor='white';";

   }

}

Now check in your browser and over mouse control in each row to change color of Gridview row.

Author : Umesh Patel

Related Posts