asp.net.ph

Skip Navigation Links

Adding Template Fields to a GridView Control

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


A TemplateField is used in cases where authors need complete control over the contents of a GridView column. The TemplateField is declared with an <ItemTemplate> element, which in turn is used to define the content that will be rendered for each row in the column. The ItemTemplate can include any valid HTML.

The following sample demonstrates using a TemplateField to render an HTML IMG element for each row in a GridView control. To accomplish this, the image’s src property is set to a field in the data source, which typically contains the path to the image files. ASP.NET databinding syntax is used to output the field’s values.

To add a template column

  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:TemplateField> control, along with the required <ItemTemplate> element.
  4. Within the ItemTemplate, define the HTML or server control that will contain the field value.

    To display the value of a field in an item template, use DataBinding Expression Syntax.

  5. Optionally set the <asp:TemplateField> control’s other properties. For syntax, see GridView Control Syntax.
    <columns>
    
       <asp:templatefield>
    
          <itemtemplate>
             <img width=60 align="top" 
                src='<%# Eval ( "title_id", "../images/title-{0}.gif" ) %>’ >
          </itemtemplate>
    
       </asp:templatefield>
    
       ...
    
    </columns>

The following examples show several ways of using a TemplateField to display a column with custom layout in a GridView control.

Disabling AutoGenerateColumns in a GridView
Run Sample | View Source
Dynamically Generated ButtonField ImageButtons
Run Sample | View Source
GridView SelectedDataKey Example
Run Sample | View Source

For addtional information, see TemplateField in the class library.

See Also

Adding Bound Fields to a GridView Control   Adding Button Fields to a GridView Control   Adding Hyperlink Fields to a GridView 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