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.