asp.net.ph

Skip Navigation Links

Adding Hyperlink Columns to a DataGrid Control

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.

To add a hyperlink column

  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:hyperlinkcolumn 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.

To setup a hyperlink field to display images

  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:hyperlinkcolumn
          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.

See Also

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



© 2025 Reynald Nuñez and asp.net.ph. All rights reserved.

If you have any question, comment or suggestion
about this site, please send us a note