Display ASP.NET GridView inside a selected row in another GridView

Question

I have been given a mockup that I do not know is possible to code in ASP.NET without being a real html and javascript wizard.

I want a GridView that when a row is selected, the selected row expands and below the selected row a panel of additional information is shown, which would also include another small GridView. The idea is this would all be in-line. So if the user selected row 4, then the additional information would appear below row 4 and then after the additional information the parent GridView would continue with row 5.

Ultimately I would want to do a multi-select type of set up, but first I need to figure out if this is even possible. Also, the solution must be 508 Compliant

The one solution I considered was using only one "column". Then I would put all my fields in the ItemTemplate, and my detail panel content in the EditItemTemplate and instead of selecting the row, set it to edit mode. The problem with this solution is I lose the functionality of multiple columns if I throw everything in one huge ItemTemplate.

Any and all suggestions or ideas are appreciated.

Answer 1

I've done this using a gridview inside a ListView and using ajaxcontroltoolkit collapsible panel

Your parent list would be a listview that would have 2 table rows for each item, on the first row your parent column, on the second row use colspan and add a gridview wrapped on a collapsible panel

Answer 2

What you're describing would be best fulfilled with a ListView control. It takes a little more templating work to set up than a grid view, but you have much more control over it and you can emulate the look of a GridView. You would set your Selected Item template to contain another ListView (or GridView) thats bound to your detailed data.