Flex3 Datagrid with checkbox

Hi,

We have flex3 datagrid and we would like to have 3-state for the check box in the header:
- Selected
- Partially Selected
- Not Selected
Also, we need to get all selected items.  I'm not able to get selected items from the datagrid.

Main mxml:

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:renderers="renderers.*">
				
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.CheckBox;
			import mx.controls.Alert;
			import flash.events.MouseEvent;

			[Bindable]
			private var dp:ArrayCollection = new ArrayCollection
				([
				{ Item: "item1", Label: "Label1"},
				{ Item: "item2", Label: "Label2"},
				{ Item: "item3", Label: "Label3"},
				{ Item: "item4", Label: "Label4"},
				{ Item: "item5", Label: "Label5"}

				]);


			[Bindable] private var cList:ArrayCollection = new ArrayCollection();


			private function getCheckedItems():void
			{
				var tmpList:ArrayCollection = ArrayCollection(dg1.dataProvider);
				
				var obj:Object;

				cList = new ArrayCollection();

				for (var i:int=0; i < tmpList.length; i++)
				{
					if (tmpList[i].isSelected == true)
					{
						obj = new Object();
						obj.rec = i;
						cList.addItem(obj);

					}
				}				
			}
		]]>
	</mx:Script>
	<mx:DataGrid id="dg1" dataProvider="{dp}">
		<mx:columns>
			<renderers:CheckBoxHeaderColumn headerRenderer="renderers.CheckBoxHeaderRenderer"     
											itemRenderer="renderers.CheckBoxItemRenderer" 
											  textAlign="center">
			</renderers:CheckBoxHeaderColumn>

			<mx:DataGridColumn headerText="Item" dataField="Item"  />
			<mx:DataGridColumn headerText="Label" dataField="Label" />

		</mx:columns>
	</mx:DataGrid>
	
	<mx:Button  label="getCheckedItems" click="getCheckedItems()"/>

	<mx:DataGrid id="dg2"   dataProvider="{cList}"/>
	
</mx:Application>

Select allOpen in new window

renderers:

CheckBoxHeaderColumn.as
 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:renderers="renderers.*">
				
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.CheckBox;
			import mx.controls.Alert;
			import flash.events.MouseEvent;

			[Bindable]
			private var dp:ArrayCollection = new ArrayCollection
				([
				{ Item: "item1", Label: "Label1"},
				{ Item: "item2", Label: "Label2"},
				{ Item: "item3", Label: "Label3"},
				{ Item: "item4", Label: "Label4"},
				{ Item: "item5", Label: "Label5"}

				]);


			[Bindable] private var cList:ArrayCollection = new ArrayCollection();


			private function getCheckedItems():void
			{
				var tmpList:ArrayCollection = ArrayCollection(dg1.dataProvider);
				
				var obj:Object;

				cList = new ArrayCollection();

				for (var i:int=0; i < tmpList.length; i++)
				{
					if (tmpList[i].isSelected == true)
					{
						obj = new Object();
						obj.rec = i;
						cList.addItem(obj);

					}
				}				
			}
		]]>
	</mx:Script>
	<mx:DataGrid id="dg1" dataProvider="{dp}">
		<mx:columns>
			<renderers:CheckBoxHeaderColumn headerRenderer="renderers.CheckBoxHeaderRenderer"     
											itemRenderer="renderers.CheckBoxItemRenderer" 
											  textAlign="center">
			</renderers:CheckBoxHeaderColumn>

			<mx:DataGridColumn headerText="Item" dataField="Item"  />
			<mx:DataGridColumn headerText="Label" dataField="Label" />

		</mx:columns>
	</mx:DataGrid>
	
	<mx:Button  label="getCheckedItems" click="getCheckedItems()"/>

	<mx:DataGrid id="dg2"   dataProvider="{cList}"/>
	
</mx:Application>

Select allOpen in new window

CheckBoxHeaderRenderer.as
 

package renderers
{
	
	
	import flash.events.MouseEvent;
	
	import mx.controls.CheckBox;
	import mx.controls.DataGrid;
	import mx.events.DataGridEvent;
	public class CheckBoxHeaderRenderer extends CheckBox
	{
	
	
	
	public function CheckBoxHeaderRenderer()
		{
			super();
			//addEventListener("click", clickHandler);
		}
	private var _data:CheckBoxHeaderColumn;
	override public function get data():Object
	{
		return _data;
	}
	
	override public function set data(value:Object):void
	{
		_data = value as CheckBoxHeaderColumn;
		DataGrid(listData.owner).addEventListener(DataGridEvent.HEADER_RELEASE, sortEventHandler);
		selected = _data.selected;
	}

	private function sortEventHandler(event:DataGridEvent):void
	{
		if (event.itemRenderer == this)
			event.preventDefault();
	}
	override protected function clickHandler(event:MouseEvent):void
	{
		super.clickHandler(event);
		data.selected = selected;
		data.dispatchEvent(event);
	}
	
	
	
  }
}

Select allOpen in new window

CheckBoxItemRenderer.as
 

package renderers
{
	import flash.events.MouseEvent;
	
	import mx.controls.Alert;
	import mx.controls.CheckBox;
	import mx.controls.DataGrid;
	public class CheckBoxItemRenderer extends CheckBox
	{
		public function CheckBoxItemRenderer()
		{
			super();
			
		}
		override public function validateProperties():void
		{
			super.validateProperties();
			if (listData)
			{
				
				var dg:DataGrid = DataGrid(listData.owner);
	
				var column:CheckBoxHeaderColumn =	dg.columns[listData.columnIndex];
				column.addEventListener("click",columnHeaderClickHandler);
				selected = data[column.dataField];
			}
		}
		private function columnHeaderClickHandler(event:MouseEvent):void
		{

			selected = event.target.selected;
		}
		
	}
}

Select allOpen in new window

package renderers
{
	import mx.controls.dataGridClasses.DataGridColumn;
	
	[Event(name="click", type="flash.events.MouseEvent")]

	public class CheckBoxHeaderColumn extends DataGridColumn
	{
		public function CheckBoxHeaderColumn(columnName:String=null)
		{
			super(columnName);
		}
		/**is the checkbox selected**/
		public var selected:Boolean = false;
		
	}
}

Select allOpen in new window