Friday, September 14, 2007

Highlight Row in gridview


Following is the code, which will highligh the row, when user will click on any row.
logic for this is very simple.
I created a one javascript function,which will finds the row and changes the color of that row.
I called javascript function from row created event of the gridview.

the code for this as follows.

my HTML Code is ...

1. Javascript Function

function ChangeRowColor(rowID)
{
var count=document.form1.rowCount.value;
var i=0;
for(i=0;i {
var id="GridView1_row"+i;
if(id==rowID)
{
document.getElementById(id).style.backgroundColor = '#8080FF';
}
else
{
document.getElementById(id).style.backgroundColor = 'white';
}
}

}

2. My Gridview
asp:GridView ID="GridView1" runat="server" OnRowCreated="GridView1_RowCreated"
/asp:GridView

input type="hidden" id="rowCount" runat="server" /

and my code behind is as

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 highlight : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
DataColumn dc = new DataColumn("guid");
DataColumn dc1 = new DataColumn("UserName");
DataColumn dc2 = new DataColumn("password");
dt.Columns.Add(dc);
dt.Columns.Add(dc1);
dt.Columns.Add(dc2);
for (int i = 0; i < 5; i++)
{
DataRow dr = dt.NewRow();
dr["guid"] = i;
dr["UserName"] = "abc" + i.ToString();
dr["password"] = "pwd" + i.ToString();
dt.Rows.Add(dr);
}

GridView1.DataSource = dt;
GridView1.DataBind();

rowCount.Value = dt.Rows.Count.ToString();
// storing the number of rows in the grid in hidden field
// this is used in javascript
}

}

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
string rowID = String.Empty;

if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.ID = "row" + e.Row.RowIndex;
rowID = GridView1.ID + "_row" + e.Row.RowIndex;

//if for each gridview row id is not created, then use this
//e.Row.Attributes.Add("id", GridView1.ID + "row" + e.Row.RowIndex);

e.Row.Attributes.Add("onclick", "ChangeRowColor(" + "'" + rowID + "'" + ")");

}
}
}

No comments:

Post a Comment