Display colored Rectangle in ASP.Net GridView Column from Database using C# and VB.Net

Hi democloud,

GridView doesn't provide the capability to draw some elements in its cells. As a possible solution, you can make use of Label control in the ItemTemplate field and add a font awesome icon as a Text for the Label control and from code behind set the ForeColor property to display the color.

Check this example. Now please take its reference and correct your code.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:TemplateField HeaderText="Color" ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <asp:HiddenField ID="hfColor" runat="server" Value='<%# Eval("Color") %>' />
                <asp:Label ID="lblColor" runat="server"><i class="fa fa-square fa-2x"></i></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Namespaces

C#

using System.Data;
using System.Drawing;

VB.Net

Imports System.Data
Imports System.Drawing

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { 
                        new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Color",typeof(string)) });
        dt.Rows.Add(1, "Chai", "#FF0000");
        dt.Rows.Add(2, "Dal", "#FFFF00");
        dt.Rows.Add(3, "Leaf", "#00FF00");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string color = (e.Row.FindControl("hfColor") as HiddenField).Value;
        (e.Row.FindControl("lblColor") as Label).ForeColor = Color.FromArgb(System.Drawing.ColorTranslator.FromHtml(color).ToArgb());
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {
                            New DataColumn("Id", GetType(Integer)),
                            New DataColumn("Name", GetType(String)),
                            New DataColumn("Color", GetType(String))})
        dt.Rows.Add(1, "Chai", "#FF0000")
        dt.Rows.Add(2, "Dal", "#FFFF00")
        dt.Rows.Add(3, "Leaf", "#00FF00")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim color As String = (TryCast(e.Row.FindControl("hfColor"), HiddenField)).Value
        TryCast(e.Row.FindControl("lblColor"), Label).ForeColor = System.Drawing.Color.FromArgb(ColorTranslator.FromHtml(color).ToArgb())
    End If
End Sub

Screenshot