how to display total sum of rows in datagrid in flex

I have an AdvanceDataGrid. How can I show the total of each column at the bottom. I am able to calculate the total, and tried displaying them on labels below each column by giving width as column width. But they are not getting aligned properly below each column.

<mx:Label id="TotalMonth" text="{numberFormatter.format(totalMonthAmount)}" width="{colWidth}"/>

Is there a way by which I can assign 开发者_JAVA技巧total to the grid itself instead of using seperate labels below.

You have two options for this. First is to use another advanced data grid, the other is to modify the dataProvider of yours.

Lets say you have arrayCollection of objects of type MockData

    public class MockData
{
    public var value1:Number;
    public var value2:Number;
    public var value3:Number;
    public var value4:Number;
}

The two data grids option should be something like this:

<?xml version="1.0" encoding="utf-8"?>

        protected function getSummedResult(value:Object):ArrayCollection
        {
            var summedResult:MockData = new MockData();
            summedResult.value1 = 0;
            summedResult.value2 = 0;
            summedResult.value3 = 0;
            summedResult.value4 = 0;

            for each (var data:MockData in value as ArrayCollection)
            {
                summedResult.value1 += data.value1;
                summedResult.value2 += data.value2;
                summedResult.value3 += data.value3;
                summedResult.value4 += data.value4;
            }

            return new ArrayCollection([summedResult]);
        }

    ]]>
</fx:Script>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
    <s:ArrayCollection id="mockData">
        <mock:MockData 
            value1="{Math.random() * 10}" 
            value2="{Math.random() * 100}"
            value3="{Math.random() * 1000}"
            value4="{Math.random() * 10000}"/>
        <mock:MockData 
            value1="{Math.random() * 10}" 
            value2="{Math.random() * 100}"
            value3="{Math.random() * 1000}"
            value4="{Math.random() * 10000}"/>
        <mock:MockData 
            value1="{Math.random() * 10}" 
            value2="{Math.random() * 100}"
            value3="{Math.random() * 1000}"
            value4="{Math.random() * 10000}"/>
        <mock:MockData 
            value1="{Math.random() * 10}" 
            value2="{Math.random() * 100}"
            value3="{Math.random() * 1000}"
            value4="{Math.random() * 10000}"/>
        <mock:MockData 
            value1="{Math.random() * 10}" 
            value2="{Math.random() * 100}"
            value3="{Math.random() * 1000}"
            value4="{Math.random() * 10000}"/>
        <mock:MockData 
            value1="{Math.random() * 10}" 
            value2="{Math.random() * 100}"
            value3="{Math.random() * 1000}"
            value4="{Math.random() * 10000}"/>
        <mock:MockData 
            value1="{Math.random() * 10}" 
            value2="{Math.random() * 100}"
            value3="{Math.random() * 1000}"
            value4="{Math.random() * 10000}"/>
    </s:ArrayCollection>
</fx:Declarations>
<mx:VBox>
    <mx:AdvancedDataGrid id="dateGrid" dataProvider="{mockData}" />
    <mx:AdvancedDataGrid rowCount="2"
                         id="dateGrid2" dataProvider="{getSummedResult(dateGrid.dataProvider)}" />
</mx:VBox>

The second option is to use only one grid like this:

<mx:AdvancedDataGrid id="dateGrid" dataProvider="{getSummedResult(mockData)}" />


            protected function getSummedResult(value:Object):ArrayCollection
        {
            var dataProvider:ArrayCollection = ArrayCollection(value);
            var summedResult:MockData = new MockData();
            summedResult.value1 = 0;
            summedResult.value2 = 0;
            summedResult.value3 = 0;
            summedResult.value4 = 0;
            for each (var data:MockData in dataProvider)
            {
                summedResult.value1 += data.value1;
                summedResult.value2 += data.value2;
                summedResult.value3 += data.value3;
                summedResult.value4 += data.value4;
            }

            var result:ArrayCollection = new ArrayCollection(dataProvider.source.concat());
            result.addItem(summedResult);

            return result;
        }

Your personal choice is what will be more helpful. You can modify the data provider if you have setter for it ofc but with binding is pretty simple.

Have fun and good luck.