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.

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

回答2:

If you only want to styling depend on value , i must recommend you to do it client side, by using Jquery or javaScript.
Also it wont effect on performance as its on client side rather then doing it on RowDataBound

Code: Using Client Side - (which i recommend more)
Here you can set as many condition 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:

回答3:

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>
         ...

来源：https://stackoverflow.com/questions/18670189/how-to-style-asp-net-gridview-cells-with-colour-based-on-cell-value

标签

ASP.NET

gridview