Display Columns as Rows in GridView in ASP.NET

Introduction

In this article I will describe how to display GridView columns as rows. The purpose is to just flip the data table which is used as a source for the GridView.

Step 1 : Create a web application and add 2 GridViews as below.

Code

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<asp:Label runat="server" ID="ColumnsAsColumns" Text="Columns As Columns" />

<asp:GridView runat="server" ID="gvColumnsAsColumns" />

<asp:Label runat="server" ID="ColumnsAsRows" Text="Columns As Rows" />

<asp:GridView runat="server" ID="gvColumnsAsRows" />

</asp:Content>

Step 2 : In the page load event of the page, create a new DataTable. We can also fill a DataTable from the database. Since I don't need a database for demo purposes, I created my own DataTable.

Code

protected void Page_Load(object sender, EventArgs e)

{

//create new data table

DataTable dt = new DataTable();

//add columns to datatable

dt.Columns.Add("StudentID");

dt.Columns.Add("StudentName");

//create new row and add rows to datatable

DataRow dr = dt.NewRow();

dr["StudentId"] = 100;

dr["StudentName"] = "Santhosh";

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["StudentId"] = 101;

dr["StudentName"] = "Kumar";

dt.Rows.Add(dr);

}

Step 3 : Now we need to flip this DataTable, so that we can get columns as rows.

Code

public static DataTable FlipDataTable(DataTable dt)

{

DataTable table = new DataTable();

//Get all the rows and change into columns

for (int i = 0; i <= dt.Rows.Count; i++)

{

table.Columns.Add(Convert.ToString(i));

}

DataRow dr;

//get all the columns and make it as rows

for (int j = 0; j < dt.Columns.Count; j++)

{

dr = table.NewRow();

dr[0] = dt.Columns[j].ToString();

for (int k = 1; k <= dt.Rows.Count; k++)

dr[k] = dt.Rows[k - 1][j];

table.Rows.Add(dr);

}

return table;

}

The above method will flip columns into rows.

Step 4 : Now I am going to bind the original DataTable to a GridView gvColumnsAsColumns and the flipped DataTable to gvColumnsAsRows. Add the following code in the page_load event.

Code

//Bind datatable with columns as columns

gvColumnsAsColumns.DataSource = dt;

gvColumnsAsColumns.DataBind();

//Bind datatable with columns as rows

gvColumnsAsRows.DataSource = FlipDataTable(dt);

gvColumnsAsRows.DataBind();

gvColumnsAsRows.HeaderRow.Visible = false;

Step 5 : Run the application and see the difference in the GridViews.

For the complete source code, please find the attached solution.