how to change gridview cell color based on cell item using C#

Question

I am trying to show a circle inside the Status column and NOT bound to any field in the gridview. So if Parent ID = 1 then I want to fill the circle with green, if Parent ID = 2 then I want to fill the circle with Yellow and so on. The Status column should have only the colored circle based on the condition I mentioned. Also the circle could be some kind of image or something not sure what is the best and easiest way of doing it. Here is the code that I would like to modify. Thanks

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
        DataKeyNames="ID" DataSourceID="AccessDataSource1"
        ondatabound="GridView1_DataBound" onrowdatabound="GridView1_RowDataBound">
        <Columns>
            <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False"
                ReadOnly="True" SortExpression="ID" />
            <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
            <asp:BoundField DataField="Location" HeaderText="Location"
                SortExpression="Location" />
            <asp:BoundField DataField="ParentID" HeaderText="ParentID"
                SortExpression="ParentID" />
            <asp:BoundField DataField="Content" HeaderText="Content"
                SortExpression="Content" />
            <asp:BoundField DataField="ShortContent" HeaderText="ShortContent"
                SortExpression="ShortContent" />
            <asp:TemplateField HeaderText="Status" ControlStyle-Width="75px" >
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("ParentID") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

code behind:

 protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            this.BindData();
        }
    }

public void BindData()
    {


        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString);
        SqlDataAdapter da = new SqlDataAdapter("SELECT ID, Title, Location, ParentID, Content from MyTable", con);
        DataTable dt = new DataTable();
        da.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();
        con.Close();
    }


protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {

        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            var item = e.Row.DataItem as DataTable;

            var panel = (Panel)e.Row.FindControl("CirclePanel");

            if (item.ParentID == "1")
            {
                panel.CssClass = "yellow";
            }
            else
            {
                panel.CssClass = "green";
            }
        }
    }

CSS Style

<style type="text/css">
   .green, .yellow { border-radius: 10px; width: 20px; height: 20px;} 
    .green, .yellow { -moz-border-radius: 10px; width: 20px; height: 20px;}
    .green, .yellow { -webkit-border-radius: 10px; width: 20px; height: 20px;} 
    .green, .yellow { -moz-border-radius: 10px; width: 20px; height: 20px;} 
    .green { background: green; }
    .yellow { background: yellow; }
</style>

Answer 1

You could use css border-radius to display circle icon.

Note: You could use RowDataBound for your scenario instead of DataBound - it gives you a reference to the current row being bound.

<style type="text/css">
    .green, .yellow { border-radius: 10px; width: 20px; height: 20px;} 
    .green { background: green; }
    .yellow { background: yellow; }
</style>
<asp:GridView runat="server" ID="GridView1" OnDataBound="GridView1_DataBound"
    AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField HeaderText="Title">
            <ItemTemplate>
                <asp:Panel runat="server" ID="CirclePanel">
                </asp:Panel>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>


protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        var table = new DataTable();
        table.Columns.Add(new DataColumn
            {
                DataType = Type.GetType("System.Int32"),
                ColumnName = "ID"
            });
        table.Columns.Add(new DataColumn
            {
                DataType = Type.GetType("System.Int32"),
                ColumnName = "ParentID"
            });

        for (int i = 0; i <= 2; i++)
        {
            var row = table.NewRow();
            row["ID"] = i + 100;
            row["ParentID"] = i;
            table.Rows.Add(row);
        }

        GridView1.DataSource = table;
        GridView1.DataBind();
    }
}

public void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        var row = ((DataRowView)e.Row.DataItem).Row;
        int parentID = row.Field<int>("ParentID");
        var panel = (Panel)e.Row.FindControl("CirclePanel");
        panel.CssClass = parentID == 1 ? "yellow" : "green";
    }
}