I did find my answer but I believe there is a bug in the ADG. I'm including a sample of what I did. I don't remember where I found it so sorry for not giving credit for credit due. The issue I have is in scrolling. The ADG does "expand" as I want but when I scroll my code collapses the row back up. Easy enough to handle. I then fixed my code to not collapse the row when scrolling, but when scrolling with the expanded renderer you can find yourself jumping to the top of the list when trying to scroll the expanded section off the page.
To reproduce, run the following code. Resize the browser so that just 1 or 2 of the bottom rows are off the screen and a vertical scroll bar appears. Click one about the third row and it will expand. Then try and scroll the expanded portion off the top of the page. The key is that it will scroll off the top of the screen just fine ONLY IF there are still enough rows below it to fill the DG. If there are not enough rows below the expansion to fill the grid the scrolling then is not working. <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" creationComplete="onCreationComplete()"> <mx:Style> .myTreeGridStyle { folder-closed-icon: ClassReference(null); folder-open-icon: ClassReference(null); defaultLeafIcon: ClassReference(null); disclosure-open-icon: ClassReference(null); disclosure-closed-icon: ClassReference(null); use-roll-over: true; } .expandedInput { left: 15; right: 15; top: 0; bottom: 10; vertical-align: middle; corner-radius: 6; background-color: #c0c0c0; border-style: solid; } </mx:Style> <mx:Script> <![CDATA[ import mx.core.UITextField; import mx.controls.Button; import mx.collections.HierarchicalData; import mx.collections.ArrayCollection; private var currentSelectedItem : XML = null; private var dgData : XML = <XML> <people> <person fname="Shanda" lname="Lier"> <personData abc="foo" def="bar" ghi="foobar" /> </person> <person fname="Harry" lname="Pits"> <personData abc="foo" def="bar" ghi="foobar" /> </person> <person fname="Leif" lname="Tree"> <personData abc="foo" def="bar" ghi="foobar" /> </person> <person fname="Rocky" lname="Canyon"> <personData abc="foo" def="bar" ghi="foobar" /> </person> <person fname="Shanda" lname="Lier"> <personData abc="foo" def="bar" ghi="foobar" /> </person> <person fname="Harry" lname="Pits"> <personData abc="foo" def="bar" ghi="foobar" /> </person> <person fname="Leif" lname="Tree"> <personData abc="foo" def="bar" ghi="foobar" /> </person> <person fname="Rocky" lname="Canyon"> <personData abc="foo" def="bar" ghi="foobar" /> </person> <person fname="Shanda" lname="Lier"> <personData abc="foo" def="bar" ghi="foobar" /> </person> <person fname="Harry" lname="Pits"> <personData abc="foo" def="bar" ghi="foobar" /> </person> <person fname="Leif" lname="Tree"> <personData abc="foo" def="bar" ghi="foobar" /> </person> <person fname="Rocky" lname="Canyon"> <personData abc="foo" def="bar" ghi="foobar" /> </person> <person fname="Shanda" lname="Lier"> <personData abc="foo" def="bar" ghi="foobar" /> </person> <person fname="Harry" lname="Pits"> <personData abc="foo" def="bar" ghi="foobar" /> </person> <person fname="Leif" lname="Tree"> <personData abc="foo" def="bar" ghi="foobar" /> </person> <person fname="Rocky" lname="Canyon"> <personData abc="foo" def="bar" ghi="foobar" /> </person> </people> </XML> private function onCreationComplete() : void { myDG.dataProvider = new HierarchicalData(dgData.people.person); } private function onClickGrid(event:MouseEvent) : void { var adg : AdvancedDataGrid = event.currentTarget as AdvancedDataGrid; if ( adg.selectedIndex >= 0 && event.target is UITextField ) { var selectedItem : XML = adg.selectedItem as XML; if ( selectedItem.localName() != "personData" ) { if ( selectedItem == currentSelectedItem ) { callLater(unselectADG, [selectedItem]); } else { if ( currentSelectedItem != null ) { adg.expandItem(currentSelectedItem, false, true); } callLater(expandItem, [selectedItem]); } currentSelectedItem = selectedItem; } else { myDG.selectedItem = currentSelectedItem; } } } private function expandItem(xmlItem:XML) : void { myDG.expandItem(xmlItem, true, true); } private function unselectADG(xmlItem:XML) : void { myDG.expandItem(xmlItem, false, true); currentSelectedItem = null; myDG.selectedIndex = -1; } ]]> </mx:Script> <mx:AdvancedDataGrid id="myDG" width="100%" height="100%" styleName="myTreeGridStyle" variableRowHeight="true" sortExpertMode="true" click="onClickGrid(event)"> <mx:columns> <mx:AdvancedDataGridColumn id="fname" headerText="First Name" dataField="@fname" /> <mx:AdvancedDataGridColumn headerText="Last Name" dataField="@lname" /> </mx:columns> <mx:rendererProviders> <mx:AdvancedDataGridRendererProvider column="{fname}" depth="2" columnSpan="0"> <mx:renderer> <mx:Component> <mx:Canvas width="100%" height="100" backgroundColor="#ffffff"> <mx:HBox styleName="expandedInput"> <mx:TextInput id="abc" text="[EMAIL PROTECTED]" width="33%" /> <mx:TextInput id="def" text="[EMAIL PROTECTED]" width="34%" /> <mx:TextInput id="ghi" text="[EMAIL PROTECTED]" width="33%" /> </mx:HBox> </mx:Canvas> </mx:Component> </mx:renderer> </mx:AdvancedDataGridRendererProvider> </mx:rendererProviders> </mx:AdvancedDataGrid> </mx:Application> --- In flexcoders@yahoogroups.com, "Alex Harui" <[EMAIL PROTECTED]> wrote: > > ADG was developed by another team so I haven't memorized what it can do. > I think there is column span and group header support. > > > > ________________________________ > > From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On > Behalf Of Josh McDonald > Sent: Monday, June 09, 2008 9:53 PM > To: flexcoders@yahoogroups.com > Subject: Re: [flexcoders] Need DataGrid advice > > > > I haven't used ADG so I don't know- but this seems to be an extremely > common request. Although I don't really like the "expanding table row" > paradigm *at all*, is it something that's easy to do with ADG? > > -Josh > > On Tue, Jun 10, 2008 at 2:43 PM, Alex Harui <[EMAIL PROTECTED] > <mailto:[EMAIL PROTECTED]> > wrote: > > Probably true, but in theory, it might be possible in regular DG with > some custom renderers. Individual renderers are not clipped so they can > layout larger than they are told. The first step would be to use > variable rowHeight and get one of the column's renderers to have a > bigger measuredHeight. That should make room vertically. The next step > would be to have all other renderers not actually take up that new > height but just take up their old space, then you can have one renderer > that takes up that remaining space. > > > > ________________________________ > > From: flexcoders@yahoogroups.com <mailto:flexcoders@yahoogroups.com> > [mailto:flexcoders@yahoogroups.com <mailto:flexcoders@yahoogroups.com> ] > On Behalf Of Josh McDonald > Sent: Monday, June 09, 2008 9:17 PM > To: flexcoders@yahoogroups.com <mailto:flexcoders@yahoogroups.com> > Subject: Re: [flexcoders] Need DataGrid advice > > > > Sounds like you need AdvancedDataGrid > > -Josh > > On Tue, Jun 10, 2008 at 2:10 PM, dbronk <[EMAIL PROTECTED] > <mailto:[EMAIL PROTECTED]> > wrote: > > I have a DataGrid with about 5 columns. One of the columns is an > icon. When the icon is clicked, I want a section to appear underneath > that DG row and show a form for inputting more data. This form will > not be in column format, but will span across all the column. When > the icon is clicked again, the "extra" input form will then close up > again. Any advice on building this? I know I can do this using a > repeater, but I'd like to use a DG so that I get the built in sorting, > column resizing/moving, etc. > > Thanks, > Dale > > > > > > > -- > "Therefore, send not to know For whom the bell tolls. It tolls for > thee." > > :: Josh 'G-Funk' McDonald > :: 0437 221 380 :: [EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]> > > > > > -- > "Therefore, send not to know For whom the bell tolls. It tolls for > thee." > > :: Josh 'G-Funk' McDonald > :: 0437 221 380 :: [EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]> >
