Articles → ASP .NET GRIDVIEW → Set The Row Background In Gridview In Asp.Net

Set The Row Background In Gridview In Asp.Net

Here in this tutorial we will have a look at how to change the color of relevant rows at run time in gridview.

Objective Of This Tutorial

This tutorial provides a walkthrough on how to set the row background in gridview in asp.net

Prerequisite

Software

Visual studio 2010 is installed on your machine.

Prerequisites

In order to understand this tutorial you must have technical knowledge about the following concepts:

Knowledge of ASP.NET.
Knowledge of C#.
How to create xml files?
How to create projects using visual studio?

Steps Involved

In order to achieve our goal we will follow these steps

Create a new asp.net website
Add a file Data.xml
Add a grid view on a web form
Define the criteria for coloring the rows
Execute the code

Step 1: Create A New Asp.Net Website

In MS Visual studio this can be done easily by going to ‘File’ menu and selecting ‘New Web Site’. In the window that opens select ‘ASP .NET Web Site’ as an option.

Step2: Add A File Data.Xml

Create a xml file as shown below:

<root>
	<Person>
		<Name>Person1</Name>
		<Age>17</Age>
	</Person>
	<Person>
		<Name>Person2</Name>
		<Age>18</Age>
	</Person>
	<Person>
		<Name>Person3</Name>
		<Age>19</Age>
	</Person>
</root>

Step 3: Add A Grid View On A Web Form.

Often there is a need to customize the appearance of the grid depending on specific condition. For this ‘onrowdatabound’ event is used.

‘RowDataBound’ event is invoked when a row is bound to Gridview control. In the code below, ‘gvColor_RowDataBound’ is passed to the event-handling method and you get access to the properties of the every row that is being bound. In this tutorial we define an event-handling method to change color of rows that display records as per our requirement.

<asp:GridView ID="gvColor" runat="server" onrowdatabound="gvColor_RowDataBound" AutoGenerateColumns="false">
	<Columns>
		<asp:TemplateField HeaderText="Name">
			<ItemTemplate>
				<asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>'>
				</asp:Label>
			</ItemTemplate>
		</asp:TemplateField>
		<asp:TemplateField HeaderText="Age">
			<ItemTemplate>
				<asp:Label ID="lblAge" runat="server" Text='<%#Eval("Age") %>'>
				</asp:Label>
			</ItemTemplate>
		</asp:TemplateField>
	</Columns>
</asp:GridView>

Step 4: Define The Criteria For Coloring The Rows

In background code we will now define the conditions for coloring the row. In this particular example we want that the rows providing records for people less than 18 years of age should be displayed in red. This code is written in the method ‘gvColor_RowDataBound’ in the code shown below:

using System;
using System.Web.UI.WebControls;
using System.Data;

public partial class _Default: System.Web.UI.Page {
  protected void Page_Load(object sender, EventArgs e) {
    DataSet ds = new DataSet();
    ds.ReadXml(Server.MapPath("Data.xml"));

    gvColor.DataSource = ds.Tables[0];
    gvColor.DataBind();
  }
  protected void gvColor_RowDataBound(object sender, GridViewRowEventArgs e) {
    if (e.Row.RowType == DataControlRowType.DataRow) {
      Label lblAge = (Label) e.Row.FindControl("lblAge");

      if (Convert.ToInt16(lblAge.Text) < 18)
        e.Row.Attributes.Add("style", "background-color:red");

    }
  }
}

Step 5: Execute The Code

When you execute the application the following result will be displayed.

Picture showing the output of setting the row background in gridview in asp.net

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Tuesday, March 25, 2014

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**