How to Change the Background Color or the Text Color of a GridView Cell Based on Condition in Asp.Net – C# and Vb.Net

Asp.Net GridView controls provides many useful functions and properties that can help you present your data in a dynamic way. One of its features is highlighting text in a cell based on certain conditions. Here in this post I’ll show few examples on how to change the background color, or the text color and even the border color of a cell, dynamically or programmatically, based on some condition.

Text highlighting becomes necessary in a GridView control when you have lots of data and you want to show specifics details (data) more prominently to your users.

The Markup

I am sharing three different examples on GridView cell coloring or text highlighting. The markup remains the same for all the examples.

I have a GridView control on my web page, and I’ll add columns and rows to the GridView using code behind procedure.

<asp:GridView ID="GridView" 
    AutoGenerateColumns="true"
    onrowdatabound="GridView_RowDataBound" 
    GridLines="None" 
    AllowPaging="True" PageSize="5"
    runat="server">
</asp:GridView>
First, Add Rows and Columns to the GridView
C#
using System;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class SiteMaster : System.Web.UI.MasterPage
{
    System.Data.DataTable mytable = new System.Data.DataTable();

    protected void Page_Load(object sender, EventArgs e)
    {
        CreateGrid();
        AddRowsToGrid();

        // NOW BIND THE GRIDVIEW WITH THE DATATABLE.
        GridView.DataSource = mytable;
        GridView.DataBind();
    }

    private void CreateGrid()
    {

        System.Data.DataColumn tColumn = null; // TABLE COLUMNS.

        tColumn = new System.Data.DataColumn("Product", System.Type.GetType("System.String"));
        mytable.Columns.Add(tColumn);
        tColumn = new System.Data.DataColumn("Stock", System.Type.GetType("System.String"));
        mytable.Columns.Add(tColumn);
        tColumn = new System.Data.DataColumn("Quantity", System.Type.GetType("System.String"));
        mytable.Columns.Add(tColumn);
    }

    private void AddRowsToGrid()
    {
        // ADD ROWS TO THE DATATABLE.
        mytable.Rows.Add("Samsung", "Available", "15");
        mytable.Rows.Add("Micromax", "Out of Stock", "0");
        mytable.Rows.Add("iPhone", "Available", "9");
        mytable.Rows.Add("Oppo", "Available", "21");
        mytable.Rows.Add("Sony", "Out of Stock", "0");
    }
}
Vb.Net
Option Explicit On
Partial Class Site
    Inherits System.Web.UI.MasterPage

    Dim mytable As New Data.DataTable()
    Dim dr As Data.DataRow

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        CreateGrid()
        AddRowsToGrid()

        ' NOW BIND THE GRIDVIEW WITH THE DATATABLE.
        GridView.DataSource = mytable
        GridView.DataBind()
    End Sub

    Private Sub CreateGrid()
        Dim tColumn As Data.DataColumn          ' TABLE COLUMNS.

        tColumn = New Data.DataColumn("Product", System.Type.GetType("System.String"))
        mytable.Columns.Add(tColumn)
        tColumn = New Data.DataColumn("Stock", System.Type.GetType("System.String"))
        mytable.Columns.Add(tColumn)
        tColumn = New Data.DataColumn("Quantity", System.Type.GetType("System.String"))
        mytable.Columns.Add(tColumn)
    End Sub

    Private Sub AddRowsToGrid()
        ' ADD ROWS TO THE DATATABLE.

        mytable.Rows.Add("Samsung", "Available", "15")
        mytable.Rows.Add("Micromax", "Out of Stock", "0")
        mytable.Rows.Add("iPhone", "Available", "9")
        mytable.Rows.Add("Oppo", "Available", "21")
        mytable.Rows.Add("Sony", "Out of Stock", "0")
    End Sub
End Class

After I have created the GridView and added few rows and columns to it, I’ll now write the procedures to change colors to the Cell. I’ll have to write the color changing code inside GridViews RowDataBound event.

Note: If you are a C# developer, you’ll have to add onrowdatabound property to the GridView at design time.

onrowdatabound="GridView_RowDataBound"

1) Change Cell Background Color based on Condition

In the first example, I’ll show you how to change the background color of a cell or multiple cells based on a condition. The condition is, if the value in the 2nd column is out-of-stock, then it will change the background color of the cell or cells.

Code Behind (C#)
protected void GridView_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // CHECK CONDITION.
        if ((e.Row.Cells[1].Text).ToUpper() == "OUT OF STOCK")
        {
            // CHANGE BACKGROUND COLOR OF THTE CELL.
            e.Row.Cells[1].BackColor = System.Drawing.Color.Crimson;
        }
    }
}

Change GridView Cell Background Color based on a Condition

Vb.Net
Protected Sub GridView_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView.RowDataBound
    If e.Row.RowType = DataControlRowType.DataRow Then

        If UCase(e.Row.Cells(1).Text) = "OUT OF STOCK" Then
            e.Row.Cells(1).BackColor = Drawing.Color.Crimson
        End If

    End If
End Sub

2) Change Color of Text in a GridView Cell based on a Condition

In this example, I’ll change the color of the text, using the ForeColor property of the cell.

Remember: the properties and its values are case-sensitive.

C#
protected void GridView_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        if ((e.Row.Cells[1].Text).ToUpper() == "AVAILABLE")
        {
            e.Row.Cells[1].ForeColor = System.Drawing.Color.Green;
        }
    }
}

Change GridView Cell Text Color based on a Condition

Vb.Net
Protected Sub GridView_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
    If UCase(e.Row.Cells(1).Text) = "AVAILABLE" Then

        e.Row.Cells(1).ForeColor = Drawing.Color.Green

    End If
End If
End Sub

3) Change Border Color of a Cell in GridView

In the last example, I’ll change the border color a cell based on a condition. I’ll now use the BorderColor property of the cell.

C#

Here, I have a slightly different condition. I am checking (in the last column) if the value is between “0” and “10”, then change the border color of the cell(s).

protected void GridView_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        if (int.Parse(e.Row.Cells[2].Text) >= 0 && int.Parse(e.Row.Cells[2].Text) <= 10 )
        {
            e.Row.Cells[2].BorderColor = System.Drawing.Color.Red;
        }
    }
}

Change GridView Cell Border Color based on a Condition

Vb.Net
Protected Sub GridView_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView.RowDataBound
    If e.Row.RowType = DataControlRowType.DataRow Then
        If Val(e.Row.Cells(2).Text) >= 0 And Val(e.Row.Cells(2).Text) <= 10 Then

            e.Row.Cells(2).BorderColor = Drawing.Color.Red

        End If
    End If
End Sub

Well, that’s it. Thanks for reading.

Related Posts:

Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+
comments powered by Disqus

Join our Google Plus Community and be a part of a discussion!