Changing the color of a row in gridview according to the data

Question

I have a Gridview in ASP.Net - C#. I have one column that is named Assignment or Exam . In that column, I have the name of either the assignment or exam, ex.: "Exam 1" , "Assignment 5" I want that each row that is an assignment should be red and exam be blue.

What is the best way to do it, in SQL Server, or in my code? if so what is the proper code?

Answer 1

You set the background colour of a row in a Gridview by setting the BackColor property for each row individually. To do this based on the data in the row, you'll need to examine the row as it's being bound, which you can do inside the RowDataBound event. Here's a quick bit of markup for a basic Gridview where we hook up to the server-side event:

<asp:GridView runat="server" AutoGenerateColumns="False" OnRowDataBound="TestGridView_RowDataBound" ID="TestGridView">
    <Columns>
        <asp:BoundField DataField="Type" HeaderText="Assignment/Exam" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
    </Columns>
</asp:GridView>

protected void Page_Load(object sender, EventArgs e)
{
    DataTable tests = new DataTable();
    tests.Columns.Add(new DataColumn("Type"));
    tests.Columns.Add(new DataColumn("Name"));
    tests.AcceptChanges();

    tests.Rows.Add(new []{"Assignment","StackOverflow Basics"});
    tests.Rows.Add(new[]{"Exam","Expert Markdown"});
    tests.Rows.Add(new[]{"Exam","Upvoting"});
    tests.Rows.Add(new[]{"Assignment","Rep Changes"});

    TestGridView.DataSource = tests;
    TestGridView.DataBind();
}

In the code for the event, we can get hold of the individual data row that we're binding to and examine the value, so we can set the BackColor accordingly:

protected void TestGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // Ignore the first row which is the header
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Get hold of the row and then the DataRow that it's being bound to
        GridViewRow row = e.Row;
        DataRow data = ((DataRowView)row.DataItem).Row;

        // Look at the value and set the colour accordingly
        switch (data.Field<string>("Type"))
        {
            case "Assignment":
                row.BackColor = System.Drawing.Color.FromName("Blue");
                break;
            case "Exam":
                row.BackColor = System.Drawing.Color.FromName("Red");
                break;
        }
    }
}

That works fine, although you might want to also consider setting the text colour to white so it's slightly easier to read.

However, you might want some more flexibility in the future eg if you add a third assessment type called 'Lab' coloured green, you'd need to change/recompile/retest/redeploy the code. If instead, you pass a named colour up from the database and then use that in the RowDataBound event, you can avoid some of that work, eg:

protected void TestGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // Ignore the first row which is the header
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Get hold of the row and then the DataRow that it's being bound to
        GridViewRow row = e.Row;
        DataRow data = ((DataRowView)row.DataItem).Row;

        row.BackColor = System.Drawing.Color.FromName(data.Field<string>("BackColour");
        row.ForeColor = System.Drawing.Color.FromName(data.Field<string>("TextColour");
    }
}

Answer 2

First find the row index in a variable. In the following code I have used index as the variable.

grdWithLocation.Rows[index].BackColor = Color.FromArgb(255, 238, 238, 238);

Answer 3

I use this in my inventory database. it check to see what date it is and compares it to the dates in the database for each order. it then colours each row with a different colour depending on how long they have been sitting. it is on the RowDataBound of the GridView

You should be able to modify the code to chanage the dates to Exam/Assignment

if (e.Row.RowType == DataControlRowType.DataRow)
{
    DateTime datToday = DateTime.Today();
    DateTime O1 = datToday.AddDays(0);
    DateTime O2 = datToday.AddDays(-1);
    DateTime O3 = datToday.AddDays(-4);

    string strMediaX = e.Row.Cells[2].Text;

    if (Information.IsDate(strMediaX))
    {
        DateTime MediaX = e.Row.Cells[2].Text;
        if (MediaX < O3)
        {
            e.Row.Cells[2].BackColor = Drawing.Color.OrangeRed;
            e.Row.Cells[2].ForeColor = Drawing.Color.White;
        }
        else if (MediaX < O2)
        {
            e.Row.Cells[2].BackColor = Drawing.Color.Orange;
            e.Row.Cells[2].ForeColor = Drawing.Color.White;
        }
        else if (MediaX < O1)
            e.Row.Cells[2].BackColor = Drawing.Color.Gold;
    }
    // checks the current stock of the item and if it is below 10 then it changes the colour to highlight that it needs to be ordered.
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        if ((Label)e.Row.Cells[9].FindControl("lblCurrentStock").Text < 11)
        {
            e.Row.Cells[9].BackColor = System.Drawing.Color.OrangeRed;
            e.Row.Cells[9].ForeColor = Drawing.Color.White;
            e.Row.Cells[9].Font.Bold = true;
        }
    }
}