Adding Images to Hyperlinks in Grid view.

---

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.

To add a hyperlink field

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

     autogeneratecolumns=false
   
     ...
   
   >

2. Within the GridView declaration, declare a element.
3. Within the Columns element, define the 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.

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

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.

To setup a hyperlink field to display images

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 ).

     autogeneratecolumns=false
   
     ...
   
     onRowDataBound="getImages"
   
   >

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

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

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.

This Article is copied from URL:http://authors.aspalliance.com/aspxtreme/webforms/controls/addinghyperlinkfieldstogridview.aspx

This is for Educational Purposes Only.