In this article I will explain with an example, how to render GridView with THead, TBody and TFoot tags in ASP.Net using C# and VB.Net.
By default, GridView renders as HTML Table without the THead, TBody and TFoot tags.
Database
I have made use of the following table Customers with the schema as follows.
![Render GridView with THead, TBody and TFoot in ASP.Net]()
I have already inserted few records in the table.
![Render GridView with THead, TBody and TFoot in ASP.Net]()
Note: You can download the database table SQL by clicking the download link below.
HTML Markup
The following HTML Markup consists of an ASP.Net GridView.
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns = "false">
<Columns>
<asp:BoundField DataField="CustomerId" HeaderText="Customer Id" ItemStyle-Width="110px" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="120px" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="120px" />
</Columns>
</asp:GridView>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Populating GridView control from database and render GridView with THead, TBody and TFoot
Inside the Page load event handler, the GridVew is populated with the records from the Customers table.
Once the GridView is populated, a check is made to verify whether the GridView has Rows and then the following three properties are set.
1. HeaderRow.TableSection – Set to TableRowSection.TableHeader. Required for rendering the THead and TBody tags.
2. UseAccessibleHeader – Set to True. Required for rendering TH elements in the Header row.
3. FooterRow.TableSection – Set to TableRowSection.TableFooter. Required for rendering the TFoot tag.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindGrid();
}
}
private void BindGrid()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT * FROM Customers", con))
{
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
DataTable dt = new DataTable();
sda.Fill(dt);
gvCustomers.DataSource = dt;
gvCustomers.DataBind();
if (gvCustomers.Rows.Count > 0)
{
//Adds THEAD and TBODY Section.
gvCustomers.HeaderRow.TableSection = TableRowSection.TableHeader;
//Adds TH element in Header Row.
gvCustomers.UseAccessibleHeader = true;
//Adds TFOOT section.
gvCustomers.FooterRow.TableSection = TableRowSection.TableFooter;
}
}
}
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.BindGrid()
End If
End Sub
Private Sub BindGrid()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand("SELECT * FROM Customers", con)
Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
Dim dt As DataTable = New DataTable()
sda.Fill(dt)
gvCustomers.DataSource = dt
gvCustomers.DataBind()
If gvCustomers.Rows.Count > 0 Then
'Adds THEAD and TBODY Section.
gvCustomers.HeaderRow.TableSection = TableRowSection.TableHeader
'Adds TH element in Header Row.
gvCustomers.UseAccessibleHeader = True
'Adds TFOOT section.
gvCustomers.FooterRow.TableSection = TableRowSection.TableFooter
End If
End Using
End Using
End Using
End Sub
Screenshot
GridView without THead, TBody and TFoot tags
![Render GridView with THead, TBody and TFoot in ASP.Net]()
GridView with THead, TBody and TFoot tags
![Render GridView with THead, TBody and TFoot in ASP.Net]()
Demo
Downloads
