<?xml version="1.0" encoding="utf-8"?>
<!--
Ofir Shemesh - http://shemesh.wordpress.com
BMC Software, 2008
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
     layout="vertical" backgroundColor="#ffcc00"
     creationComplete="onComplete()" viewSourceURL="srcview/index.html">
     <mx:Script>
         <![CDATA[
             import mx.events.CollectionEvent;
             import mx.collections.ArrayCollection;
        
            [Bindable] private var numSelected:Number;
         
             [Bindable] private var dp:ArrayCollection = new ArrayCollection ([
            { Subject: "FIRST",isSelected:true},
            { Subject: "I N I",isSelected:false},
            { Subject: "JAH",isSelected:true},
            { Subject: "RAS",isSelected:false},
            { Subject: "I N I",isSelected:true},
            { Subject: "JAH",isSelected:false},
            { Subject: "RAS",isSelected:false},
            { Subject: "I N I",isSelected:false},
            { Subject: "JAH",isSelected:false},
            { Subject: "RAS",isSelected:false},
            { Subject: "LAST",isSelected:true}
            ]);
            
            private function onComplete():void {
                checkNumSelected();
                dp.addEventListener(CollectionEvent.COLLECTION_CHANGE ,onDPchange);
            }
            
            private function onDPchange(event:CollectionEvent):void {
                checkNumSelected();
            }
            
            private function checkNumSelected():void {
                numSelected = 0;
                for(var i:int=0 ; i < dp.length ; i++){
                    if(dp[i].isSelected)
                        numSelected ++;
                }
            }
        ]]>
     </mx:Script>
     <mx:Style>
         .moomoo{
             color: #ff0000;
             font-weight:normal;
         }
     </mx:Style>
    <mx:DataGrid id="dg1" dataProvider="{dp}"
        headerStyleName="moomoo">
        
        <mx:columns>
            <mx:DataGridColumn dataField="isSelected" width="200" headerText="Babylon"
                itemRenderer="shemesh.CheckBoxItemRenderer"
                headerRenderer="shemesh.CheckBoxHeaderRenderer" />
               <mx:DataGridColumn headerText="Subject" dataField="Subject" width="300" />
        
        </mx:columns>
    </mx:DataGrid>
    <mx:HBox>
        <mx:Label text="Babylons selected:" />
        <mx:Label text="{numSelected}" />
    </mx:HBox>
</mx:Application>