Render Gridview Header as thead and Footer as tfoot

Asp.net GridView control is one of the data binding control most often used .But it has one problem that when rendering on browser it generate all rows including header and footer in <tbody >section rather than creating seperate <thead> and <tfoot>.This is how gridview is rendered as html.Note that even header is generated as row in tbody section.

<table  id="MainContent_grdNormal" >

<tbody>

<tr class="header content-wrapper" >

 <th scope="col">EmpId</th>

 <th scope="col">EmpName</th>

 <th scope="col">City</th>

</tr>

<tr>

 <td>L1Z 5F4</td>

 <td>Nathaniel</td>

 <td>Ilbono</td>

</tr>

<tr >

 <td>B7F 4U4</td>

 <td>Ross</td>

 <td>Dover</td>

</tr>

<tr>

 <td>R9C 1T9</td>

 <td>Patrick</td>

 <td>Edam</td>

</tr>

</tbody>

</table>

Now to force a gridview to render <thead> and <tfoot>,we need to add 3 lines of code after grid is binded. Below is the code to achieve the same.
using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;


namespace GridHeaders
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            { 
                gridbind();
AddHeaders();
            }
        }

    protected void AddHeaders()
    {
       if (grdNormal.Rows.Count > 0)
      {
        //This replaces <td> with <th> 
       grdNormal.UseAccessibleHeader = true;
       //This will add the <thead> and <tbody> elements
       grdNormal.HeaderRow.TableSection = TableRowSection.TableHeader; 
       //This adds the <tfoot> element. Remove if you don't have a footer row 
       grdNormal.FooterRow.TableSection = TableRowSection.TableFooter;
      }
  }
        protected void gridbind()
        {

            DataTable dt = new DataTable();
            dt.Columns.Add("EmpId", typeof(string));
            dt.Columns.Add("EmpName", typeof(string));
            dt.Columns.Add("City", typeof(string));
           DataRow dr1= dt.NewRow();
           dr1[0] = "L1Z 5F4";
           dr1[1] = "Nathaniel";
           dr1[2] = "Ilbono";
           dt.Rows.Add(dr1);

           DataRow dr2 = dt.NewRow();
           dr2[0] = "B7F 4U4";
           dr2[1] = "Ross";
           dr2[2] = "Dover";
           dt.Rows.Add(dr2);

           DataRow dr3 = dt.NewRow();
           dr3[0] = "R9C 1T9";
           dr3[1] = "Patrick";
           dr3[2] = "Edam";
           dt.Rows.Add(dr3);
           grdNormal.DataSource = dt;
           grdNormal.DataBind();
        }
     
    }
}

Note:-Call AddHeaders() method after binding gridview otherwise you will get The table must contain row sections in order of header, body, then footer error

Convert Gridview Rows To Column (Transpose Gridview)

In this article i will show how to convert Gridview Rows to Column in C#.Lets begin by adding 2 GridViews to a page and a button.Now we need to create a DataTable .For Simplicity i am adding data to datatable in gridbind Method and populating the gridview with that data manually you can fill datatable with database.Store this datatable in ViewState.Now we call this method in page load.
For converting GridView Row to column i have created a method Transpose.Now what we have to do in transpose method.
1)We need to create a new datatable newdt.Retrieve the old datatable from viewstate .The number of columns in new datatable newdt will be equal to number of rows in dt.
2)Add Columns to the new datatable newdt(Column Name is passed as blank ).
3) Create a datarow dr .Iterate through all columns and add for each column value get all the values of the rows in old datatable dt and store it in dr.
4)Add Datarow dr to newdt. Now Add Click event for the button and call the transpose method.

Here is the code

<style type="text/css">

        .header {

            padding:5px;background-color:#7ac0da; font-weight:bold;

        }

      .header content-wrapper table tr  td {

            border:dotted 1px solid !important;

        }

    </style>

    <br />

<div style="text-align: center;">

<asp:gridview alternatingrowstyle-backcolor="#ccffff" bordercolor="Gray" gridlines="Both" headerstyle-backcolor="#7ac0da" headerstyle-bordercolor="Gray" headerstyle-cssclass="header content-wrapper" id="grdNormal" runat="server">

    </asp:gridview>

    </div>

<div style="text-align: center;">

<asp:linkbutton id="lnkConvert" onclick="lnkConvert_Click" runat="server"><img src="Images/down.png" style="width: 50px;" /></asp:linkbutton>

    </div>

<div style="text-align: center;">

<asp:gridview bordercolor="Gray" gridlines="Both" headerstyle-bordercolor="Gray" id="grdTranspose" onrowcreated="grdTranspose_RowCreated" runat="server" showheader="false">

    </asp:gridview>

    </div>

</div>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;


namespace GridTranspose
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            { 
                grdibind();
            }
        }


        protected void grdibind()
        {

            DataTable dt = new DataTable();
            dt.Columns.Add("EmpId", typeof(string));
            dt.Columns.Add("EmpName", typeof(string));
            dt.Columns.Add("City", typeof(string));
           DataRow dr1= dt.NewRow();
           dr1[0] = "L1Z 5F4";
           dr1[1] = "Nathaniel";
           dr1[2] = "Ilbono";
           dt.Rows.Add(dr1);

           DataRow dr2 = dt.NewRow();
           dr2[0] = "B7F 4U4";
           dr2[1] = "Ross";
           dr2[2] = "Dover";
           dt.Rows.Add(dr2);

           DataRow dr3 = dt.NewRow();
           dr3[0] = "R9C 1T9";
           dr3[1] = "Patrick";
           dr3[2] = "Edam";
           dt.Rows.Add(dr3);
           ViewState["GridData"] = dt;
           grdNormal.DataSource = dt;
           grdNormal.DataBind();
        }

        protected void lnkConvert_Click(object sender, EventArgs e)
        {
            Transpose();
        }

        protected void Transpose()
        {
            DataTable dt = (DataTable)ViewState["GridData"];
            DataTable newdt = new DataTable();
            //Create New Columns( count of columns will be equal to number of rows including header
            for (int i = 0; i <= dt.Rows.Count; i++)
            {
                //Column Name string is not specified because column name will come in rows at start
                newdt.Columns.Add("");
            }
            //Now Iterate through old datatable and fill new datatable

           
                //Create a new row in New DataTable
            for (int k = 0; k < dt.Columns.Count; k++)
            {
                DataRow newdr = newdt.NewRow();
                //Assign first column Value in NewDatatable with column name of old table
                
                    newdr[0] = dt.Columns[k].ColumnName.ToString();
                    for (int j = 0; j < dt.Rows.Count; j++)
                    {
                        
                        newdr[j + 1] = dt.Rows[j][k].ToString();
                    }
                    newdt.Rows.Add(newdr);
                }
                
           

            grdTranspose.DataSource = newdt;
            grdTranspose.DataBind();
        
        }

        protected void grdTranspose_RowCreated(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Cells[0].CssClass = "header";
            }
        }


    }
}


Note:-Actually here we are transposing data table and binding to gridview.