Showing posts with label Highligh Girdview Selected Row.. Show all posts
Showing posts with label Highligh Girdview Selected Row.. Show all posts

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 + "'" + ")");

}
}
}