[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.

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.

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.

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.

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.

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.

[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.

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.

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