How to style Asp.net GridView cells with colour based on cell value

Question

I have a Gridview , it have a column called student_Class. There are around of 80 Class on grid view. I have grouped this class using GroupBy query.

Now I want to Style this different class with different color. How is it possible?
It is not easy to write all classes on RowDataBound and giving color.

Is there any other way?

Code:

groups = (ArrayList)Session["selectedclass"];
SELECT id,name,student_Class FROM student where 
         student_Class='"+groups[0].ToString().Trim()+"'  
         group by  student_Class.

Gives Data as

 id   name   student_class
 1    aa      A
 2    bb      A
 3    cc      A
 4    dd      B
 5    ee      B
 6    as      B
 7    ss      B
 8    AZZ     D

The student class with value A need same color(for cell) and B need other color., etc.

Answer 1

ASPX:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="id" DataSourceID="SqlDataSource1" 
    ondatabound="GridView1_DataBound" onrowdatabound="GridView1_RowDataBound">
    <Columns>
        <asp:BoundField DataField="id" HeaderText="id" ReadOnly="True" 
            SortExpression="id" />
        <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />
        <asp:BoundField DataField="student_class" HeaderText="student_class" 
            SortExpression="student_class" />
    </Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:SiteConnectionString %>" 
    SelectCommand="SELECT * FROM [student]">
 </asp:SqlDataSource>

Code behind:

static string[,] ClassNames =
{
   {"A","Red"},
   {"B","Blue"},
   {"C","Pink"},
   {"D","Green"},
   // and so on
};
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    string className = e.Row.Cells[2].Text;
    string color = "Black";
    for (int i = 0; i <= ClassNames.GetUpperBound(0); i++)
    {
        if (ClassNames[i, 0] == className)
        {
            color = ClassNames[i, 1];
            e.Row.Cells[2].ForeColor = Color.FromName(color);
            e.Row.Cells[2].BorderColor = Color.Black;
            break;
        }
    }
}

Answer 2

If you only want to style depend on the value, I must recommend you to do it client-side, by using Jquery or javaScript.
Also, it won't affect performance as it's on the client-side rather than doing it on RowDataBound

Code: Using Client-Side - (which i recommend more)
Here you can set as many conditions to depend on your class values, no need to write extra server-side code

$(document).ready(function () {
        $(".myGvClass").find("td").each(function () {
            if ($(this).text() == "Class B") {
                $(this).css("color", "Red");
            }
            
            if ($(this).text() == "Class A") {
                $(this).css("color", "Blue");
            }
          
            if ($(this).text() == "Class C") {
                $(this).css("color", "green");
            }
          //  ..... and so on
    });



 

HTML markup:

 <asp:GridView ID="GridView1" runat="server" CssClass="myGvClass">
 </asp:GridView>

CodeBehind:

 GridView1.DataSource = YourDataTable;
 GridView1.DataBind();

ScreenShot:

---

---

Code: Using serverside
Looping over Gridview rows at myGridview_DataBound event, and check condition cell value and set respective colors.

protected void myGridview_DataBound(object sender, EventArgs e)
{
    for (int i = 0; i <= myGridview.Rows.Count - 1; i++)
    {
        string myClassVal = myGridview.Rows[i].Cells[2].Text;
        if (myClassVal == "Class A")
        {
            myGridview.Rows[i].Cells[2].BackColor = Color.Green;
         }
        else if (myClassVal == "Class B")
        {
            myGridview.Rows[i].Cells[2].BackColor = Color.Red;
        }
        else 
        {
           myGridview.Rows[i].Cells[2].BackColor = Color.Orange;
        }
    }
}

HTML :

<asp:GridView ID="myGridview" runat="server" ondatabound="myGridview_DataBound">
</asp:GridView>

Code Behind:

myGridview.DataSource = YourDataTable;
myGridview.DataBind(); 

ScreenShot: