Collapsible Form Field Sets

[curiousgally]

I'm trying to achieve something like in the attached image. Anybody has done this before.

I see two approaches to it:

1) Using sectionStack: Knock of all the images involved for headers etc, change background header color, images, remove borders etc..will help a bit. Not sure if this would suffice.

2) TreeGrid: Is it possible to add Form Groups to a tree.

Somebody can guide me on the easiest possible way to achieve this.

Thanks.

[curiousgally]

I'm trying to get rid of the small 10px group border to the left of the Group Title. Through rendered HTML and CSS, I could see that it's rendering because Left:10px which is causing this. How do i remove the gap so that Group border looks similar to in the image. Making this setting to 0px and removing Left-padding to GroupLabel will look like what is in the image. I know padding can be knocked off based on entry in the Style css file but how about the 10px setting.

Also any input on achieving the opener/closer functionality shown in the attached image.

Thanks.

[Isomorphic]

#1 is probably the easier approach. You can skin the SectionStack to look like the open/close icon plus the top line, plus an elbow at the end of the line in open state, which can connect with a border created by the component being revealed. Use the StretchImg-based isc.SectionHeader class as your base class for skinning. In the open state, the right-side end cap of the SectionHeader media should be the elbow shape.

[stonebranch1]

Did you ever come to a solution? I was wanting to do the exact same thing with the form grouping. I like the grouping and it really separates out different aspects of our form in a nice way. It would be excellent if there was an option to be able to open/close it.

[curiousgally]

stonebranch1,

We ended up with a custom component having an image (for the + and - effect) and a layout box with a border to achieve the result. I no longer have access to the code we had and so really don't remember the exact details.

Thanks.