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