GroupigCollection AdvancedDatagrid

VKN9876
VKN9876 used Ask the Experts™
on
I have an AdvancedDatagrid which allow grouping of columns. I'm able to get the group level summary. How do I get a grant total of columns on the grid for the tree grid. The gand totals are displayed out side the grid component.

My sample code attached
main MXML
=========
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1393" height="920" creationComplete="createData()" >

<mx:Script>
    <![CDATA[
        //Imports
        import mx.collections.ArrayCollection;
        import mx.collections.GroupingField;
        import mx.collections.Grouping;
        import mx.collections.GroupingCollection;   
        import mx.controls.advancedDataGridClasses.*;  
        import mx.collections.IViewCursor
        import mx.collections.SummaryField
        import mx.collections.SummaryObject
        import mx.collections.SummaryRow
        [Bindable]private var QuarterResults:ArrayCollection;
        private function createData():void
        {
            QuarterResults = new ArrayCollection();
            var j:int = 0
            var q:int=0
            for(var i:int=0;i<20;i++)
            {
                var rnd:* = Math.random()*10000
                if(i<10)
                {
                    q=1
                    
                }
                else
                { 
                    q=2
                    
                }
                var lic:Number = Math.round((rnd/1000)*rnd)
                var obj:Object = {Company:"Company"+i,Sales:Math.round(rnd),Licenses:lic,Quarter:"Q"+q}
                QuarterResults.addItem(obj);
                
            } 
            applyGrouping()
        }
        //Group the flat XML data based on Quarter.
        private function applyGrouping():void
        {
          //Make a grouping collection
          var mygroup:GroupingCollection=new GroupingCollection();
          //Set the source to the array collection (this case dataProvider)
          mygroup.source = colgrouped_adg.dataProvider;
          //Create a new grouping
          var group:Grouping = new Grouping();
          //Create a summary row instance
          var sr:SummaryRow = new SummaryRow();
          //Set the summaryObjectFunction
          //This function tells ADG to add a summary row in addition to the existing data
          sr.summaryObjectFunction = objFunc;
          //Set the summary field. The field on which the summary will be calculated.
          var sf:SummaryField = new SummaryField("Licenses");
          //Summary Function - the function that calculates the summary row display
          sf.summaryFunction = func;
          //set the summary rows fields property to summaryField
          sr.fields = [sf];
          //Place the summary row (Last means data First, summary Last!)
          sr.summaryPlacement = "last";
          //Group on Quarter
          var gf:GroupingField = new GroupingField("Quarter");
          //set the summary row(s) to groupingField
          gf.summaries=[sr]
          //Set the fields to the grouping
          group.fields = [gf];
          //Finally, Set the group to the grouping property of groupedCollection
          mygroup.grouping = group;
          //Refresh the group 
          mygroup.refresh();
          //Set the dataProvider to the grouping collection
          colgrouped_adg.dataProvider = mygroup
          //Call validateNow() to redraw the dg.
          colgrouped_adg.validateNow()
    
        }
        private function func(itr:IViewCursor,field:String, str:String=null):Object
        {
            var sum:Number=0
            while(!itr.afterLast)
            {
                //trace(itr.current)
                var value:Number = Number(itr.current.Licenses);
                if(!isNaN(value))
                {
                  sum+= value
                }
                itr.moveNext()
            }
            return sum
        }
        private function objFunc():SummaryObject
        {
            var obj:SummaryObject = new SummaryObject();
            obj.summary = true;
            return obj;
        }
        // Style Function
        public function dataGrid_styleFunction (data:Object, column:AdvancedDataGridColumn) : Object 
        { 
         var output:Object; 

           if ( data.children != null ) 
                  { 
                    output = {color:0x081EA6, fontWeight:"bold",fontSize:14,backgroundColor:0x081EA6} 
                 } 


             return output; 
}

private function myStyleFunction(data:Object, col:AdvancedDataGridColumn):Object
        {
            
             if ( data.children != null ) {
                    return { rowColor:0xFF0000, fontWeight:"bold",color:0x081EA6,fontSize:14 };
            }           
            return {};
        }
        
        private function triggerADGUpdate():void
        {
            colgrouped_adg.itemRenderer=new ClassFactory(ADGItemRendererEx);            
        }

       
    ]]>
</mx:Script>
<mx:VBox width="100%">
    

 <mx:AdvancedDataGrid styleFunction="myStyleFunction" width="600" height="300" dataProvider="{QuarterResults}" id="colgrouped_adg" y="50" itemRenderer="ADGItemRendererEx">
     <mx:columns>
              <mx:AdvancedDataGridColumn dataField="Company"/>
              <mx:AdvancedDataGridColumn dataField="Sales"/>
              <mx:AdvancedDataGridColumn dataField="Quarter"/>
              <mx:AdvancedDataGridColumn dataField="Licenses"/>
     </mx:columns>       
     <mx:rendererProviders>
        <mx:AdvancedDataGridRendererProvider dataField="summary" columnSpan="0" columnIndex="0" renderer="SummaryRenderer"  />
     </mx:rendererProviders>    
  </mx:AdvancedDataGrid>
  <mx:HBox width="100%">
      
      <mx:Label text="Total Sales" width="100"/>
          
      <mx:TextInput id="tsales"/>
      <mx:Label text="Total Licences" width="100"/>
      <mx:TextInput id="tlic"/>
  </mx:HBox>
  </mx:VBox>
</mx:Application>

===============
ADGItemRendererEx.as
=====================
package
{
	import mx.charts.styles.HaloDefaults;
	import mx.controls.advancedDataGridClasses.AdvancedDataGridItemRenderer;
	import mx.styles.CSSStyleDeclaration;

    [Style(name="rowColor", type="uint", format="Color", inherit="yes")] 

	public class ADGItemRendererEx extends AdvancedDataGridItemRenderer
	{

		/**
		 *  @private
		 */
		private static var stylesInited:Boolean = initStyles();
	
		/**
		 *  @private
		 */
		private static function initStyles():Boolean
		{
			HaloDefaults.init();
	
			var ADGItemRendererExStyle:CSSStyleDeclaration =
				HaloDefaults.createSelector("ADGItemRendererEx");
	
			ADGItemRendererExStyle.defaultFactory = function():void
			{
				this.rowColor = 0xFFFFFF;
			}
	
			return true;
		}

		public function ADGItemRendererEx()
		{
			super();
			background = true;
		}
		
		override public function validateNow():void
		{
			backgroundColor = getStyle("rowColor");
			super.validateNow();
		}
		
	}
}
=======================
SummaryRenderer.mxml
======================
<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" width="600" 
	height="26" textAlign="center" fontWeight="bold" color="blue">
	<mx:Script>
		<![CDATA[
			override public function set data(value:Object):void
			{
				super.data = value;
				
				text="Total Licenses: " +value.Licenses
				//backgroundColor =  black;
                 //textColor = 0xFFFFFF
				
			}
		]]>
	</mx:Script>
</mx:Label>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

//.........add this import and variable to bind to
        import mx.events.CollectionEvent;
        [Bindable] private var theTotal:String;

        private function createData():void
        {
            QuarterResults = new ArrayCollection();
//......... listen for changes
            QuarterResults.addEventListener( CollectionEvent.COLLECTION_CHANGE, calcTotals);

//..... add this function, it will be called whedn the array collection changes in some way
private function calcTotals( e:CollectionEvent):void
{
        var tot:Number = 0;
        for each( var o:Object in QuarterResults)
        {
             tot += Number(o.Licenses); // check that this is the correct property 
        }
        this.theTotal = "Total:" + tot.toFixed(0);
}

//.......add this label to show the total
<mx:Label text="{theTotal}" width="100"/>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial