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

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

In this tutorial we know How to Change Selected Row Color in Gridview in Asp.Net .there are many events in Gridview for different Operation here we want to change the 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.

Create a table in the 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]

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=PUSHPAM-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 the Gridview_RowDataBound () event of Gridview so we can read each row and change the 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';";
   }
}

AdBlock Detected

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