Vertical GridViews in ASP.net - Part 1 : The problem

We've recently been working on a new website that involved a lot of focus on the presentation and layout of product data. In one section specifically data on featured products is displayed side-by-side, but up until now we've been content to have each one individually rendered as a child control, with each subsection of the display just flowing on with a line break, meaning that the data was not truly aligned. In the new site we wanted to improve on this, rendering out in a 'comparison-style' grid.

The obvious web control for this sort of data presentation would be a gridview - they render out as HTML tables, and a lot of standard event hookup code already existed in the codebase for use elsewhere. Here we hit the problem; gridviews render out sequentially with a table row per data item, we wanted it to have a column per data item, and of course HTML tables have no conept of a 'column' of data.

This meant that we needed to find a way of presenting data that:

• rendered each data item vertically
• aligned each section of data horizontally
• used the standard gridview event model

After a considerable amount of research online the general consensus seemed to be to 'hack' the data source to rotate the dataset - crosstab style - or.... give up. Neither of these were really an options so what I'll try and detail in the following posts is how we got the grids as they now appear on the font page of http://public.presalesadvisor.net/

Intro - The Dev Blog

OK, I do technically have another personal blog (which hasn't been updated in 4 years), but with some of the code we've cut recently I wanted somewhere to share the occasional snippets of code and idea that are a bit too long for my twitter feed (http://twitter.com/delradie).

Hopefully someone out there will find something on here at least a little useful.

To kick off shortly, vertical (product comparison style) gridviews in asp.net as implemented on http://public.presalesadvisor.net/