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.
