ASP.NET: Adding onclick to GridView rows

I’ve seen this question posed in a few different forms. One guy wanted to have the user click on a GridView row and have a new window open with an external URL. Another wanted the click to pass a bound ID to the new window. Someone else wanted to have the click fire off a third party script.
You can either wait until the whole thing is loaded, then iterate through the rows, or you can attach a script during the binding. Most GridViews are databound at some point, and it’s quicker to just use that event than to iterate through who knows how many rows after the fact.
Here is an example ASP.NET GridView and SqlDataSource (using Northwind).
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CategoryID" DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound"> <Columns> <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" InsertVisible="False" ReadOnly="True" SortExpression="CategoryID" /> <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" /> <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" /> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]"> </asp:SqlDataSource>
Here is how you could attach a script that opens an arbitrary URL when the user clicks the row. My example passes the (data bound) category name to Google as a search.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { string script = String.Format("window.open('http://www.google.com/search?q={0}')", ((DataRowView)e.Row.DataItem)["CategoryName"]); e.Row.Attributes.Add("onclick", script); } }
Here is how you could open a new window and pass the GridView row’s DataKey to it. This example has just the one key, CategoryId.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { string url = System.Web.VirtualPathUtility.ToAbsolute("~/Default9.aspx") + "?CategoryId=" + Server.UrlEncode(Convert.ToString(GridView1.DataKeys[e.Row.DataItemIndex].Value)); string script = "window.open('" + url + "')"; e.Row.Attributes.Add("onclick", script); } }


November 16th, 2008 at 5:45 pm
NIce trick and works like a charm.
Thank you..
November 20th, 2008 at 8:18 pm
Glad to help!
November 23rd, 2008 at 4:05 pm
this is a real great piece of art. i was wrong.
But what happend if my gridview has paging?
when the user click another page number the code do not work.
would you help me ?
November 23rd, 2008 at 8:05 pm
Hi Jose,
If you’re using paging, you can use the first method as-is, which worked fine with standard paging when I tested it.
If you need the data key value like in the second example, use RowIndex instead of DataItemIndex. I tested this with paging and sorting (standard) enabled and it worked.
string url = System.Web.VirtualPathUtility.ToAbsolute(”~/Default9.aspx”) + “?Category=” +
Server.UrlEncode(Convert.ToString(GridView1.DataKeys[e.Row.RowIndex].Value));
December 4th, 2008 at 6:38 am
Hi Kaeli,
I am developing a web application using .NET Framework 3.0. Here in one page I have a DataGridView in read only format. I need to set some value in session when user clicks on the grid. Can you please help me in achieving this?
December 4th, 2008 at 7:12 pm
DataGridView is a winform component. Session is for web forms. They don’t really mix.