Flex Datagrid Column Total

Question

I have a data grid that that has a title, price, qty and total column. The title, price and qty data is loaded from an xml file and the total is populated with a labelFunction to multiply the price by the qty.

I'm able to populate the total for each row with a labelFunction by returning a string to the row under the total column, but I'm having trouble figuring out how to get the overall total for the total column. I'd like to get the overall total and display it in a textBox/somewhere else outside of the datagrid.

I'm able to get the total by using the updateEsimate function, but it'll only send the total using itemEditEnd on the datagrid (which means i'd have to click on eat qty row for it to tally up) and I'd like it to give me the total automatically once it loads.

Help Please!

(some sample code)

        public function updateEstimate(event:DataGridEvent):void
        {
            // TODO Auto-generated method stub

            var sum:Number = 0;

            for(var i:int=0; i<orderGrid.dataProvider.length ; i++) {

                sum += Number(orderGrid.dataProvider.getItemAt(i).total);
                totaltxt.text = sum.toString();

            }

            totaltxt.text = sum.toString();

        }




        public function getTotal(item:Object, column:DataGridColumn):String
        {


            var sum:Number = item.price * item.quantity;

            return sum.toString();


        }

    <mx:XMLListCollection id="xmlProdListColl"
                          source="{productXML.lastResult.offer}"
                          />


</fx:Declarations>
<mx:DataGrid id="orderGrid" x="44" y="0" width="640" height="155" 
             dataProvider="{xmlProdListColl}" 
             doubleClickEnabled="true" editable="true"
             itemEditEnd="orderGrid_itemEditEndHandler(event); updateEstimate(event)">
    <mx:columns>
        <mx:DataGridColumn headerText="Title" dataField="title" editable="false"/>
        <mx:DataGridColumn headerText="Price" dataField="price" editable="false"/>
        <mx:DataGridColumn headerText="Quantity" dataField="quantity"/>
        <mx:DataGridColumn headerText="Total" labelFunction="getTotal" editable="false"/>
    </mx:columns>
</mx:DataGrid>


<s:RichText id="totaltxt" width="147" height="84" fontSize="18" text=""  textAlign="center"
            verticalAlign="middle" />

Philarmon Philarmon · Accepted Answer · 2015-04-21T11:36:15

From what i see you calculate the totals in getTotal() to display the totals but are not settings the "total" property in the actual object. And it is the total property that you use in updateEstimate(). So whenever you would edit the quantities you still would see correct total in the datagrid but the value in the textfield would remain the same

I am not a big fan of binded dataProviders because you never know when data is available and it's hard to modify it (like we need it here). I prefer my own dataProvider variables that are strong typed and that I can modify as I wish :)

So I would do it this way:

I assume, your XML looks somethign like this and you don't have the "total" value in it:

<root>
<lastResult>
    <offer>
        <title>Title</title>
        <price>20</price>
        <quantity>1</quantity>
    </offer>
    <offer>
        <title>Title 2</title>
        <price>30</price>
        <quantity>2</quantity>
    </offer>
</lastResult>

At some point in your code you will have your XML. This is where you modify it adding a total property and pass the dataProvider to the grid:

private var _orderDataProvider:XMLListCollection;

private function gotData():void
{
     var list:XMLList = new XMLList(productXML.lastResult.offer);
    _orderDataProvider = new XMLListCollection(list);

    updateEstimate(); // call this before we assign the dataprovider to the grid, so we will have totals in items
    orderGrid.dataProvider = _orderDataProvider;
}

public function updateEstimate(event:DataGridEvent = null):void
{
    // update all totals in all items and the "Estimated total" in one go               
    var sum:Number = 0;

    for (var i:int = 0; i < _orderDataProvider.length; i++)
    {
        var item:Object = _orderDataProvider.getItemAt(i);
        item.total = item.quantity * item.price;
        sum += Number(_orderDataProvider.getItemAt(i).total);
    }

    totaltxt.text = sum.toString();
}

MXML:

<mx:DataGrid id="orderGrid"
             x="44"
             y="0"
             width="640"
             height="155"
             doubleClickEnabled="true"
             editable="true"
             itemEditEnd="updateEstimate(event)">

    <mx:columns>

        <mx:DataGridColumn headerText="Title"
                           dataField="title"
                           editable="false"/>

        <mx:DataGridColumn headerText="Price"
                           dataField="price"
                           editable="false"/>

        <mx:DataGridColumn headerText="Quantity"
                           dataField="quantity"/>

        <mx:DataGridColumn headerText="Total"
                           dataField="total"
                           editable="false"/>

    </mx:columns>

</mx:DataGrid>

<s:RichText id="totaltxt"
            width="147"
            height="84"
            fontSize="18"
            text=""
            textAlign="center"
            verticalAlign="middle"/>

Now as you see this is not the ideal code because we update totals in ALL items every time on edit although you edit only one entry but we don't have to mess with several functions, so as long as you don't have 1000 entries in your list it should be fine.

Flex Datagrid Column Total

2 Answers