Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Wednesday, August 13, 2014

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 gridview
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:

Other Asp.net Controls:


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;
        }
    }
}




No comments:

Post a Comment