Create Templatefields in a GridView control

We use TemplateFields when we wish to display ASP.Net controls in a GridView column. We display ASP.Net controls in a GridView column to provide additional functionality in the user interface. For example, by placing a DropDownList control in a GridView column, users will be able to select a list of options from within the Gridview control interface. Other examples of providing more functionality to the GridView interface are placing Checkboxes, Labels, Textboxes and Validation controls. A Template field supports many types of templates and a list of template types is given in the table below.



TemplateType Description
AlternatingItemTemplate The contents of this template are displayed for every other row rendered by the GridView
EditItemTemplate The contents of this template are displayed when a row is selected for editing
FooterTemplate The contents of this template are displayed in the column footer
HeaderTemplate The contents of this template are displayed in the column header
InsertTemplate The contents of this template are displayed when a new data item is inserted
ItemTemplate The contents of this template are displayed for every row rendered by the GridView

We can create TemplateFields in the GridView control using <TemplateField> element.

Steps to create the <TemplateField> element in the GridView control

a. Declare the GridView and set the AutoGenerateColumns property to 'false'.
b. Create a Template column using <asp:TemplateField> tag within the <Columns> element.
c. Create <ItemTemplate> within the <asp:TemplateField> element to display value of field as text.
d. Create <EditItemTemplate> to display TextBox control to modify value of field when editing the record.

<asp:GridView ID="GridView1"  DataSourceId="MyDataSource"  DataKeyNames="Code"
AutoGenerateColumns="false"       AutoGenerateEditButton="true"
AutoGenerateDeleteButton="true"   runat="server">
<Columns>
<asp:TemplateField  HeaderText="Name">
<ItemTemplate>
<%#Eval("Name")%>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtName" Text="<%# Bind("Name")%>" runat="server" />
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField  HeaderText="Description">
<ItemTemplate>
<%#Eval("Description")%>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtDesctiption"	Text="<%# Bind("Description")%>"  runat="server" />
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

<asp:SqlDataSource ID="MyDataSource" 
ConnectionString="<%$Connectionstrings:ERPConnectionString%>"
SelectCommand="SELECT * FROM Sample"
UpdateCommand="Update SAMPLE SET Name=@Name,Description=@Description Where Code=@Code"
DeleteCommand="Delete SAMPLE Where Code=@Code" runat="server"/>


Configure the SqlDataSource control and set the SelectCommand and UpdateCommand properties to display and update records from the Sample Table.

Observe that we have created two Template fields the GridView control. The first TemplateField is used to display and edit the value of the 'Name' field in the SAMPLE table. The second TemplateField is used to display and edit the value of the 'Description' field in the SAMPLE table. The contents of the ItemTemplate are displayed when a row is in normal mode and the contents of the EditItemTemplate are displayed when a row is in edit mode.