[ASP.NET] Expandable Rows on a Gridview

Question

Does anyone have any insight on how to have each row in a Gridview expand to show a DIV or PANEL that has a form of elements, i.e. a simple form of textboxes, etc. I don't need a nested Gridview showing results or using DynamicPopulate.

I have tried some techniques from a DataGrid Expandable Row, but ran into some problems trying to access variables that just aren't a part of the Gridview. Any help would be appreciated. I could essentially do this using the Editable Templates in the Gridview, but I need a much cleaner solution.

Answer 1

If you can afford it, there are many gridview controls that are ajaxified and have the ability to expand each row as needed. I use one set of controls from a company who shall remain nameless (for now) and have been extremely happy with them.

Do a google search on gridview controls.

Answer 2

Have you looked at jQuery?

Answer 3

I have a solution in which I created a extra Gridview Row, then inject a Panel into that row with my elements. Problem is that my CLOSE image keeps disappearing.

Answer 4

Probably inelegant, but I did this by replacing the gridview with a repeater. It still looks like a gridview, but I put an extra row, after each row of data, containing an invisible sub-grid that can be shown via javascript. Obviously, you'd replace the sub-grid with your panel. A bit of a faff on, but it works OK.

Answer 5

http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/twotablesatlevel/defaultcs.aspx

try this

Answer 6

I did something like this recently using the ASP.Net Listview control - you have more control over the generated markup than with a standard Gridview.

Check this post from Matt Berseth.

Answer 7

GridView is terrible for this kind of funcctionality, because it tighly controls its UI. ListView is great for implementing this.

Answer 8

I was able to do this successfully by injecting a div within a div underneath each gridview row created. Once there, I was able to give them unique ids based on the data I was using, call an expand function in javascript, and expand/collapse the divs as I wished.

This is fairly doable with a gridview, but a repeater would also work as well as a simple AJAX implementation returning a table structure.

Here is a very similar example to what I did:

http://www.codeproject.com/KB/ajax/ExpandPanelGridView.aspx?display=Print