AdvancedDataGrid: Adventures in binding

Quick post on AdvancedDataGrid dataProviders.

If your using a HierarchicalData provider for you AdvancedDataGrid (Flex) binding changes may (will) not be picked up by the AdvancedDataGrid.

For example

<mx:AdvancedDataGrid id="grid" bottom="10" top="40" left="10"
designViewDataType="tree" width="379">
<mx:HierarchicalData source="{grades}"
<mx:AdvancedDataGridColumn headerText="Course" dataField="title"/>
<mx:AdvancedDataGridColumn headerText="Score" dataField="scoreString" width="80"/>

Won’t pickup the update to ‘grades’. Instead you’ll need to update the dataProvider itself…

var hd:HierarchicalData = new HierarchicalData();
hd.childrenField = "assignments";
hd.source = grades;
grid.dataProvider = hd;

Bindable Read Only Getters

I had the opportunity to clear up some confusion on ‘bindable’ read-only ‘getters’ so I thought I’d post.

If you mark your ActionScript class [Bindable], the compiler will generate propertyChange events for the class’s public variables and properties exposed through getters and setters.

When a property exposed through a get / set pair is modified, a propertyChange event will be dispatched (from the setter). Use the comiplers -keep flag to inspect this for yourself.

If you have a property exposed through a getter but no matching setter, data binding will not detect changes to the ‘get’ value.

For example, you might have a getter value that is calculated from two other fields. To enable data binding on the ‘getter’ value, simply dispatch an event whenever the fields in the calculation are updated. You can then mark the getter function Bindable on those event names.

Here’s a working example


public class BindingDemo
private var _numerator:Number = 0;
private var _denominator:Number = 1;

public function get numerator():Number
return _numerator;

public function set numerator(value:Number):void
if(value != _numerator)
_numerator = value;
this.dispatchEvent(new Event('numeratorChanged'));

public function get denominator():Number
return _denominator;

public function set denominator(value:Number):void
if(value != denominator)
_denominator = value;
this.dispatchEvent(new Event('denominatorChanged'));


public function get ratio():Number
if(_denominator == 0)
return 0;
return _numerator / _denominator;

And some MXML to try it out

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="" layout="absolute">

[Bindable] public var bdemo:BindingDemo = new BindingDemo();

<mx:Button x="193" y="23" label="Update" click="bdemo.numerator=Number(nvalue.text)"/>
<mx:Label x="20" y="25" text="Numerator"/>
<mx:Label x="20" y="51" text="Denominator"/>
<mx:Label x="30" y="90" text="Numerator" fontWeight="bold"/>
<mx:Label x="17" y="116" text="Denominator" fontWeight="bold"/>
<mx:Label x="62" y="142" text="Ratio" fontWeight="bold"/>
<mx:Label x="105" y="90" text="{bdemo.numerator}" id="num"/>
<mx:Label x="105" y="116" text="{bdemo.denominator}" id="den"/>
<mx:Label x="105" y="142" text="{bdemo.ratio}" id="ratio"/>
<mx:TextInput x="105" y="23" width="80" id="nvalue"/>
<mx:TextInput x="105" y="49" width="80" id="dvalue"/>
<mx:Button x="193" y="49" label="Update" click="bdemo.denominator=Number(dvalue.text)"/>


Try it out below.