<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" xmlns:renderers="com.returnundefined.view.renderers.*">
    <mx:Script>
        <![CDATA[
            import com.returnundefined.view.renderers.CenteredCheckBoxHeaderRenderer;
            
            import mx.collections.ArrayCollection;
            import mx.collections.ListCollectionView;
            
            [Bindable]
            public var hr:ClassFactory;
            // var to hold header renderer's state
            public var selectAllFlag:Boolean;
            
            private function init():void
            {
                // define and assign the DataGrid's dataProvider
                var ac:ArrayCollection = new ArrayCollection();
                ac.addItem({addToCart: false, name: "Flex Builder 3"});
                ac.addItem({addToCart: false, name: "Photoshop CS3"});
                ac.addItem({addToCart: false, name: "Illustrator CS3"});
                ac.addItem({addToCart: false, name: "Dreamweaver CS3"});
                ac.addItem({addToCart: false, name: "Thermo CS4"});
                ac.addItem({addToCart: false, name: "InDesign CS3"});
                ac.addItem({addToCart: false, name: "After Effects CS3"});
                ac.addItem({addToCart: false, name: "Premiere CS3"});
                ac.addItem({addToCart: false, name: "Acrobat Professional 8"});
                ac.addItem({addToCart: false, name: "LiveCycle ES"});
                
                dg.dataProvider = ac;
                
                // create var for header renderer
                hr = new ClassFactory(com.returnundefined.view.renderers.CenteredCheckBoxHeaderRenderer);
                // give it data to point back to our local selectAllFlag variable
                hr.properties = {stateHost: this, stateProperty: "selectAllFlag"};
                
                // listen for header click so we can toggle data items
                this.addEventListener(MouseEvent.CLICK, onCheckBoxHeaderClick);
            }
            
            // click events will still bubble
            // even though some basic processing is done inside the renderers
            private function onCheckBoxHeaderClick(event:MouseEvent):void
            {
                // make sure click came from header
                if(event.target is CenteredCheckBoxHeaderRenderer)
                {
                    // loop over data
                    for each(var obj:Object in dg.dataProvider)
                    {
                        // update value based on CheckBox state
                        obj.addToCart = CenteredCheckBoxHeaderRenderer(event.target).selected;
                        // notify collection
                        ListCollectionView(dg.dataProvider).itemUpdated(obj, "addToCart");
                    }
                }
            }
        ]]>
    </mx:Script>
    <mx:DataGrid id="dg" width="300" rowCount="6">
        <mx:columns>
            <mx:DataGridColumn width="30"
                sortable="false"
                dataField="addToCart"
                headerRenderer="{hr}"
                itemRenderer="com.returnundefined.view.renderers.CenteredCheckBoxItemRenderer" />
            <mx:DataGridColumn
                dataField="name"
                headerText="Product" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>