Controls You Can Use on Web Forms   ASP.NET Data Controls   GridView Control

---

A HyperLinkField enables authors to display text or image hyperlinks that users can click to navigate to another page.

The text or image of the hyperlink can either be static — the same for every row — or obtained from a field in the data source.

Similarly, the target page for the hyperlink can be a single page for all the hyperlinks, or a URL derived from the data source.

1. Set the GridView control's AutoGenerateColumns property to false.

   <asp:GridView id="myGrid" runat="server"
      autogeneratecolumns=false
      ...
   >

2. Within the GridView declaration, declare a <Columns> element.
3. Within the Columns element, define the <asp:HyperLinkField> you intend to display, specifying at the very least the required DataTextField and DataNavigateUrlFields properties.
4. Optionally set the HyperLinkField control's other properties, such as the HeaderText and DataNavigateUrlFormatString. For syntax, see GridView Control Syntax.

   <columns>
   
      <asp:hyperlinkfield headertext="Title"
         datatextfield="title"
         datanavigateurlfields="title_id" 
         datanavigateurlformatstring="details_title.aspx?titleid={0}" />
   
      ...
   
   </columns>

GridView HyperLinkField Example Run Sample | View Source

The HyperLinkField class itself does not have a member that directly supports using images. The HyperLink controls that are rendered in the column, though, include an ImageUrl property that can be set programmatically during the RowDataBound event of the GridView control to render image links.

1. Set the GridView control's AutoGenerateColumns property to false.
2. Assign the handler that will receive control when the rows are bound to data ( in effect, when the GridView's RowDataBound event occurs ).

   <asp:GridView id="myGrid" runat="server"
      autogeneratecolumns=false
      ...
      onRowDataBound="getImages"
   >

3. Proceed as with using text links above, except omit the Text and DataTextField properties.

   <columns>
   
      <asp:hyperlinkfield
         datanavigateurlfields="planId" 
         datanavigateurlformatstring="plan_details.aspx?id={0}" />
   
      ...
   
   </columns>

4. Define the handler for the event ( see demo ).

The following example shows how to set up a HyperLinkField to display a column of image links in a GridView control.

Dynamically Generated HyperLinkField Images Run Sample | View Source

For additional information, see HyperLinkField in the class library.

Adding Bound Fields to a GridView Control   Adding Button Fields to a GridView Control   Adding Template Fields to a GridView Control

Books and more ...

Custom Search

Suggested Reading

Need a break ?