Setting background colors on a DataGrid column in Flex

Hello,

I found your exemple very interesting.
I have a demand.

Can your show an example, with arraycollection (A,B), in which you add :
- a column that calculated the total of each row of the columns before.
- a footer that calculated the total of each columms.

|---- A -----|---- B -----|---- C -----|
|------------|------------|---(A+B)----|
|------------|------------|---(A+B)----|
..
|------------|------------|---(A+B)----|
|- TOTAL A --|- TOTAL B --|- TOTAL C---|

Best Regards

Reply

Pierre,

To round to two decimals you can use <Number>.toFixed(2), or you can use a CurrencyFormatter or NumberFormatter.

As for your other question, this should get you somewhat close, but there are still a few bugs in the code. Most notably:
(a) Rearranging columns in the top DataGrid control causes the column order in the top and bottom data grid to get out of sync.
(b) Changing data providers on the top DataGrid doesn’t correctly update the values in the bottom DataGrid. You’ll need to add additional logic/code.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        horizontalAlign="left"
        verticalAlign="top"
        initialize="init();">

 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.controls.Label;
   import mx.controls.dataGridClasses.DataGridColumn;
   import mx.events.CollectionEvent;
   import mx.events.DataGridEvent;
   import mx.utils.ObjectUtil;

   private function resizeCols(event:Event=null) : void {
    if(dgS.rowCount > dgS.dataProvider.length)
      dgtot.width = dgS.width;
     else
      dgtot.width = dgS.width-16;
   }

   private function resizeCol(event : DataGridEvent) : void {
    DataGridColumn(dgtot.columns[event.columnIndex]).width = DataGridColumn(dgS.columns[event.columnIndex]).width;
   }

   private function sum_labelFunc(item:Object, col:DataGridColumn):String {
    var sum:Number = Number(item.Price) * Number(item.Quantity);
    return currencyFormatter.format(sum);
   }

   private function currency_labelFunc(item:Object, col:DataGridColumn):String {
    return currencyFormatter.format(item[col.dataField]);
   }

   private function sum_sortCompareFunc(a:Object, b:Object):int {
    var sumA:Number = Number(sumCol.itemToLabel(a));
    var sumB:Number = Number(sumCol.itemToLabel(b));
    return ObjectUtil.numericCompare(sumA, sumB);
   }

   [Bindable]
   public var dpADG:ArrayCollection = new ArrayCollection([
    {Artist:'Pavement',      Album:'Slanted and Enchanted',  Price:11.99, Quantity:10},
    {Artist:'Pavement',      Album:'Brighten the Corners',   Price:11.99, Quantity:-12},
    {Artist:'Saner',         Album:'A Child Once',           Price:11.99, Quantity:30},
    {Artist:'Saner',         Album:'Helium Wings',           Price:12.99, Quantity:45},
    {Artist:'The Doors',     Album:'The Doors',              Price:10.99, Quantity:60},
    {Artist:'The Doors',     Album:'Morrison Hotel',         Price:12.99, Quantity:45},
    {Artist:'Grateful Dead', Album:'American Beauty',        Price:11.99, Quantity:23},
    {Artist:'Grateful Dead', Album:'In the Dark',            Price:11.99, Quantity:36},
    {Artist:'Grateful Dead', Album:'Shakedown Street',       Price:11.99, Quantity:73},
    {Artist:'The Doors',     Album:'Strange Days',           Price:12.99, Quantity:11},
    {Artist:'The Doors',     Album:'The Best of the Doors',  Price:10.99, Quantity:19},
    {Artist:'The Doors2',    Album:'The Best of the Doors2', Price:10.99, Quantity:21}
   ]);

   private var dpADG2:ArrayCollection = new ArrayCollection([
    {Artist:'Pavement',      Album:'Slanted and Enchanted', Price:11.99, Quantity:12},
    {Artist:'Pavement',      Album:'Brighten the Corners',  Price:11.99, Quantity:76},
    {Artist:'Saner',         Album:'A Child Once',          Price:11.99, Quantity:98},
    {Artist:'Saner',         Album:'Helium Wings',          Price:12.99, Quantity:54},
    {Artist:'The Doors',     Album:'The Doors',             Price:10.99, Quantity:79},
    {Artist:'The Doors',     Album:'Morrison Hotel',        Price:12.99, Quantity:28},
    {Artist:'Grateful Dead', Album:'American Beauty',       Price:11.99, Quantity:39},
    {Artist:'Grateful Dead', Album:'In the Dark',           Price:11.99, Quantity:30},
    {Artist:'Grateful Dead', Album:'Shakedown Street',      Price:11.99, Quantity:38}
   ]);

    private function init():void {
        dpADG.addEventListener(CollectionEvent.COLLECTION_CHANGE, dpADG_collectionChange);
        dpADG.refresh();
    }

    private var quantityTotal:Number;
    private var sumTotal:Number;

    private function dpADG_collectionChange(evt:CollectionEvent):void {
        quantityTotal = 0;
        sumTotal = 0;
        dpADG.source.forEach(quantitySum);
        var it:Object = dpADGTotal.getItemAt(0);
        it.Quantity = quantityTotal;
        it.Sum = sumTotal;
        dpADGTotal.setItemAt(it, 0);
    }

    private function quantitySum(item:*, index:int, array:Array):void {
        quantityTotal += item.Quantity;
        var sum:Number = Number(item.Price) * Number(item.Quantity);
        sumTotal += sum;
    }

   [Bindable]
   private var dpADGTotal:ArrayCollection = new ArrayCollection([
    {Artist:'', Album:'Total', Quantity:'', Sum:''}
   ]);

  ]]>
 </mx:Script>
 <mx:Style>
  .title {
   text-align: center;
   font-weight: bold;
  }
  .body {
   text-align: right;
   padding-right: 10;
  }
 </mx:Style>

 <mx:NumberFormatter id="numberFormatter"/>
 <mx:CurrencyFormatter id="currencyFormatter" precision="2" />

 <mx:Button label="{'Switch to Dataprovider '+ (dgS.dataProvider == dpADG ? 'without' : 'with') +'  scroll'}"
         click="dgS.dataProvider = (dgS.dataProvider == dpADG ? dpADG2 : dpADG);"/>

 <mx:VBox width="100%" height="100%" verticalGap="0">
  <mx:DataGrid id="dgS"
               dataProvider="{dpADG}"
               height="40%" width="100%"
               resize="resizeCols();"
               columnStretch="resizeCol(event);"
               creationComplete="dgS.addEventListener(CollectionEvent.COLLECTION_CHANGE, resizeCols, false, 0, true);"
               editable="true"
               textAlign="right">
   <mx:columns>
    <mx:DataGridColumn id="dcArt"
            dataField="Artist"
            textAlign="left"
            headerStyleName="title" />
    <mx:DataGridColumn dataField="Album"
            textAlign="left"
            headerStyleName="title" />
    <mx:DataGridColumn dataField="Quantity"
            textAlign="right"
            headerStyleName="title"
            paddingRight="10"
            editable="true"
            itemEditor="mx.controls.NumericStepper"
            editorDataField="value" />
    <mx:DataGridColumn dataField="Price"
            textAlign="right"
            headerStyleName="title"
            paddingRight="10"
            labelFunction="currency_labelFunc" />
    <mx:DataGridColumn id="sumCol"
            textAlign="right"
            headerStyleName="title"
            paddingRight="10"
            editable="false"
            headerText="Sum"
            labelFunction="sum_labelFunc"
            sortCompareFunction="sum_sortCompareFunc" />
   </mx:columns>
  </mx:DataGrid>
  <mx:DataGrid id="dgtot"
               width="40%"
               dataProvider="{dpADGTotal}"
               showHeaders="false"
               rowCount="1"
               height="{dgtot.rowHeight}"
               creationComplete="{resizeCols()}"
               fontWeight="bold">
   <mx:columns>
    <mx:DataGridColumn/>
    <mx:DataGridColumn dataField="Album"
            textAlign="right"
            fontStyle="italic"
            paddingRight="10" />
    <mx:DataGridColumn dataField="Quantity"
            textAlign="right"
            paddingRight="10" />
    <mx:DataGridColumn dataField="Price" />
    <mx:DataGridColumn dataField="Sum"
            textAlign="right"
            paddingRight="10"
            labelFunction="currency_labelFunc" />
   </mx:columns>
  </mx:DataGrid>
 </mx:VBox>

</mx:Application>

Peter

Reply