GridView Clickable Row
By AzamSharp
Views: 14621

Introduction:

GridView is one of the most widely used data bound controls in the ASP.NET 2.0 framework. GridView being a template control allows other controls to be added in it in different columns. These columns are hyperlink, select, delete, update and many other types of columns. In this article I will show you that how you can make a GridView row clickable. This will allow you to click anywhere on the row and perform the task that you wish to perform.

Populating the GridView Control:

The first task at hand is to populate the GridView control with some data. Take a look at the code below which populates the GridView control.

private void BindData()

{

SqlConnection myConnection = new SqlConnection(ConnectionString);

SqlCommand myCommand = new SqlCommand("SELECT * FROM Users", myConnection);

SqlDataAdapter ad = new SqlDataAdapter(myCommand);

DataSet ds = new DataSet();

ad.Fill(ds);

GridView1.DataSource = ds;

GridView1.DataBind();

}

Making the GridView Row Clickable:

After the GridView is populated with the data the next task is to make the row clickable. This is pretty straight forward task and can be achieved by using few lines of code. The most important thing to remember is that you have to attach the button click attribute inside the GridView_RowDataBound event. The Row_DataBound event is fired whenever a row is bound to the GridView control. Check out the code below:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

string alertBox = "alert('";

if (e.Row.RowType == DataControlRowType.DataRow)

{

alertBox += e.Row.RowIndex;

alertBox += "')";

e.Row.Attributes.Add("onclick", alertBox);

}

}

As, you can see from the above code that all I am doing is attaching the onclick attribute to the GridViewRow. The onclick event will pop up an alert box which will display the current RowIndex of the GridViewRow.

Conclusion:

In this article you learned that how you can make a complete row editable. Making a row editable gives you the ability to click anywhere on the row and process the information. You can even change the color of the row when the row is clicked.

I hope you liked the article, happy coding!

 

By AzamSharp




Enter Comment/Feedback
  •  
  •  
  •  
  •  
  •  

Comments/Feedbacks
Subject: cool!
Name: ilan
Date: 2/6/2007 6:15:37 AM
Comment:
10x alot
i like the way u made things short, clear, simple and efective

10x again :-)
Subject: Editable?
Name: Uhhhhh
Date: 2/16/2007 7:21:02 PM
Comment:
>In this article you learned that how you can make a complete row editable.

Ummm, really? I didn't see the row become editable...
Subject: Mistake!
Name: AzamSharp
Date: 2/16/2007 9:00:39 PM
Comment:
Yes, you are right. It should be clickable not editable. I apologize for the mistake!
Subject: Cool Stuff
Name: Trent
Date: 3/23/2007 12:10:58 PM
Comment:
This works well. I have had success with this accessing attributes of the grid, but is it possible to access other form elements. For example, I want to access another form method and update screen content based on the row that was clicked.
Subject: Appreciation regarding ur articles
Name: Manjunath M.S
Date: 4/6/2007 2:30:56 AM
Comment:
Hi;

I found the articles very useful especially for trainees like me.

I congratulate you on behalf of all the trainees for this awesome work. Well done.

Cheers
-Manjunath M.S
Subject: RE:
Name: AzamSharp
Date: 4/12/2007 1:15:14 PM
Comment:
Thanks!

I am glad that you found the article useful.
Subject: Permanantly Changing Row color
Name: Asif Ali
Date: 9/11/2007 1:38:02 AM
Comment:
Hi Azam

I m a regular reader of your website, a beginner in .NET.

I would like to know, how can I change the rowBackColor permanantly.

Thanks
Asif Ali.
Subject: Fire a select event
Name: Joe
Date: 11/16/2007 8:50:27 AM
Comment:
How can I fire a Select event by clicking a row.
Subject: RE: Permanantly Changing Row Color
Name: AzamSharp
Date: 11/19/2007 7:12:27 AM
Comment:
Hi Asif Ali, What do you mean changing row permanently? Check out my article about mouseover on GridView and it will give you the idea. Basically you need to set the style.backgroundColor property of the TR row of the selected row.
Subject: RE: Fire a select event
Name: AzamSharp
Date: 11/19/2007 7:12:57 AM
Comment:
Hi Joe, You can use the Select column of the GridView control.
Subject: thanks
Name: Deevan
Date: 4/8/2008 6:58:20 AM
Comment:
Thanks
It helps me alot ,
i got solution by this snippet
Subject: passing an ID
Name: dimithrak
Date: 4/16/2008 9:21:59 AM
Comment:
Hey, great example, but was wondering if you could help me out here.

I need to pass an ID from the database through the grid to open up a webpage when the user clicks on a row from the gridview.

Any idea how thats done?
Subject: RE: Passing an ID
Name: AzamSharp
Date: 4/17/2008 8:27:52 PM
Comment:
Hi Dimithrak, You need to attach the JavaScript function inside the RowDataBound event. That JavaScript function can open new window and pass the ID as a QueryString.
Subject: Buttons and Hyperlinks
Name: Allen Budziak
Date: 4/30/2008 7:29:45 AM
Comment:
I have so far found your articles very easy to understand and put into use. Thank you, Azam, so much for this site and your contribution to all of us!

I do have a question regarding the GridView clickable-row. My implentation of this uses the following line of code to make each row clickable and to fire the 'select' event upon clicking anywhere in the row.

gvr.Attributes.Add("onclick", ClientScript.GetPostBackClientHyperlink(((GridView)sender), string.Format("Select${0}", gvr.RowIndex.ToString())));

The problem I am having is that, if the row has a button field and I have made the row clickable, I can no longer click on the button field.

Is there a way around this that you know of?

Thank you in advance!
Allen
Subject: GridView Clickable Row
Name: Daniel Lusignan
Date: 5/1/2008 12:50:44 PM
Comment:
Hi! Thanks for this very usefull website. I implement this example but I decide to extend GridView with your code int the RowCreated code :

protected override void OnRowCreated(GridViewRowEventArgs e)
{
string mouseOverStyle = "this.style.backgroundColor='#" + HexaColor.ToHexaDecimal(MouseOverBackColor.ToArgb()) + "'";
mouseOverStyle += ";this.style.color='#" + HexaColor.ToHexaDecimal(MouseOverForeColor.ToArgb()) + "'";
mouseOverStyle += ";this.style.cursor='" + Cursor.ToString().Replace("__", "").Replace("_", "-") + "'";

string mouseOutStyle = "this.style.backgroundColor='#@BackColor'";

string rowBackColor = String.Empty;

if (e.Row.RowType == DataControlRowType.DataRow)
{
if (e.Row.RowState == DataControlRowState.Alternate)
{
if (!this.AlternatingRowStyle.BackColor.Name.Equals("0"))
{
rowBackColor = HexaColor.ToHexaDecimal(this.AlternatingRowStyle.BackColor.ToArgb());
}
else
{
if (this.BackColor.Name.Equals("0"))
{
rowBackColor = "ffffff";
}
else
{
rowBackColor = HexaColor.ToHexaDecimal(this.BackColor.ToArgb());
}
}

if (!this.AlternatingRowStyle.ForeColor.Name.Equals("0"))
{
mouseOutStyle += ";this.style.color='" + HexaColor.ToHexaDecimal(this.AlternatingRowStyle.ForeColor.ToArgb()) + "'";
}
else
{
mouseOutStyle += ";this.style.color='" + HexaColor.ToHexaDecimal(this.ForeColor.ToArgb()) + "'";
}
}
else
{
if (!this.RowStyle.BackColor.Name.Equals("0"))
{
rowBackColor = HexaColor.ToHexaDecimal(this.RowStyle.BackColor.ToArgb());
}
else
{
if (this.BackColor.Name.Equals("0"))
{
rowBackColor = "ffffff";
}
else
{
rowBackColor = HexaColor.ToHexaDecimal(this.BackColor.ToArgb());
}
}

if (!this.RowStyle.ForeColor.Name.Equals("0"))
{
mouseOutStyle += ";this.style.color='" + HexaColor.ToHexaDecimal(this.RowStyle.ForeColor.ToArgb()) + "'";
}
else
{
mouseOutStyle += ";this.style.color='" + HexaColor.ToHexaDecimal(this.ForeColor.ToArgb()) + "'";
}
}

e.Row.Attributes.Add("onmouseover", mouseOverStyle);
e.Row.Attributes.Add("onmouseout", mouseOutStyle.Replace("@BackColor", rowBackColor));
}

string _jsSingle = Page.ClientScript.GetPostBackClientHyperlink(this, "Select$" + e.Row.RowIndex);

e.Row.Attributes["onclick"] = _jsSingle;

base.OnRowCreated(e);
}

Since, the PageIndexChanging event did not fires anymore. Do you have an idea why?
Subject: How do you make a Column Clickable?
Name: Omar
Date: 5/20/2008 1:09:35 AM
Comment:
Hi great article...but I'm wondering how to make a column editable rather than a row
Subject: no worky
Name: mike
Date: 5/29/2008 3:11:39 PM
Comment:
I've added this, but nothing happens when i click it.
Subject: RE: Not Working
Name: AzamSharp
Date: 5/30/2008 5:11:13 PM
Comment:
Hi Mike,

You need to be more specific about the problem!
Subject: Select button problem
Name: Nico
Date: 7/2/2008 3:53:36 AM
Comment:
Hi AzamSharp,
Thanks for the code. I was able to open my other web page and pass the ID as a QueryString as you suggested below. However, the problem is that the Select button is no longer work like before. How can I get the Select row function to work while I can still use other columns for the "onclick" which transfers to the next webpage. Please help out. Thanks in advance.
Subject: Clickable
Name: priya
Date: 8/5/2008 5:14:45 AM
Comment:
like the way u made things short, clear, simple and efective. But row is clickable not editable.





Join WebHost4Life.com







Copyright GridViewGuy 2007-2008