How can make column widths bindable in two Flex AdvancedDataGrids?

Question

Bear with me here. I have a strange setup to accomplish what I need. I basically have an AdvancedDataGrid that displays data returned by a WebService. The data is in XML format:

<children label="parent 1" value="3100">
    <children label="child 1" value="1100">
        <children label="grandchild 1" value="200">
        </children>
        <children label="grandchild 2" value="300">
        </children>
        <children label="grandchild 3" value="600">
        </children>
    </children>
    <children label="child 2" value="2000">
        <children label="grandchild 4" value="1200">
        </children>
        <children label="grandchild 5" value="800">
        </children>
    </children>
</children>
<children label="parent 2" value="1000">
    <children label="child 3" value="1000">
        <children label="grandchild 6" value="300">
        </children>
        <children label="grandchild 7" value="700">
        </children>
    </children>
</children>

I convert the XML to a HierarchicalData Object in the WebService result handler. I also dynamically build the columns for the AdvancedDataGrid, since it used to display different columns depending on the user input. However, I also need to display a totals "row" at the bottom of the AdvancedDataGrid. I cannot figure out how to convert my XMLListCollection to a GroupingCollection, and thereby create a totals row this way, so, I actually calculate the totals in the WebService and return this as a node in the XML:

<totals value="4100" />

I use this "totals" data to populate a second AdvancedDataGrid with no headers that sits directly below the first ADG, so that it "appears" to be the "last row" of the first ADG. Both ADGs use the same Bindable columns Array:

<mx:AdvancedDataGrid id="reportADG" dataProvider="{__model.reportData}"
    columns="{__model.adgDrillColumns}" width="100%" height="100%" />

<mx:AdvancedDataGrid id="reportTotalsADG" 
    dataProvider="{__model.reportTotalsData}" 
    folderOpenIcon="{null}" folderClosedIcon="{null}" 
    disclosureClosedIcon="{null}" disclosureOpenIcon="{null}" 
    defaultLeafIcon="{null}" showHeaders="false" 
    selectable="false" rowCount="1" 
    columns="{__model.adgColumns}" width="100%" />

However, if the columns are resized in the first ADG, I can't find a way to have the columns in the second ADG to resize as well. What can I do?

Answer 1

Take a look at this blog post.

Answer 2

You can use the summary row method, or you can create a custom component to display the totals separately. In my case, I had to create a custom component that gets all of the ADG columns, determines their widths, draws vertical lines/separators, and then sums all of the rows and shows a label. It's nice because it's used like this:

<components:DataGridSummaryFooter id="summaryView"
     height="6%" width="100%"
     totalsColumns="{[impressionsCol, estimatedSpendingCol]}"
     dataSource="{dataViewSource}" 
/>

...and the rest is magic!

FYI, the reason I had to create a separate component and not use the summary row was due to the design requirements of this application. In fact, I would hope that it's always done this way, because with the summary rows, you have to scroll all the way to the bottom of the grid to see the summaries, and that's not very good UX.

I hope this helps someone with something at some point! :)

Cheers