Vertical GridViews in ASP.net - Part 2a : The general solution

The approach taken was to override the rendering of the standard gridview to give the desired HTML output.

There are 2 main ways you would do this:

1) Create a new control that inherits from GridView and override the methods involved in rendering

or

2) Use a Control Adapter to provide custom rendering

Personally I don't like the idea of method 2 - unless I'm misunderstanding something here it means rely on the browser capability file to apply, and it generally seems that even if we got the required rendering the application of it would be less precise than explicity specifiying which control you are using.

For our custom control - VerticalGridView - the point where we intercept the standard GridView behaviour is function RenderChildren (protected void RenderChildren(HtmlTextWriter writer)).

In a standard GridView this would render to the output Html writer:

- The table header with attributes set based on the properties set on the grid view

- One Table Row (TR) per DataRow in the source data within the parent table (with attributes set based on the properties set on the grid view)

- One Table Cell (TH/TD) per ItemTemplate specified in the markup, rendered within the parent row (with cell type and attributes set based on the properties in the ItemTemplate)

- Closing table tags
Note that this is not a canonical representation of the standard functionality - just detail appropriate to the level that we needed to control for our purposes. For a full view of the code then I'd recommend downloading the free and wonderful RedGate Reflector and disassembling the method in System.Web.UI.WebControls.GridView, and GridViewRow in System.Web.dll

So this is where we rewrite the rules. How exactly we do that to follow shortly


Just to mention to those who don't already know, the vertical grids described here can be seen in action on the front page of http://public.presalesadvisor.com/




Incedentally, just to thank the GiantCodeMonkey himself for the inspiration for the solution, and the permission to write it up

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/