CODEWITHSUNDEEP
c#asp.netgridview
ARATHY
ARATHY

Reputation: 349

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.

Upvotes: 4

Views: 22490

Answers (3)

Satinder singh
Satinder singh

Reputation: 10208

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

Upvotes: 2

to StackOverflow
to StackOverflow

Reputation: 124794

Lots of ways to skin a cat, but if you really don't want to use RowDataBound, you could use a TemplateColumn containing a styled control in its ItemTemplate. E.g.

<asp:GridView ...>
  ...
  <Columns>
     ...
     <asp:TemplateField ...>
         <ItemTemplate>
            <asp:Panel ... CssClass='<%# GetStudentCssClass(Eval("student_Class")) %>'>
            ...
            </asp:Panel>
         </ItemTemplate>
         ...

Upvotes: 0

Samiey Mehdi
Samiey Mehdi

Reputation: 9424

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

Upvotes: 5

Related Questions