Richard Santos

Setting the NavigateUrl property of a hyperlink control in gridview is very easy. But what if you want to pass the value of a specific field in your gridview as a url parameter of your hyperlink control? Well here’s how to do it.

Let say we have a customer list in a gridview and an edit link on the first column and customer id, name, and address on the following columns shown on the image below. Now we want to set the url of our edit link to customerEdit.aspx and at the same time pass the value of the customer id column as a url parameter.

To do this, create a template field for your first column and create a hyperlink control for your item template (See code below). Don’t forget to set the ID of this control because we will use it as reference. You will notice that we didn’t set the value of its navigateUrl property yet, it is because we want to set it row by row while we populate the gridview.

<Columns>
    <asp:TemplateField>
        <ItemTemplate>
           <asp:HyperLink ID=”EditLink” Text=”Edit…” runat=”server” />
        </ItemTemplate>
    </asp:TemplateField>

If you want your link to be an image instead of a text, you could always use the ImageUrl property of the hyperlink control.

<asp:HyperLink ID=”EditLink” ImageUrl=”~/Image/edit.png” runat=”server” />

In this example, my image “edit.png” is located inside the Image folder of my web application root directory.

Now lets move on to the next step, the setting of NavigateUrl property. We will set this property in each row while our datasource populates our gridview. To do this, we will be writing our code in the RowDataBound event of our gridview.

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As _ System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

End Sub

The hyperlink control that we created will only be available on datarows, that’s why we have to check the rowtype of each row before we proceed on setting the hyperlink’s navigateUrl property. If we did not put the line If e.Row.RowType = DataControlRowType.DataRow, we will end up searching for a hyperlink control that is not available on the given row.

After we checked the rowtype and confirmed that the row is a datarow, we then now create a hyperlink variable called “myLink”. We use the code CType(e.Row.FindControl(”EditLink”), HyperLink) to search for the control on the current row with ID=”EditLink” and convert it to a hyperlink type control. We then set this control as the value of our hyperlink variable called “myLink”.

We now have access on a hyperlink control in a given row through “myLink” variable. In this example, we set its navigateUrl property to customerEdit.aspx and pass the value of customer id located in the 2nd column of our gridview as a url parameter called “customerID”.