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

---

A HyperLinkColumn 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 DataGrid control's AutoGenerateColumns property to false.

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

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

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

DataGrid HyperLinkColumn Example Run Sample | View Source

The HyperLinkColumn 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 ItemDataBound event of the DataGrid control to render image links.

1. Set the DataGrid 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 DataGrid's ItemDataBound event occurs ).

   <asp:datagrid id="myGrid" runat="server"
      autogeneratecolumns=false
      ...
      onItemDataBound="getImages"
   >

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

   <columns>
   
      <asp:hyperlinkfield
         datanavigateurlfield="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 HyperLinkColumn to display a column of image links in a DataGrid control.

Dynamically Generated HyperLinkColumn Images Run Sample | View Source

For additional information, see HyperLinkColumn in the class library.

Adding Bound Columns to a DataGrid Control   Adding Button Columns to a DataGrid Control   Adding Template Columns to a DataGrid Control

Books and more ...

Custom Search

Suggested Reading

Need a break ?