Description:-
In
this example we explain that how to change the color of the GridView cell based
on some condition. Or dynamically change Gridview cell color based on cell
value condition in asp.net. Or how to dynamically change the Background color
of ASP.Net GridView Row based on some conditions
Sometime we have requirement like display data
in grid in different color so end user can easily understand. Suppose we have
one table student with column name age. If age <= 15 then we have to cell
color="yellow". If age>=15 then we have to set GridView cell color
="Red”. To achieve this type of functionality we have to use RowDatabound
event of the Gridview.
So to change the GridView row background dynamically based on some condition you have to write the below code.
Create Table:-
CREATE TABLE [dbo].[orders]( [orderno] [int] NOTNULL, [OrderDate] [datetime] NULL, [ShipCountry] [varchar](10)NULL, [CustomerID] [int] NULL, [RequiredDate] [datetime] NULL, [ShipName] [varchar](10)NULL, [ShipCity] [varchar](10)NULL, PRIMARY KEY CLUSTERED ( [orderno] 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
Default.aspx:-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1"runat="server"> <div> <asp:GridView ID="grd_student" runat="server"Width="100%"AutoGenerateColumns="False" OnRowDataBound="grd_student_RowDataBound" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2"> <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510"/> <HeaderStyle BackColor="#A55129" Font-Bold="True" Font-Names="cambria" ForeColor="White"Height="25px"/> <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center"/> <RowStyleFont-Names="Calibri"Height="25px"BackColor="#FFF7E7"ForeColor="#8C4510"/> <Columns> <asp:BoundField DataField="orderno" HeaderText="Order No" ItemStyle-Width="100px"/> <asp:BoundField DataField="OrderDate" HeaderText="Order Date" ItemStyle-Width="280px" ItemStyle-HorizontalAlign="Center"/> <asp:BoundField DataField="ShipCountry" HeaderText="Country" ItemStyle-Width="100px" ItemStyle-HorizontalAlign="Center"/> <asp:BoundField DataField="CustomerID" HeaderText="Customer Id" ItemStyle-Width="100px" ItemStyle-HorizontalAlign="Center"/> <asp:BoundField DataField="RequiredDate" HeaderText="Required Date" ItemStyle-Width="280px" ItemStyle-HorizontalAlign="Center"/> <asp:BoundField DataField="ShipName" HeaderText="Ship Name" ItemStyle-Width="100px" ItemStyle-HorizontalAlign="Center"/> <asp:BoundField DataField="ShipCity" HeaderText="City" ItemStyle-Width="100px" ItemStyle-HorizontalAlign="Center"/> </Columns> <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White"/> <SortedAscendingCellStyle BackColor="#FFF1D4"/> <SortedAscendingHeaderStyle BackColor="#B95C30"/> <SortedDescendingCellStyle BackColor="#F1E5CE"/> <SortedDescendingHeaderStyle BackColor="#93451F"/> </asp:GridView> </div> </form> </body> </html>
Default.aspx.cs:-
SqlConnection conn = new SqlConnection("your connection string"); protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { Populate_studGrid(); } } protected void Populate_studGrid() { DataSet ds = new DataSet(); string cmdstr = "select * from orders"; SqlCommand cmd = new SqlCommand(cmdstr, conn); SqlDataAdapter adp = new SqlDataAdapter(cmd); adp.Fill(ds); grd_student.DataSource = ds; grd_student.DataBind(); } protected void grd_student_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { string CountryName = e.Row.Cells[2].Text; //it cell represent a student age if (CountryName == "USA") e.Row.Cells[2].BackColor = System.Drawing.Color.AliceBlue; else if (CountryName == "India") e.Row.Cells[2].BackColor = System.Drawing.Color.Yellow; else e.Row.Cells[2].BackColor = System.Drawing.Color.Pink; } }
Thanks for comments.....