Templatefield in gridview control

Templatefield in grid:

Grid is use to displaying rows of data and allow to user to perform operations in here on data gridview is use to display data in the form of rows and columns. The grid has property to create columns according to the data table which we going to bind to the asp.net gridView. But grid also gives the facility to user to create columns programmatically of as user need. And also use can set Style of these created columns.

Syntax of Declaration of GridView:

<asp:GridView ID="grid1" runat="server" Height="292px" Width="914px" ></asp:GridView>

Gridview control with header Style:

<asp:GridView ID="grid1" runat="server" BorderColor="#990000"

            BorderStyle="Groove" BorderWidth="1px" Height="292px" Width="787px" >

            <HeaderStyle BackColor="#3333FF" BorderColor="#000099" BorderStyle="Groove"

                BorderWidth="1px" />

        </asp:GridView>

Gridview Constructors:

GridView MyGrid = new GridView();

Grid Constructors Use to Initialization of control.

Templatefield in gridview:

<div align="center">

<asp:GridView ID="grid1" runat="server" BorderColor="#990000"    AutoGenerateColumns="false" >

          <Columns>

            // create columns here for display data.

          </Columns>

</asp:GridView>

</div>

When we take a Templatefield in grid control:

<asp:GridView ID="grid1" runat="server" BorderColor="#990000"

            AutoGenerateColumns="false" Width="300px" >

          <Columns>

             <asp:TemplateField>

              ..

              ..      

             </asp:TemplateField>

          </Columns>

        </asp:GridView>

Now go to Design view and click on the gridview right top corner then we see

Template in grid view

In this Image we see fallowing type of other field included in the Template field

• ItemTemplate
• AlternatigItemTemplate
• EditItemTemplate
• HeaderTemplate
• FooterTemplate
• EmptyDatatemplate.

To get Item Template for getting control inside the gridview in asp.net:

<asp:GridView ID="grid1" runat="server" BorderColor="#990000"

            AutoGenerateColumns="false" Width="300px" >

          <Columns>

          <asp:TemplateField>

          <ItemTemplate>

          ..

          //get asp.net control here

          ..

          </ItemTemplate>     

          </asp:TemplateField>

          </Columns>

        </asp:GridView>

As like that

<Columns>

   <asp:TemplateField>

       <ItemTemplate>

            <asp:Label ID="lbl" runat="server" Text='' ></asp:Label>

       </ItemTemplate>     

    </asp:TemplateField>

 </Columns>

Bind database column in this label control as like Text='<%"Eval(databasecolumn name)"%>'

Combine these code and see the TemplateField of Gridview:

<asp:GridView ID="grid1" runat="server" BorderColor="#990000"

            AutoGenerateColumns="false" Width="300px" Height="101px" >

          <Columns>

          <asp:TemplateField HeaderText="Column1">          

          <ItemTemplate>

            <asp:Label ID="lbl" runat="server" Text='<%"Eval(databasecolumn name)"%>' ></asp:Label>

          </ItemTemplate>     

          </asp:TemplateField>

          <asp:TemplateField HeaderText="Column2">          

          <ItemTemplate>

      <asp:Label ID="lbl2" runat="server" Text='<%"Eval(databasecolumn name)"%>' >/asp:Label>

          </ItemTemplate>     

          </asp:TemplateField>

          </Columns>

        </asp:GridView>

Properties of GridView: 

there are fallowing Properties of Asp.net Grid

BackColor: Define Background color of the Web server control.

Many other asp Grid properties are BorderColor, BindingContainer, BorderStyle, AccessKey, BorderWidth, BottomPagerRow, AppRelativeTemplateSourceDirectory ,Caption, CaptionAlign, AlternatingRowStyle, ForeColor, GridLines, AllowSorting ,HasAttributes, HeaderRow, AllowPaging, HeaderStyle, Height, HorizontalAlign, BackImageUrl  etc.

Features of GridView controls:

• Binding to data source controls, such as SqlDataSource.
• Built-in paging capabilities.
• Built-in row selection capabilities.
• Multiple data fields for the hyperlink columns.
• Customizable appearance through themes and styles.
• Built-in update and delete capabilities. 
• Programmatic access to the GridView object model to dynamically set properties.
• Multiple key fields.
• Built-in sort capabilities.

Gridview Related Post:

• How to Bind gridview form database.
• Show gridview Row Details in Asp.net.
• Template field in gridview asp.net Example
• Introduction of  Asp.net grid view Control.
• Example of Templatefield in gridview.
• Example of  DropDownList  inside gridView
• Asp.net grid viewControl Programming.
• Checkbox within Asp.Net gridView
• Ckeckbox list Example using javascript in gridview. 
• Asp.net textbox control in inside of gridview

Other Asp.net Controls:

• Button Control, Label Control, TextBox, ImageButton Control, Literalcontrol, ImageMap Control of Asp.net, Example of Listview, CheckBox List control , Example of checkbox, CheckBox Control, RadioButton Control, checkbox with Grid, Introduction of Gridview.

Example of TemplateField:

Here we consider a table  as

And then bind name of state and id in to Gridview Templatefield we give code here

Code for Default.aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Exampleoftemplate.aspx.cs" Inherits="Exampleoftemplate" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"

            Height="258px" Width="559px">

        <Columns>

         <asp:TemplateField HeaderText="SNo" ItemStyle-HorizontalAlign="Center">

                            <ItemTemplate>

                                <%#Container.DataItemIndex+1 %>

                            </ItemTemplate>

                            <ItemStyle HorizontalAlign="Center"></ItemStyle>

                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="State ID" ItemStyle-HorizontalAlign="Center">

                            <ItemTemplate>

                                <asp:Label ID="lblStateID" runat="server" Text='<%# Eval("StateID") %>'></asp:Label>

                               

                            </ItemTemplate>

                            <ItemStyle HorizontalAlign="Center"></ItemStyle>

                        </asp:TemplateField>

                        <asp:TemplateField HeaderText="Name of State" ItemStyle-HorizontalAlign="Center">

                            <ItemTemplate>

                               

                                <asp:Label ID="lblName" runat="server" Text='<%# Eval("StateName") %>'></asp:Label>

                            </ItemTemplate>

                            <ItemStyle HorizontalAlign="Center"></ItemStyle>

                        </asp:TemplateField>

       

        </Columns>

            <HeaderStyle BackColor="#3333FF" BorderColor="#FF99FF" BorderStyle="Groove"

                BorderWidth="2px" ForeColor="White" />

        </asp:GridView>

    </div>

    </form>

</body>

</html>

Video for  creating  Template in gridview

Code for Defualt.aspx.cs page:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data.SqlClient;

using System.Data;

public partial class Exampleoftemplate : System.Web.UI.Page

{

    string _connectionstring;

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            _connectionstring = @"Data Source=PARIJAT-PC\PARIJAT;Initial Catalog=Database1;Integrated Security=True;Pooling=False";

            BindData();

        }

    }

    private void BindData()

    {

        try

        {

            string _sql = "select StateID,StateName from States";

            SqlConnection _connection = new SqlConnection(_connectionstring);

            SqlCommand _command = new SqlCommand(_sql, _connection);

            SqlDataAdapter _adapter = new SqlDataAdapter(_command);

            DataTable datatable = new DataTable();

            _adapter.Fill(datatable);

            GridView1.DataSource = datatable;

            GridView1.DataBind();

        }

        catch

        {

            throw;

        }

    }

}

Other Asp.net Related Post: 

• Example of session in asp.net
• comparevalidator in asp.net

• Session Management.

• Required Field validator.

• What is the postback in asp.net

• Post back And call back

• Use of viewstate.

• Validate ASP.Net RadioButtonList using JavaScript Example