Highlight a Row in GridView Without a Postback -ASP.NET

Selecting a row in the GridView causes a postback. To highlight a row in the GridView, you have to set the ‘SelectedRowStyle’ property, which takes effect when the postback occurs. In this article, we will see how to highlight a row without causing a postback. We will be using the RowCreated event of the GridView. A GridViewRow object is created for each row in the control before the GridView is rendered. Whenever a row in the GridView gets created, the RowCreated event is fired. Using this event, we can customize the behaviour of the GridView. For, e.g., adding a client script to the row or customizing the content of the row. Let us see an example where we will be adding some client script to the GridView. I assume that you have some experience of creating data sources and binding controls to them.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewSelect.aspx.cs"
Inherits="GridViewSelect" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
  <title>Untitled Page</title>
  <form id="form1" runat="server">
      <asp:GridView ID="GridView1" runat="server"

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class GridViewSelect : System.Web.UI.Page
  protected void Page_Load(object sender, EventArgs e)
      if (!IsPostBack)
          if (Session["dtTemp"] != null)
              GridView1.DataSource = Session["dtTemp"] as DataTable;


              GridView1.DataSource = GetCustomMadeDataTable();
              GridView1.DataSource = GetCustomMadeDataTable();


  protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
      e.Row.Attributes.Add("onMouseOver", "this.style.background='#eeff00'");
      e.Row.Attributes.Add("onMouseOut", "this.style.background='#ffffff'");   

  public DataTable GetCustomMadeDataTable()

      //Create a new DataTable object

      System.Data.DataTable objDataTable = new System.Data.DataTable();

      //Create three columns with string as their type

      objDataTable.Columns.Add("Id", typeof(string));
      objDataTable.Columns.Add("FirstName", typeof(string));
      objDataTable.Columns.Add("LastName", typeof(string));
      objDataTable.Columns.Add("Address", typeof(string));
      objDataTable.Columns.Add("Email", typeof(string));
      DataRow dr;
      //Adding some data in the rows of this DataTable
      for (int i = 0; i <= 50; i++)
          dr = objDataTable.NewRow();
          dr[0] = i.ToString();
          dr[1] = "FirstName" + i.ToString();
          dr[2] = "LastName" + i.ToString();
          dr[3] = "Address" + i.ToString();
          dr[4] = "Email" + i.ToString();


      DataColumn[] dcPk = new DataColumn[1];
      dcPk[0] = objDataTable.Columns["Id"];
      objDataTable.PrimaryKey = dcPk;
      Session["dtTemp"] = objDataTable;
      return objDataTable;

As you are already aware that the GridView is rendered as an HTML table and each row as. In the code shown above, we use the Attributes property of the AttributeCollection to add extra properties to the element. The onMouseOver and the onMouseOut events are added that enable the row to change its colour whenever the mouse is over a particular row. Run the application and see the colour of the rows changing, that too without a postback!! Well, that was a quick overview of the RowCreated event. You can also use the same event to find the index of the row clicked. Just use e.Row.DataItemIndex.ToString() to retrieve the selected row index information.

Next Post Previous Post
No Comment
Add Comment
comment url