|
In this article we will explore how to do conditional formatting of gridview row based on the underlying data.
Let's see how we can do this.
Step 1: Add below namespace in the page.
using System.Drawing;
Step 2: Add scriptmanager in the form tag in the tag if you are using AjaxControlToolkit otherwise you can ignore this step.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
Step 3: Place a gridview inside the updatepanel. If you are not using AjaxControlToolk and updatepanel, place only GridView which is marked in bold.
<asp:UpdatePanel runat="server" ID="updGrdView">
<ContentTemplate>
<table>
<tr>
<td valign="top">
<asp:GridView ID="gvParent" runat="server" AutoGenerateColumns="False" ShowHeader="True" DataKeyNames="RecipieId" AllowPaging="true" PageSize="6" OnPageIndexChanging="gvParent_PageIndexChanging" GridLines="None" CssClass="myGrid" PagerStyle-CssClass="pager" AlternatingRowStyle-CssClass="alt" OnRowDataBound="gvParent_RowDataBound">
<Columns>
<asp:BoundField HeaderText="By" DataField="By" SortExpression="EmployeeId">
<ItemStyle HorizontalAlign="Center" Width="140px" />
</asp:BoundField>
<asp:BoundField HeaderText="Recipie Name" DataField="RecipieName" SortExpression="EmployeeName">
<ItemStyle HorizontalAlign="Center" Width="180px" />
</asp:BoundField>
<asp:BoundField HeaderText="Preparation Time" DataField="PreparationTime" SortExpression="Designation">
<ItemStyle HorizontalAlign="Center" Width="140px" />
</asp:BoundField>
<asp:BoundField HeaderText="Cooking Time" DataField="CookingTime" SortExpression="Location">
<ItemStyle HorizontalAlign="Center" Width="120px" />
</asp:BoundField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
Step 4: In RowDataBound event of gridview we need to specify the condition on which color needs to be changed.
I have changed the ForeColor, if you need to change the background color only comment the ForeColor code and uncomment the BackColor code.
protected void gvParent_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
switch (e.Row.Cells[2].Text)
{
case "30 Mins":
e.Row.ForeColor = Color.Green;
//e.Row.BackColor = Color.Green;
break;
case "35 Mins":
e.Row.ForeColor = Color.Blue;
//e.Row.BackColor = Color.Blue;
break;
case "40 Mins":
e.Row.ForeColor = Color.Black;
//e.Row.BackColor = Color.Black;
break;
case "45 Mins":
e.Row.ForeColor = Color.Red;
//e.Row.BackColor = Color.Red;
break;
}
}
}
Step 5: In page load method we will bind the data to grid.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string strQuery = "SELECT * FROM Recipie";
gvParent.DataSource = GetData(strQuery);
gvParent.DataBind();
}
}
private SqlConnection GetConnection(string m_conString)
{
SqlConnection con = new SqlConnection(m_conString);
return con;
}
private DataTable GetData(string strQuery)
{
DataTable dtDept = null;
SqlConnection con = GetConnection("Data Source=(local);Initial Catalog=XYZ;Integrated Security=SSPI");
using (con)
{
con.Open();
using (SqlDataAdapter sqlAdapter = new SqlDataAdapter(strQuery, con))
{
dtDept = new DataTable();
sqlAdapter.Fill(dtDept);
}
}
return dtDept;
}
Step 6: In pageindexchanging method we will put the paging logic.
protected void gvParent_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
gvParent.PageIndex = e.NewPageIndex;
string strQuery = "SELECT * FROM Recipie";
gvParent.DataSource = GetData(strQuery);
gvParent.DataBind();
}
Step 7: Add below style sheet in head section of the page. LinkPaging and LinkPagingFPNL will be used to apply style on paging, rest of the styles will be used to apply style on alternate rows, header and pager of the gridview.
<style type="text/css">
.myGrid
{
width: 100%;
margin: 0px 0 0px 0px;
border: solid 1px #525252;
border-collapse: collapse;
}
.myGrid td
{
padding: 2px;
border: solid 1px #c1c1c1;
color: Black;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.9em;
}
.myGrid th
{
color: #fff;
background: url(images/grid_header.png) repeat-x top;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.9em;
}
.myGrid .pager
{
background: url(images/grid_pager.png) repeat-x top;
}
.myGrid .pager table
{
margin: 5px 0;
}
.myGrid .pager td
{
border-width: 0;
padding: 0 6px;
font-weight: bold;
line-height: 12px;
}
.myGrid .pager a
{
color: #fff;
text-decoration: none;
}
.myGrid .pager a:hover
{
color: #424242;
text-decoration: none;
}
</style>
Live Demo
This ends the article of conditional row color in gridview.
|