<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" creationComplete="onCreationComplete()" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            import mx.collections.*;
            
            private var arrayData:Array=[
                {name:"banana",cat:"fruit",cost:.99,qty:2},
                {name:"bread",cat:"bakery",cost:1.99,qty:3},
                {name:"cheddar cheese",cat:"dairy",cost:4.52,qty:6},
                {name:"sour cream",cat:"dairy",cost:.33,qty:2},
                {name:"orange",cat:"fruit",cost:.52,qty:4},
                {name:"donut",cat:"bakery",cost:.33,qty:12},
                {name:"non-fat yogurt",cat:"dairy",cost:1.99,qty:5},
                {name:"milk",cat:"dairy",cost:2.99,qty:2},
                {name:"apple",cat:"fruit",cost:1.05,qty:4},
                {name:"colby cheese",cat:"dairy",cost:3.05,qty:4}];
                
               [Bindable] private var dp:ArrayCollection = new ArrayCollection(arrayData);
            
            public function onCreationComplete():void
            {
                var sortFields:Array = [new SortField("name", false, false, false)];
                var sort:Sort = new Sort();
                sort.fields = sortFields;
                adg.dataProvider.sort = sort;
                adg.dataProvider.refresh();
                adg.expandAll();
            }
        ]]>
    </mx:Script>
    
    <mx:Style source="summary.css"/>

    <mx:AdvancedDataGrid id="adg" creationComplete="myGroup.refresh()" height="400" verticalScrollPolicy="on"  sort="adg.expandAll()">
    
        <mx:dataProvider>
            <mx:GroupingCollection id="myGroup" source="{dp}">
                <mx:Grouping>
                    <mx:GroupingField name="cat">
                        <mx:summaries>
                            <mx:SummaryRow summaryPlacement="last">
                                <mx:fields>
                                    <mx:SummaryField dataField="qty" operation="SUM" label="summary"   />
                                </mx:fields>
                            </mx:SummaryRow>
                        </mx:summaries>
                    </mx:GroupingField>
                </mx:Grouping>
            </mx:GroupingCollection>
        </mx:dataProvider>
        
        <mx:columns>
              <mx:AdvancedDataGridColumn dataField="name" width="175"/>
              <mx:AdvancedDataGridColumn dataField="cost" width="80"/>
              <mx:AdvancedDataGridColumn dataField="qty" textAlign="right" width="60" paddingRight="27" headerStyleName="header"/>
        </mx:columns>
        
        <mx:rendererProviders>
            <mx:AdvancedDataGridRendererProvider 
                dataField="summary" columnIndex="0" columnSpan="3"
                renderer="renderers.SummaryText" />
        </mx:rendererProviders>
        
  </mx:AdvancedDataGrid>
 
 </mx:Application>