Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 335
ARATHY Avatar asked Mar 23 '23 12:03

ARATHY


2 Answers

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;
        }
    }
}

enter image description here

like image 69
Samiey Mehdi Avatar answered Apr 05 '23 23:04

Samiey Mehdi


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:

enter image description here



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:

enter image description here

like image 43
Satinder singh Avatar answered Apr 05 '23 23:04

Satinder singh