Convert Gridview rows to column

Let's 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 will call this method on page load.

For converting Gridview row to column I have created a method Transpose. Now we will do the following in transpose method.

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 the number of rows in dt.
Add columns to the new Datatable newdt (Column Name is passed as blank ).
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.
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, Gridview RowEventArgs e) {
if (e.Row.RowType == DataControlRowType.DataRow) {
e.Row.Cells[0].CssClass = "header";
}
}
}
}

Note: Actually here we are transposing Datatable and binding to Gridview.