Flex (noob): updating datagrid

1

Hi there, coming from Flash-based AS3, I’m naturally suspicious of the [bindable] directive and am just trying to understand the mechanics of setting and updating dataProviders using ActionScript.

Here’s an example bit of code that does not work as expected. I define a datagrid and then use a simple filter on a bit of XML to create the recordset for my datagrid. I’m using the datagrid’s creationComplete to then (hopefully) populate the datagrid with this XMLList. But the datagrid remains blank. Why is that?


<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Halo DataGrid control. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        creationComplete="init()">

    <fx:Declarations>
        <fx:XML id="products">
            <data>
                <Product id="Product-1"   active="0">
                    <Item id="100" state="0"  label="Item-11" quantity="10" price="50" />
                    <Item id="101" state="1"  label="Item-12" quantity="10" price="10" />
                    <Item id="103" state="0"  label="Item-13" quantity="10" price="60" />
                </Product>

                <Product id="Product-2"   active="0">
                    <Item id="200" state="0"  label="Item-21" quantity="10" price="30" />
                    <Item id="201" state="0"  label="Item-22" quantity="10" price="40" />
                    <Item id="202" state="1"  label="Item-22" quantity="10" price="90" />
                </Product>

                <Product id="Product-3"   active="0">
                    <Item id="300" state="1"  label="Item-31" quantity="10" price="80" />
                    <Item id="301" state="1"  label="Item-32" quantity="10" price="50" />
                    <Item id="302" state="0"  label="Item-33" quantity="10" price="75" />
                    <Item id="304" state="0"  label="Item-34" quantity="10" price="45" />
                </Product>      

                <Product id="Product-4"   active="1">
                </Product>
            </data>
        </fx:XML>
    </fx:Declarations>
    
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:Panel title="Halo DataGrid Control Example"
            width="75%" height="75%" 
            horizontalCenter="0" verticalCenter="0">
        <s:VGroup left="10" right="10" top="10" bottom="10">

            <mx:DataGrid id="the_grid"
                width="100%" height="100%" rowCount="5"
                creationComplete="initDG()">
                <mx:columns>
                    <mx:DataGridColumn dataField="id" headerText="ID"/>
                    <mx:DataGridColumn dataField="label" headerText="Name"/>
                    <mx:DataGridColumn dataField="price" headerText="Price"/>
                </mx:columns>
            </mx:DataGrid>

        </s:VGroup>
    </s:Panel>
    
    
    <fx:Script>
        <![CDATA[
        import mx.collections.XMLListCollection;
        import mx.events.FlexEvent;
        
        public function init():void {
            trace("init");
        }
        
        public function initDG():void {
            trace("initDG");
            
            var activeItems:XMLList = products.Product.Item.(@state == "1");
            
            trace(activeItems);
            the_grid.dataProvider = activeItems;

        }
        ]]>
    </fx:Script>


</s:Application>