Introduction
In this post I am explain explain how to apply formatting (back color) on Gridview based on condition Like Excel conditional formatting options.Here in this example I have created a gridview where apply formatting (back color) based on condition Like Excel conditional formatting options allow us to apply different formatting options, such as background color, borders, or font formatting to data that meets certain conditions.
Steps :
Step - 1 : Create New Project.
Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.Step-2: Add a Database.
Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.Step-3: Create table for store/fetch data.
Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.
In this example, I have used one tables as below
Step-4: Add Entity Data Model.
Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.
Step-5: Add a Webpage and Design for show data with conditional formatting.
Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.HTML Code
<h3>Sales Report Month Wise</h3>
<p> </p>
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CellPadding="4" GridLines="Both" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField HeaderText="Month" DataField="MonthName" />
<asp:BoundField HeaderText="Sales Total Amount" DataField="SalesAmount" />
</Columns>
</asp:GridView>
</div>
Step-6: Write code into page load event for show data.
Write below code into Page_Load event for show data from database. protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
PopulateSalesData();
}
}
And here is the functioin PopulateSalesData
private void PopulateSalesData()
{
using (MyDatabaseEntities dc = new MyDatabaseEntities())
{
GridView1.DataSource = dc.SalesReports.ToList();
GridView1.DataBind();
}
}
Step-7: Write code for apply conditional formatting on Gridview
Write below code into event for import Data from csv to database. protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
// Write Code here for apply Formatting conditionally
if (e.Row.RowType == DataControlRowType.DataRow)
{
decimal value = (decimal)DataBinder.Eval(e.Row.DataItem, "SalesAmount");
if (value < 60000)
{
// for apply to entire row
foreach (TableCell cell in e.Row.Cells)
{
cell.BackColor = Color.FromName("#f480a1");
}
// for only one cell
//e.Row.Cells[1].BackColor = Color.FromName("#f480a1");
}
else if ((value >= 60000) && (value < 90000))
{
// for apply to entire row
foreach (TableCell cell in e.Row.Cells)
{
cell.BackColor = Color.FromName("#ffe89f");
}
// for only one cell
//e.Row.Cells[1].BackColor = Color.FromName("#ffe89f");
}
else if(value >=90000)
{
// for apply to entire row
foreach (TableCell cell in e.Row.Cells)
{
cell.BackColor = Color.FromName("#00b050");
}
// for only one cell
//e.Row.Cells[1].BackColor = Color.FromName("#00b050");
}
}
}
Step-8: Run Application.
Related Post
