Code-behind change Gridview row color: This article explains how to change Gridview row color based on data in Asp.net C#. For example in our Gridview we are displaying student report card information, .i.e `student name` and their `academic percentage`, now we want to highlight those records who got less than 35 % or greater than 75.
So based on data (condition) we change the background color of the Gridview row in c# respectively. Here for merit, we set green color, and for failed we set the red color.You can also check Gridview related posts .i.e. Drag Drop to reorder GridView Rows, Bind drop-down list inside Gridview edit template, and Sorting Gridview control on header click with pagination.
# Html Markup:
First, we are going to add asp.net Gridview control to our web page. So our HTML markup looks like as below.
//*
<asp:GridView ID="gvStudentGrade" runat="server" AutoGenerateColumns="False" OnRowDataBound="gvStudentGrade_RowDataBound">
<Columns>
<asp:BoundField HeaderText="Sr no" DataField="srno" />
<asp:BoundField HeaderText="Student Name" DataField="student_name" />
<asp:BoundField HeaderText="Percentage" DataField="percentage" />
</Columns>
</asp:GridView>
//*# Code behind:
Here we bind data to our Gridview control. I have added a datatable with some values ( data ) as Student Name, Percentage.
Now set this datatable as our Gridview control datasource.
//*
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack) {
bindGv_StudentGrade();
}
}
public void bindGv_StudentGrade() {
DataTable dtStudents = new DataTable();
dtStudents.Columns.Add("srno", typeof(string));
dtStudents.Columns.Add("student_name", typeof(string));
dtStudents.Columns.Add("percentage", typeof(string));
dtStudents.Rows.Add("1", "John Miller", "35");
dtStudents.Rows.Add("2", "Amit Sarna", "85");
dtStudents.Rows.Add("3", "David Macule", "75");
dtStudents.Rows.Add("4", "Andrea ely", "60");
dtStudents.Rows.Add("5", "Rohit Sharma", "20");
dtStudents.Rows.Add("6", "Pamela Franz", "55");
dtStudents.Rows.Add("7", "Leslie Mac", "92");
gvStudentGrade.DataSource = dtStudents;
gvStudentGrade.DataBind();
}
//*Now we are at the main part of this post:
Code how to set the different background colors of the Gridview row, based on data in Asp.net C#. For this, we use GridView.RowDataBound Event this event Occurs when a data row is bound to data in a GridView control.
The RowDataBound event is raised when a data row (represented by a GridViewRow object) is bound to data in the GridView control.
This enables you to provide an event-handling method that performs a custom routine, such as modifying the values of the data bound to the row, whenever this event occurs.
Gridview Row color change using GridView.RowDataBound Event
//*
protected void gvStudentGrade_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int getValue = Convert.ToInt32(e.Row.Cells[2].Text);
string setColorClass=string.Empty;
if (getValue >= 75) {
setColorClass = "successMerit"; // setting green color class
}
else if (getValue <= 35) {
setColorClass = "dangerFailed"; // setting red color class
}
else {
setColorClass = "defaultColor";
}
e.Row.CssClass = setColorClass;
}
}
//*In the above code first, we fetch the value from the third column and convert it into an integer datatype, later we apply our condition.
Here is our case, we are checking it if it's greater than 75, then set Gridview row background color like green, and if it's less than 35, then set row background color as red.
We have added a class to the respected Gridview row, to make the above code actually working we need to add those CSS classes in our Asp.net Webpage (.aspx ) design page as shown below.
//*
<style type="text/css">
.successMerit {
background-color: #1fa756;
border: medium none;
color: White;
}
.defaultColor
{
background-color: white;
color: black;
}
.dangerFailed {
background-color: #f2283a;
color: White;
}
</style>
//*Finally here's our output: Change Gridview control row background color based on data.
[caption id="attachment_2656" align="aligncenter" width="300"]
Gridview row color change based on data asp.net c#[/caption]
You must check these articles:
- Drag Drop to reorder GridView Rows in Asp.net C#.
- Bind drop-down list inside Gridview edit template.
- Sorting Gridview control on header click with pagination
- Easy way to upload Bulk Image in Asp.net C# using Dropzone JS.
Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.
PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee
Post Comment
Your email address will not be published. Required fields are marked *