In this article I will explain with an example, how to Rotate / Flip / Transpose GridView Columns to Rows and Rows to Columns on click of a button in ASP.Net.
 
 

HTML Markup

The following HTML Markup consists of:
GridView – For displaying data.
There are Button control
First one is for Rotate/Flip/Transpose GridView Columns to Rows.
Second one is for Rotate/Flip/Transpose GridView rows to Columns.
Note: In order to Rotate / Flip / Transpose GridView columns, your GridView must have set AutoGenerateColumns="true".
 
<asp:GridView ID="gvCustomers" CssClass="Grid" HeaderStyle-CssClass="header" runat="server"
    AutoGenerateColumns="true">
</asp:GridView>
<br />
<asp:Button ID="btnConvert1" runat="server" Text="Convert Rows to Columns" OnClick="Convert"
    CommandArgument="1" />
<asp:Button ID="btnConvert2" runat="server" Text="Convert Columns to Rows" OnClick="Convert"
    CommandArgument="2" Visible="false" />
 
 

Namespace

You will need to import the following namespace.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 

Binding the ASP.Net GridView Control

Inside the Page_Load event handler, an object of DataTable is created.
Then, three columns are added to the DataTable Columns collection using the AddRange method.
An Array of objects of type DataColumn is specified which will hold the name and the optional parameter Data Type i.e. the Type of the column.
Once the schema is ready i.e. all the columns are defined, some rows have been added using the Rows.Add method.
Then, I am Saving the DataTable to ViewState variable so that it can be reused later on.
Finally, BindGrid method accepts an additional parameter rotate based on which I hide and show the DataTable headers.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] {
                            new DataColumn("Item"),
                            new DataColumn("Quantity"),
                            new DataColumn("Price") });
        dt.Rows.Add("Shirt", 145, 500);
        dt.Rows.Add("Jeans", 0, 2000);
        dt.Rows.Add("Trousers", 190, 1545);
        dt.Rows.Add("Tie", 30, 200);
        dt.Rows.Add("Cap", 0, 300);
        dt.Rows.Add("Hat", 90, 350);
        dt.Rows.Add("Scarf", 290, 140);
        dt.Rows.Add("Belt", 150, 400);
        ViewState["dt"] = dt;
        BindGrid(dt, false);
    }
}
 
private void BindGrid(DataTable dt, bool rotate)
{
    gvCustomers.ShowHeader = !rotate;
    gvCustomers.DataSource = dt;
    gvCustomers.DataBind();
    if (rotate)
    {
        foreach (GridViewRow row in gvCustomers.Rows)
        {
            row.Cells[0].CssClass = "header";
        }
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {
                            New DataColumn("Item"),
                            New DataColumn("Quantity"),
                            New DataColumn("Price")})
        dt.Rows.Add("Shirt", 145, 500)
        dt.Rows.Add("Jeans", 0, 2000)
        dt.Rows.Add("Trousers", 190, 1545)
        dt.Rows.Add("Tie", 30, 200)
        dt.Rows.Add("Cap", 0, 300)
        dt.Rows.Add("Hat", 90, 350)
        dt.Rows.Add("Scarf", 290, 140)
        dt.Rows.Add("Belt", 150, 400)
        ViewState("dt") = dt
        BindGrid(dt, False)
    End If
End Sub
 
Private Sub BindGrid(dt As DataTable, rotate As Boolean)
    gvCustomers.ShowHeader = Not rotate
    gvCustomers.DataSource = dt
    gvCustomers.DataBind()
    If rotate Then
        For Each row As GridViewRow In gvCustomers.Rows
            row.Cells(0).CssClass = "header"
        Next
    End If
End Sub
 
 

Rotate / Flip / Transpose GridView Columns to Rows and Rows to Columns

Here, I am making use of two DataTables, one the original one from ViewState variable and other one I would use to store the rotated / flipped / transposed rows.
Finally, the rotated / flipped / transposed DataTable is bound to the ASP.Net GridView Control.
C#
protected void Convert(object sender, EventArgs e)
{
    DataTable dt = (DataTable)ViewState["dt"];
    if ((sender as Button).CommandArgument == "1")
    {
        btnConvert1.Visible = false;
        btnConvert2.Visible = true;
        DataTable dt2 = new DataTable();
        for (int i = 0; i <= dt.Rows.Count; i++)
        {
            dt2.Columns.Add();
        }
        for (int i = 0; i < dt.Columns.Count; i++)
        {
            dt2.Rows.Add();
            dt2.Rows[i][0] = dt.Columns[i].ColumnName;
        }
        for (int i = 0; i < dt.Columns.Count; i++)
        {
            for (int j = 0; j < dt.Rows.Count; j++)
            {
                dt2.Rows[i][j + 1] = dt.Rows[j][i];
            }
        }
        BindGrid(dt2, true);
    }
    else
    {
        btnConvert1.Visible = true;
        btnConvert2.Visible = false;
        BindGrid(dt, false);
    }
}
 
VB.Net
Protected Sub Convert(sender As Object, e As EventArgs)
    Dim dt As DataTable = DirectCast(ViewState("dt"), DataTable)
    If TryCast(sender,Button).CommandArgument = "1" Then
        btnConvert1.Visible = False
        btnConvert2.Visible = True
        Dim dt2 As New DataTable()
        For i As Integer = 0 To dt.Rows.Count
            dt2.Columns.Add()
        Next
        For i As Integer = 0 To dt.Columns.Count - 1
            dt2.Rows.Add()
            dt2.Rows(i)(0) = dt.Columns(i).ColumnName
        Next
        For i As Integer = 0 To dt.Columns.Count - 1
            For j As Integer = 0 To dt.Rows.Count - 1
                dt2.Rows(i)(j + 1) = dt.Rows(j)(i)
            Next
        Next
        BindGrid(dt2, True)
    Else
        btnConvert1.Visible = True
        btnConvert2.Visible = False
        BindGrid(dt, False)
    End If
End Sub
 
 

GridView CSS

<style type="text/css">
    .Grid td
     {
        background-color: #eee;
        color: black;
        font-family: Arial;
        font-size: 10pt;
        line-height: 200%;
        cursor: pointer;
        width: 100px;
 
    }
    .header
     {
        background-color: #6C6C6C !important;
        color: White !important;
        font-family: Arial;
        font-size: 10pt;
        line-height: 200%;
        width: 100px;
        text-align: center;
 
    }
</style>
 
 

Screenshot

Rotate ASP.Net GridView - Convert GridView Columns to Rows and Rows to Columns
 
 

Demo

View Demo
 
 

Downloads

Download Code