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

Last Reply one month ago By dharmendr

Posted one month ago

Hello Sir,

I'm trying to display the color from database into gridview selected from colorpickerExtender in Gridview.

<asp:BoundField HeaderText="color" DataField="color" SortExpression="color" />

Using the above line of code its displaying the color code like #666666 rather than displaying the color itself .

I want the color itself to be displayed in gridview in a small rectangle form.

Please help me out. 

Thanks

Posted one month ago Modified on one month ago

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