Reader Level:

Display Columns as Rows in GridView in ASP.NET

By Santhosh Kumar Jayaraman on May 12, 2012
In this article I will describe how to display GridView columns as rows.


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.


<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" />


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.


protected void Page_Load(object sender, EventArgs e)


            //create new data table

            DataTable dt = new DataTable();

            //add columns to datatable



            //create new row and add rows to datatable

            DataRow dr = dt.NewRow();

            dr["StudentId"] = 100;

            dr["StudentName"] = "Santhosh";


            dr = dt.NewRow();

            dr["StudentId"] = 101;

            dr["StudentName"] = "Kumar";



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


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++)




            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];




            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.


//Bind datatable with columns as columns

            gvColumnsAsColumns.DataSource = dt;


            //Bind datatable with columns as rows

            gvColumnsAsRows.DataSource = FlipDataTable(dt);


            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.

Santhosh Kumar Jayaraman
Santhosh Kumar Jayaraman

I have been working with Microsoft technologies and am still learning many stuffs in it. I am here to share and learn new things .