CodeSnip: Pivot Tables with ADO.NET and Display in a DataGrid Paged Horizontally
Published: 04 Oct 2004
Unedited - Community Contributed
This article describes a simple method to pivot a DataTable producing rows for each column and a column for each row. The pivoted DataTable is then displayed in a DataGrid using horizontal paging to view a limited number of Columns in each page. This is a common display technique used to compare, for instance, product features, where the product names appear across the top of the DataGrid with the Features listed down the side.
by Steve Sharrock
Average Rating: 
Views (Total / Last 10 Days): 113819/ 165


[Download Code]
I was recently asked by a client to prototype a DataGrid showing a feature comparison of several products. The underlying database table contained a row for each product with columns that describe the product name and the various attributes and features of the product.

Like many online comparison grids, the client wanted the products listed across the top horizontally, with the features and attributes listed vertically with their description down the left side. Since there were a large number of products, the desire was to navigate horizontally to each subset of products while keeping the feature names anchored in the first column of the DataGrid. For consistency within the site, the client also wanted the selection of Products to use paging, rather than horizontal scrolling.

The first step is to pivot the table such that each column represents the product name found in the first column of each row of the input table, and each row represents the individual features of all products from the original table's columns. One solution might be to implement this transform as a stored procedure on the database server, and indeed there are several references available for this. However, I was using a Web Service to obtain the product data in the form of a DataSet, so my solution simply required me to pivot the appropriate table from the DataSet. This is a fairly straight-forward transform detailed in the next page of this article.

The next step is to create a DataGrid that navigates horizontally to the selected set of products, while anchoring the first column that contains the description of each feature. The choice was to either prune the pivoted table of all unwanted columns for each page change letting the DataGrid bind all columns or dynamically create the DataGrid for each page specifying the appropriate BoundColumns. The latter approach is outlined in the third page of this article.

A link is provided at the top of each page to download the source code for the demo of these techniques. Use the link below to view a very simple demonstration version of this prototype that shows the raw input table, the complete pivot table, and the final paged comparison DataGrid.

View Pivot Table DataGrid Demo

The next page outlines the steps I used to pivot the DataTable containing the Product rows in preparation for binding the DataGrid.

Pivot DataTable

[Download Code]
The output of the pivot method is a new DataTable with one row for each column of the input table, and one column for each Product represented by the rows of the input table. To simplify this example, we assume that the "Product" column is the first column of each row (Column[0]), and the remaining columns represent the features.

The first step is to create the new DataTable and its schema from the rows of the input table. The first column is for the Feature description, and the remaining columns are the Product names found in each row of the input. In the following code snippet, source refers to the input table and dest is the new pivoted table.

DataTable dest = new DataTable("Pivot" + source.TableName ); 
// 1st column is for the feature descriptions 
dest.Columns.Add( "Features" );
// the remaining columns are Product Description 
// from each source table row (1st column) 
foreach( DataRow r in source.Rows ) 
dest.Columns.Add( r[0].ToString() ); 
// assign each row the Product name 

Now that we have the appropriate columns defined in the schema of the destination table, the next step is to create a DataRow for each feature defined in the columns of the source table, excluding the first column representing the Product name.

for( int i = 0; i < source.Columns.Count - 1; i++ ) 
dest.Rows.Add( dest.NewRow() ); 

The final step is the actual transform of the columns from the source rows into the destination table. Since each table now represents a two dimensional array of its rows and columns, a very simple transform of all columns and rows could be performed by the following nested for loop.

for( int r = 0; r < dest.Rows.Count; r++ ) 
for( int c = 0; c < source.Columns.Count; c++ ) 
dest.Rows[r][c] = source.Rows[c][r]; 

However, this simple loop doesn't account for the first column of the destination representing the Feature description from the source columns. So we modify the code slightly as shown in this code snippet.

for( int r = 0; r < dest.Rows.Count; r++ ) 
for( int c = 0; c < source.Columns.Count; c++ ) 
if ( c == 0 ) dest.Rows[r][0] = source.Columns[r + 1].ColumnName; 
else dest.Rows[r][c] = source.Rows[c - 1][r + 1]; 

Now that we have our pivoted DataTable ready to display, we could simply bind it to a DataGrid; however, our client wants the DataGrid to page, rather than scroll horizontally to show a limited number of products on each page. The technique used to implement this feature is illustrated on the next page.

Create the DataGrid

[Download Code]
The client wants to navigate thru the DataGrid Products horizontally and anchor the first column containing the Feature descriptions. We could implement horizontal scrolling using a DIV tag, but anchoring the first column becomes more problematic. Since our client wants to Page thru the Products, we can simply bind the appropriate columns to the DataGrid based on the DataGrids's current PageIndex. Since the DataGrid doesn't really support this type of paging, we'll implement our own Page navigation buttons, and maintain the current PageIndex in the ViewState.

In the code snippets below, assume there is a "Previous Page" button named prevBtn, and a "Next Page" button named nextBtn. There is also a property named PageIndex that maintains the currently selected page index and is set when the previous and next buttons are clicked. When the page loads the first time, the PageIndex is set to zero and the BindHorzGrrd method is called. In subsequent PostBacks, the nextBtn and prevBtn modify the current PageIndex and then call the BindHorzGrid method.

The first part of the BindHorzGrid method simply sets up some values that we'll need to decide which columns should be displayed for the current PageIndex. We also enable/disable our navigation buttons depending on the presence of either previous pages or next pages.

private void BindHorzGrid() 
const int pageSize = 3; 
// constant number of columns displayed in each page 
int colCount = pivotTbl.Columns.Count - 1; 
int pageMax = colCount / pageSize; 
if ( PageIndex >= pageMax ) PageIndex = pageMax; 
else if ( PageIndex < 0 ) PageIndex = 0; 
prevBtn.Enabled = ( PageIndex > 0 ); 
nextBtn.Enabled = ( PageIndex < pageMax ); 

The remainder of this method creates the DataGrid's BoundColumns that reflect the correct columns from our pivoted DataTable. We first clear the Columns collection and then add the first column representing the Features. The remaining columns are added starting with the (zero based) PageIndex * pageSize (number of columns per page). The final step is to supply the DataSource and then DataBind the grid and our pivot table.

// frist create the "anchored" column[0] -- Product 
BoundColumn c = new BoundColumn(); 
c.HeaderText = pivotTbl.Columns[0].ColumnName; 
c.HeaderStyle.Font.Bold = true; 
c.DataField = pivotTbl.Columns[0].ColumnName; 
c.ItemStyle.Font.Bold = true; 
pageGrid.Columns.Add( c ); 
// now create the bound columns for this page's set of columns 
int count = 0; 
for( int i = PageIndex * pageSize; count < pageSize && i < colCount; i++, count++ )
c = new BoundColumn(); 
c.HeaderStyle.Width = Unit.Pixel( 100 ); 
c.ItemStyle.Width = Unit.Pixel( 100 ); 
c.HeaderText = pivotTbl.Columns[ i + 1 ].ColumnName; 
c.DataField = pivotTbl.Columns[ i + 1].ColumnName; 
pageGrid.Columns.Add( c ); 
// now bind the grid to our new bound columns 
pageGrid.DataSource = pivotTbl; 

If you download the source code, you'll see that I depend on formatting the columns using the DataGrid's ItemDataBound event handler. Since all of the pivot table's DataColumns are of type String, I may need to parse the data value depending on the Column being bound.


[Download Code]
This is only one of many approaches to solve this problem. I like this approach because it is quick and easy to implement. My client was able to integrate the prototype demo using their  live data with very little effort. Perhaps in the future I may generalize this into a User Control or Custom Control.

Use the link below to view a simple demonstration version of the Pivot Table and Horizontal Paged DataGrid.

View Pivot Table DataGrid Demo

User Comments

Title: Resuelto facil   
Name: Demo Atencia
Date: 2013-01-09 2:41:23 AM
Protected Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
Dim tabla As DataTable
Dim tablapersonas As DataTable
tablapersonas = objcl.Lista_Personas_Bono(cboProyectos.SelectedValue)
'tabla=objeto datatable
GridView1.DataSource = PivotTable(tabla)

End Sub
Public Function PivotTable(ByVal [source] As DataTable) As DataTable
Dim dest As New DataTable("Pivoted" + [source].TableName)

dest.Columns.Add(" ")

Dim r As DataRow
For Each r In [source].Rows
Next r
Dim i As Integer
For i = 0 To ([source].Columns.Count - 1) - 1
Next i

For i = 0 To dest.Rows.Count - 1
Dim c As Integer
For c = 0 To dest.Columns.Count - 1
If c = 0 Then
dest.Rows(i)(0) = [source].Columns((i + 1)).ColumnName
dest.Rows(i)(c) = [source].Rows((c - 1))((i + 1))
End If
Next c
Next i
Return dest
End Function 'PivotTable

mas simple ni en la china... saludos
Title: Web Team   
Name: Mani Maran M
Date: 2012-09-24 12:14:49 AM
This is really super.Thanks a lot for publishing this article....
Title: Broken source data link   
Name: Sebastian
Date: 2012-06-06 7:09:49 PM
Hoping to see an answer could you please upload again and reload the source data link please.
Title: Missing source data   
Name: Sierk
Date: 2012-05-10 4:21:57 PM
I know this is old, but the link to the source data is no longer available and I am trying to figure out what the source.TableName from DataTable dest = new DataTable("Pivot" + source.TableName ); is. Could you have the source code restored or add the missing parts?

Title: Can U attach source code please   
Name: punk
Date: 2010-07-25 10:09:52 AM
Can U attach souce code please, cos, there's an error on Download Code link.
Title: Some extra tools   
Name: redbull
Date: 2010-02-12 10:07:41 PM
Title: Attachable to a queried datasource?   
Date: 2009-10-29 11:13:48 AM
Thank for the informative article, though I do have one question. In your example, you've embedded your sample data in the code file. What needs to be changed to make use of this with a SqlDataSource instead of the embedded DataTable.

Thank you again.
Title: Display Coffee Table   
Date: 2009-08-11 9:08:46 AM
Hello. Thanks for the guide. But why it always say that there's an error?!. Thanks and have a nice day. :)
Title: plz help anyone   
Name: sachin kumar
Date: 2008-09-25 3:17:32 AM
Just I want that data come from any data source but my datagrid heading column name will come in xml data file
Title: I cannot be the only one to get this error   
Name: Ralphxyz
Date: 2008-09-11 10:46:02 AM
Parser Error Message: Could not load type 'Pivot.Demo'.

Where oh where is "Pivot.Demo"

Certainly not in in the code download!
Title: display image problem   
Name: Rajeev Gangwar
Date: 2008-05-13 4:15:27 AM
Please tell me is there any option for binding the image in the datagrid using pivot table. thanks
Title: Asp.Net(C#)   
Name: Rajasekar
Date: 2008-03-12 9:26:40 AM
I need to bind the Repeated columns values in Single Columns
Title: Not useful to show images   
Name: garima
Date: 2008-01-28 4:04:44 AM
how can we retrieve images from database and display on a grid page with the help of pivot table.
Title: Not Useful in Real World   
Name: Ron Jeremy
Date: 2007-11-27 8:53:25 PM
WHo has pivot tables that don't have fields of the same value? You sample doesn't support datafields that have the same values for multiple fields.

The concept is OK, but you need to add some logic.
Title: Problem where the left col has multple of same values   
Name: Lee
Date: 2007-08-24 5:10:45 PM
Great for very basic pivots. however i have data like this.
Date Qty failure
2007-04-23 2 Damaged Leads
2007-04-23 120 Improper fillet
2007-04-23 34 Non-wetting
2007-04-23 7 Solder missing
2007-04-23 1 Imp hardware mounting
2007-04-23 3 CONTAM
need to see as
Damaged Leads 2
Improper fillet 120
Non-wetting 34
Solder missing 7
Imp hardware mounting 1
Title: ASP.NET 2.0 Code   
Name: Alloyd
Date: 2007-05-27 7:17:59 PM
Were would I get VB.Net version of the code to use on an ASP.NET page. I have used a C to VB conversion utility to convert the code, but I have a type mis-match I can't solve in the BindHorzGrid Sub. Here CodeSnip:

' frist create the "anchored" column[0] -- Product
Dim c As BoundColumn = New BoundColumn()
c.HeaderText = pivotTbl.Columns(0).ColumnName
c.HeaderStyle.Font.Bold = True
c.DataField = pivotTbl.Columns(0).ColumnName
c.ItemStyle.Font.Bold = True

The type mis-match error is:

"Value of type 'System.Web.UI.WebControls.BoundColumn' cannot be converted to 'System.Web.UI.WebControls.BataControlField'"
Title: special case   
Name: Ali
Date: 2007-04-18 2:08:24 AM
Nice article. But there is a problem when you have repeated columns (repeated products)
Title: CodeSnip: Pivot Tables with ADO.NET and Display in a DataGrid Paged Horizontally   
Name: Donna
Date: 2007-01-23 3:13:43 PM
Excellent!! Thanks for the version, this works great!
Title: CodeSnip: Pivot Tables with ADO.NET and Display in a DataGrid Paged Horizontally   
Name: PJackson
Date: 2006-11-18 9:51:50 AM
Thanks. I like the simplicity. PJ
Title: great pivot table   
Name: CSutherland
Date: 2006-11-06 1:34:47 PM
Hey thanks for the great article!
I'm trying to do something exactly like this and its a great example you have. Props!
Title: Great   
Name: APetcu
Date: 2006-09-13 3:52:08 AM
Plain and simple. Thanks!
Title: ok   
Name: mgv
Date: 2006-09-01 4:28:45 AM
not upto the mark try somewhat and get a better ones .
Title: Great article   
Name: Stephan
Date: 2006-07-07 6:09:08 AM
Steve, thank you for this article. It was of great help to me. This saved me time to program something simular
Title: hello   
Name: great
Date: 2006-04-04 2:02:11 AM
it works!
Title: Indian   
Name: KiranKumar.P
Date: 2006-03-28 12:29:57 PM
thank you steve sharrock. Its very useful code for .net developers;
Title: Software Engineer   
Name: John McPherson
Date: 2006-03-06 2:57:09 PM
I'm relatively new at and but I found what I was looking for...

Thank you.


"Sufficiently advanced technology is indistinguishable from magic." - Arthur C. Clark, inventor of the telecommunications satellite
Title: JavaScript Pivot Tables   
Name: Nick
Date: 2006-02-04 7:35:22 PM
For an example of how to rearrange multidimensional tables using JavaScript, check out
Title: version of the pivot table function   
Name: Chris
Date: 2005-12-20 11:25:58 AM
Here is the version of the pivot table function:

Public Function PivotTable(ByVal source As DataTable) As DataTable
Dim dest As DataTable = New DataTable("Pivoted" + source.TableName)

' create shchema (string columns) for the destination
' the first column is for the source column name
dest.Columns.Add(" ")

' the remaining dest columns are from each source table row (1st column)
Dim r As DataRow
For Each r In source.Rows

' now add one row to the dest table for each column in the source, except
' the first which is the Product, in our case
Dim i As Integer
For i = 0 To source.Columns.Count - 1 - 1 Step i + 1

' now move the source columns to their position in the dest row/cell matrix
' starting down the destination rows, and across the columns
Dim rr As Integer = 0
Dim c As Integer = 0
For rr = 0 To dest.Rows.Count - 1 Step rr + 1
For c = 0 To dest.Columns.Count - 1 Step c + 1
If c = 0 Then
dest.Rows(rr)(0) = source.Columns(rr + 1).ColumnName ' the Product name
dest.Rows(rr)(c) = source.Rows(c - 1)(rr + 1)
End If
c = 0
Return dest
End Function
Title: pivot Table demo   
Name: manish punwani
Date: 2005-12-02 7:50:15 AM
this was very helpful
thanks a lot
Title: database conectivity   
Name: arvind
Date: 2005-03-15 12:29:28 PM
how to attach a table of oracle in a aspx page in project.
Title: CodeSnip: Pivot Tables with ADO.NET and Display in a DataGrid Paged Horizontally   
Name: Alejandro Cuellar Gaxiola
Date: 2005-01-28 7:15:50 AM
This is an excellent article showing a very elegant way to pivot a table and how to manage the grid to present the data.
Title: but what about image   
Name: vishal
Date: 2004-12-03 6:42:57 AM
but what about images if i wants to display on the first row.
when i tried and , when i wants to add first row than i am unable to retrieve values from database as i store image in byte() format

how can we retrieve images from database and display on a grid page with the help of pivot table.
Title: VB.NET Code   
Name: Steve
Date: 2004-11-09 8:27:32 AM
Here are a few links to various tools that will convert C# to VB.
Title: VB.NET demo   
Name: Bob
Date: 2004-11-09 7:20:30 AM
Could you supply VB.NET demo code also?

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2018  |  Page Processed at 2018-04-24 8:46:46 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search