How do you exclude specific columns from child rows within in an AdvancedDataGrid when displaying hierarchial data?

Question

I have an AdvancedDataGrid that is displaying information in a hierarchical fashion; a list of sites and their associated sub areas.

The data structure is:

public interface ISite
{
    function get displayName():String
    function get siteCode():String
    function get name():String
    function get subAreas():ArrayCollection
}

public interface ISubArea
{
    function get displayName():String
    function get siteCode():String
    function get name():String
    function get subAreaCode():String
}

There are three total pieces of information that I want to display within the grid. At the root of the tree I want to show the Site's displayName. For the SubArea'S I want to display two columns, one for siteCode and the other for name.

I have gotten pretty close unfortunately all three columns are displayed in the child rows. I have not figured out how to remove the Site's displayName column from the child rows.

Any thoughts about how to do this? Here is a screen grab depicting the results so far and annotated with the desired result. The MXML code that is producing this result can be found after the image.

enter image description here

<mx:AdvancedDataGrid width="100%" height="100%" showHeaders="false" textAlign="left">
    <mx:dataProvider>
        <mx:HierarchicalData source="{pmodel.sites}" childrenField="subAreas"/>
    </mx:dataProvider>
    <mx:columns>
        <mx:AdvancedDataGridColumn dataField="displayName"/>
        <mx:AdvancedDataGridColumn dataField="siteCode"/>
        <mx:AdvancedDataGridColumn dataField="name"/>
    </mx:columns>
    <mx:rendererProviders>
        <mx:AdvancedDataGridRendererProvider 
            depth="1" 
            columnIndex="0" 
            columnSpan="0" 
            renderer="mx.controls.advancedDataGridClasses.AdvancedDataGridGroupItemRenderer"/>
    </mx:rendererProviders> 
</mx:AdvancedDataGrid>

score 2 · Accepted Answer · answered Jul 05 '12 at 15:48

I found a very simple and workable solution to this problem.

Set the width of the first column (displayName) to zero to "hide" that column within the data grid. Use the AdvancedDataGridRendererProvider to configure that column to span all columns at the root of the data grid. The text for the first column will still display at the root due to spanning multiple columns and will be hidden at all other depths in the data grid.

<mx:AdvancedDataGrid width="100%" height="100%" showHeaders="false" textAlign="left">
    <mx:dataProvider>
        <mx:HierarchicalData source="{pmodel.sites}" childrenField="subAreas"/>
    </mx:dataProvider>
    <mx:columns>
        <mx:AdvancedDataGridColumn dataField="displayName" width="0"/>
        <mx:AdvancedDataGridColumn dataField="siteCode"/>
        <mx:AdvancedDataGridColumn dataField="name"/>
    </mx:columns>
    <mx:rendererProviders>
        <mx:AdvancedDataGridRendererProvider 
            depth="1" 
            columnIndex="0" 
            columnSpan="0" 
            renderer="mx.controls.advancedDataGridClasses.AdvancedDataGridGroupItemRenderer"/>
    </mx:rendererProviders> 
</mx:AdvancedDataGrid>

How do you exclude specific columns from child rows within in an AdvancedDataGrid when displaying hierarchial data?

1 Answers1