This example shows how to use RowDataBound Event in a GridView for highlighting the Rows or Cell in ASP.NET. This example is helpful in situations where you have to Highlight the GridView Rows or cell based on specific condition. For demonstration, I have created a database (named Database.mdf) in which we have a table (named tbl_Employee).
Table Schema used in this Example:
Table Schema used in this Example:
|
CREATE TABLE [dbo].[tbl_Employee] (
[Id] INT NOT NULL,
[Name] VARCHAR
(50) NULL,
[City] VARCHAR
(50) NULL,
[Salary] INT NULL,
PRIMARY KEY CLUSTERED ([Id] ASC)
);
|
Let's Begin:
1) Drop a GridView Control from the toolbox and set the AutoGenerateColumns property to false.
2) Add a Columns Collection (element) to manage the collection of Column fields.
3) Inside the Columns tag, add a column field (BoundField) that displays the value of a field in a data source.
4) Set the DataField property to the name of the column in the table for binding to the BoundField object and set the HeaderText value for displaying it on the GridView's Header.
5) Add RowDataBound Event in GridView.
Default.aspx Code:
|
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1"
runat="server" CellPadding="6" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id"/>
<asp:BoundField DataField="Name" HeaderText="Name"/>
<asp:BoundField DataField="City" HeaderText="City"/>
<asp:BoundField DataField="Salary" HeaderText="Salary"/>
</Columns>
</asp:GridView>
</div>
</form>
|
In this Example, I am going to Highlight the complete Row for the Employee who have Salary less than 10000.
Default.aspx.cs Code:
|
using System;
using
System.Web.UI.WebControls;
using System.Data;
using
System.Data.SqlClient;
using
System.Configuration;
using System.Drawing;
public partial class _Default : System.Web.UI.Page
{
SqlConnection con;
//Connection String from Web.config file
string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
ShowData();
}
}
//method for Displaying Data in Gridview
protected void ShowData()
{
DataTable dt = new DataTable();
con = new SqlConnection(cs);
SqlDataAdapter adapt
= new SqlDataAdapter("select * from tbl_Employee",con);
con.Open();
adapt.Fill(dt);
con.Close();
GridView1.DataSource = dt;
GridView1.DataBind();
}
//RowDataBound Event
protected void
GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
//Checking the RowType of the Row
if(e.Row.RowType==DataControlRowType.DataRow)
{
//If Salary is less than 10000 than set the row
Background Color to Cyan
if(Convert.ToInt32(e.Row.Cells[3].Text)<10000)
{
e.Row.BackColor = Color.Cyan;
}
}
}
}
|
Preview:
Example 2:
Suppose, We have to highlight the Name of Employee not the Entire Row of the Gridview. We can achieve this using the Code given below:
|
protected void
GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
//Checking the RowType of the Row
if (e.Row.RowType == DataControlRowType.DataRow)
{
//If Salary is less than 10000 than set the Cell
BackColor to Red and ForeColor to White
if (Convert.ToInt32(e.Row.Cells[3].Text)
< 10000)
{
e.Row.Cells[1].BackColor = Color.Red;
e.Row.Cells[1].ForeColor = Color.White;
}
}
}
|
Preview:
I hope you like it. Thanks.
[Download Source Code via Google Drive]
