Grouped Gridview With Expandable Groups
===

There are a number of questions around the topic of nesting gridviews or having sub-gridviews. I have considered this approach but it is too much for my purposes. The closest existing question I could find was this one: http://stackoverflow.com/questions/1804282/grouped-gridview

Unfortunately although this has some advice for how to create grouping rows it doesn't go into making them collapsible.

My requirement is that I wish the user to see the gridview with separating rows e.g.

> **- GROUP 1**<br /> Data 1 | Data 2 | Data 3<br /> Data 1 | Data 2 | Data 3<br /> Data 1 | Data 2 | Data 3<br />
> **- GROUP 2**<br /> Data 1 | Data 2 | Data 3<br /> Data 1 | Data 2 | Data 3<br />
> **- GROUP 3**<br /> Data 1 | Data 2 | Data 3<br /> Data 1 | Data 2 | Data 3<br /> Data 1 | Data 2 | Data 3<br /> Data 1 | Data 2 | Data
> 3<br />

So that a user could, if they wished view like this:

> **+ GROUP 1**<br />
> **- GROUP 2**<br /> Data 1 | Data 2 | Data 3<br /> Data 1 | Data 2 | Data 3<br />
> **- GROUP 3**<br /> Data 1 | Data 2 | Data 3<br /> Data 1 | Data 2 | Data 3<br /> Data 1 | Data 2 | Data 3<br /> Data 1 | Data 2 | Data
> 3<br />

Or this:

> **+ GROUP 1**<br />
> **+ GROUP 2**<br />
> **+ GROUP 3**<br />

Essentially all the grouping rows have in them is the title of the group. They're not even really proper Gridview rows. The actual rows are the gridview proper and don't neeed any further drill down capability.

I would like my solution to be workable clientside, I have constraints which are that I can use javascript or jQuery (including jQuery-ui 1.8.8) but cannot arbitrarily expand the number of AJAX toolkits I'm using. I would prefer not to have to manage the state of the page constantly through multiple group expanding postbacks.

Is this something that can be achieved? Could anyone point me in the direction of a resource which might give me a nudge?