Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Display Rows as Columns in Gridview in Asp.net using C#, VB.NET

Jan 23, 2013
Introduction:

Here I will explain how to display
gridview columns as rows in asp.net or display gridview rows as columns in asp.net using C# and VB.Net.

Description:

In previous post I explained jQuery Rating example in asp.net, SQL Query to get latest unique records, SQL Server Get records without weekends,
save or upload files to server in asp.net, Download files folder in asp.net and many articles relating to asp.net, gridview, SQL Server. Now I will explain how to display gridview columns as rows in asp.net.

If you want change columns as rows we need to write code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Convert Gridview Columns as Rows in Asp.net</title>
<style type="text/css">
body
{
font-family:Calibri;
}
.gridcss
{
background:#df5015;
font-weight:bold;
color:White;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td><b>Normal Gridview</b></td>
<td>&nbsp;&nbsp;</td>
<td><b>Converted Gridview</b></td>
</tr>
<tr>
<td>
<asp:GridView ID="gvnormal" runat="server">
<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
</asp:GridView>
</td>
<td>&nbsp;&nbsp;</td>
<td>
<asp:GridView ID="gvconverted" runat="server" OnRowDataBound=gvconverted_RowDataBound>
</asp:GridView>
</td>
</tr>
</table>
</form>
</body>
</html>
Now in code behind add following namespace references

C# Code

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
After that write the following code in code behind


protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridviewData();
}
}
protected void BindGridviewData()
{
DataTable dt = new DataTable();
dt.Columns.Add("UserId", typeof(Int32));
dt.Columns.Add("UserName", typeof(string));
dt.Columns.Add("Education", typeof(string));
dt.Columns.Add("Location", typeof(string));
DataRow dtrow = dt.NewRow();    // Create New Row
dtrow["UserId"] = 1;            //Bind Data to Columns
dtrow["UserName"] = "SureshDasari";
dtrow["Education"] = "B.Tech";
dtrow["Location"] = "Chennai";
dt.Rows.Add(dtrow);
dtrow = dt.NewRow();               // Create New Row
dtrow["UserId"] = 2;               //Bind Data to Columns
dtrow["UserName"] = "MadhavSai";
dtrow["Education"] = "MBA";
dtrow["Location"] = "Nagpur";
dt.Rows.Add(dtrow);
dtrow = dt.NewRow();              // Create New Row
dtrow["UserId"] = 3;              //Bind Data to Columns
dtrow["UserName"] = "MaheshDasari";
dtrow["Education"] = "B.Tech";
dtrow["Location"] = "Nuzividu";
dt.Rows.Add(dtrow);
gvnormal.DataSource = dt;
gvnormal.DataBind();
gvconverted.DataSource = ConvertColumnsAsRows(dt);
gvconverted.DataBind();
gvconverted.HeaderRow.Visible = false;
}
protected void gvconverted_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Cells[0].CssClass = "gridcss";
}
}
// This function is used to convert columns to rows
public DataTable ConvertColumnsAsRows(DataTable dt)
{
DataTable dtnew=new DataTable();
//Convert all the rows to columns
for (int i = 0; i <= dt.Rows.Count; i++)
{
dtnew.Columns.Add(Convert.ToString(i));
}
DataRow dr;
// Convert All the Columns to Rows
for (int j = 0; j < dt.Columns.Count; j++)
{
dr = dtnew.NewRow();
dr[0] = dt.Columns[j].ToString();
for (int k = 1; k <= dt.Rows.Count; k++)
dr[k] = dt.Rows[k - 1][j];
dtnew.Rows.Add(dr);
}
return dtnew;
}
VB.NET Code


Imports System.Data
Imports System.Web.UI.WebControls

Partial Class Default2
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
BindGridviewData()
End If
End Sub
Protected Sub BindGridviewData()
Dim dt As New DataTable()
dt.Columns.Add("UserId", GetType(Int32))
dt.Columns.Add("UserName", GetType(String))
dt.Columns.Add("Education", GetType(String))
dt.Columns.Add("Location", GetType(String))
Dim dtrow As DataRow = dt.NewRow()
' Create New Row
dtrow("UserId") = 1
'Bind Data to Columns
dtrow("UserName") = "SureshDasari"
dtrow("Education") = "B.Tech"
dtrow("Location") = "Chennai"
dt.Rows.Add(dtrow)
dtrow = dt.NewRow()
' Create New Row
dtrow("UserId") = 2
'Bind Data to Columns
dtrow("UserName") = "MadhavSai"
dtrow("Education") = "MBA"
dtrow("Location") = "Nagpur"
dt.Rows.Add(dtrow)
dtrow = dt.NewRow()
' Create New Row
dtrow("UserId") = 3
'Bind Data to Columns
dtrow("UserName") = "MaheshDasari"
dtrow("Education") = "B.Tech"
dtrow("Location") = "Nuzividu"
dt.Rows.Add(dtrow)
gvnormal.DataSource = dt
gvnormal.DataBind()
gvconverted.DataSource = ConvertColumnsAsRows(dt)
gvconverted.DataBind()
gvconverted.HeaderRow.Visible = False
End Sub
Protected Sub gvconverted_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Cells(0).CssClass = "gridcss"
End If
End Sub
' This function is used to convert columns to rows
Public Function ConvertColumnsAsRows(ByVal dt As DataTable) As DataTable
Dim dtnew As New DataTable()
'Convert all the rows to columns
For i As Integer = 0 To dt.Rows.Count
dtnew.Columns.Add(Convert.ToString(i))
Next
Dim dr As DataRow
' Convert All the Columns to Rows
For j As Integer = 0 To dt.Columns.Count - 1
dr = dtnew.NewRow()
dr(0) = dt.Columns(j).ToString()
For k As Integer = 1 To dt.Rows.Count
dr(k) = dt.Rows(k - 1)(j)
Next
dtnew.Rows.Add(dr)
Next
Return dtnew
End Function
End Class
After that run your application output would be like this

Demo

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

16 comments :

Anonymous said...

:)

-Jack

Roopesh Jain said...

Sir i want to show latest update on the top of grid view means at 1 no. how chould i....???

Sarvesh said...

How To Add pazing in Data List Control
and how to repeate grid record in coll um wise with pazing please sir tell me how can i implement this i will still wait your response. My mail is
sarvesh-it@hotmail.com please sir my project is in the pending.

Unknown said...

sir I want swap row and Columns in gridview
In case We us Eval() for bind
heap plz sir..........

Unknown said...

Sir I want to show show result format Pl help me how can do it

Anonymous said...

false solution

Anonymous said...

If I want to display data from Database table not our own data.. as you did in above example. how could we do..?

Unknown said...

sir i need your help so can you give me your no..

sir, my no. is 08906060343 so call me or missed calls me....

Unknown said...

Hi Suresh,
I have a gridview in which data shuld be coming from 3 tables. The header should be displayed horizontally as well as vertically.To be more clear pl have a look below:
Class/Subject Class 5 Class 6 Class 7
abcd 66 62 56 Delete
efg 77 77 55 Delete
rst 56 87 98 Delete


The values are in 3 different tables:subject,mark,class; which have details subjectid,subject in subject; classid, classname in class; markid, classid,subjectid,marks in mark.


How to do it..And also i want to dynamically add rows of the same format.I used pivot bt when i add rows, it takes the sum of the marks for the corresponding class and subject.
Pl help..

Unknown said...

Any idea how to achieve this result with java ?

Anonymous said...

thanks suresh ,

but my requirement is that, i want to convert a single row data in to a column .

Unknown said...

Hi
I wanted to load vertical columns in grid view with data's coming from database... And further edit, update in gridview.. Please help me

Unknown said...

Code is good but How to increase column width which are converted from rows . I am using windows form

Unknown said...

If I want to do this for the value coming from database then how to do?

Anonymous said...

Hi i want to dispaly below data in the below format.first one is input datatable.second one is output.plz help me.i tried the above one but i am getting errors like no column @index 4.

Name Marks Subject
Ramu 90 English
Ramu 80 Hindi
Ramu 10 Telugu
Raju 50 English
Raju 60 Hindi
Raju 30 Telgu


Subject Ramu Raju
English 90 50
Hindu 80 60
Telugu 70 80

Anonymous said...

very nice
I reaiily enjoyed with this article

Thank you suresh ji

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.