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>

Open 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>

Open 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);
	}
	
	
	
  }
}

Open 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;
		}
		
	}
}

Open 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;
		
	}
}

Open in new window

LVL 1
myBlueSkyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Pravin AsarPrincipal Systems EngineerCommented:
Here is a simple solution. See if this suits you.



chIR.txt
Pravin AsarPrincipal Systems EngineerCommented:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="getCheckedItems();">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			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", Selected:true, Label: "Label1"},
				{ Item: "item2", Selected:false, Label: "Label2"},
				{ Item: "item3", Selected:false, Label: "Label3"},
				{ Item: "item4", Selected:false, Label: "Label4"},
				{ Item: "item5", Selected:false, Label: "Label5"},
				{ Item: "item6", Selected:true, Label: "Label6"}

				]);

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


			public function getCheckedItems():void
			{
				var tmpList:ArrayCollection = ArrayCollection(dg0.dataProvider);
				
				var obj:Object;
				cList.removeAll();

				for (var i:int=0; i < tmpList.length; i++)
				{
					if (tmpList[i].Selected == true)
					{
						obj = new Object();
						obj.rec = i;
						obj.Item = tmpList[i].Item;
						obj.Label = tmpList[i].Label;
						cList.addItem(obj);
					}
				}
				cList.refresh();
			}
		]]>
	</mx:Script>
	<mx:DataGrid id="dg0" width="50%" height="40%" dataProvider="{dp}">
		<mx:columns>
			<mx:DataGridColumn>
				<mx:itemRenderer>
			    	<mx:Component>
         			<mx:CheckBox selected="{(data.Selected)? true: false}"   click="if (this.selected != false){ data.Selected = true } else { data.Selected=false; }; outerDocument.dg0.dataProvider.refresh(); outerDocument.getCheckedItems();" />         				
      				</mx:Component>						
   				</mx:itemRenderer>
			</mx:DataGridColumn>
			<mx:DataGridColumn dataField="Selected"/>
			<mx:DataGridColumn dataField="Item"/>
			<mx:DataGridColumn dataField="Label"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:Label text="Selected Items" />
	<mx:DataGrid id="dg2" width="50%" height="40%"  dataProvider="{cList}"/>
</mx:Application>

Open in new window

myBlueSkyAuthor Commented:
Thanks pravinasar. It is not what we are looking for. Can you add checkbox in DataGridColumn header to select/deselect all with 3 states
- Selected
- Partially Selected
- Not Selected
Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Pravin AsarPrincipal Systems EngineerCommented:
Here is a updated code.


chIR.txt
myBlueSkyAuthor Commented:
The checkbox in the header is not selected when you select all item or partial selection and Deslect all is not working.

We are looking for something like below link which is working for daragrid.

http://techrays.wordpress.com/2008/02/18/a-3-state-checkbox-in-an-advanceddatagrid-itemrenderer/
myBlueSkyAuthor Commented:
This is using Flash Builder (Flex 4) can we do it in Flex 3

3 state checkbox for header renderer in datagrid
http://cookbooks.adobe.com/post_3_state_checkbox_for_header_renderer_in_datagrid-18900.html


Pravin AsarPrincipal Systems EngineerCommented:
My code, does work. only thing this does not do is partial state.



With Flex 4, actionscript is not changed. So you can port the code to Flex Builder 3 and try.

dgofmanCommented:


Always you are asking some difficult tasks are you writing a tutorial for experts?

And by the way where did you download your crappy sample with so many bad implementations?

Any ways you have to create one more class and repaste my changes in all AS files



CheckBoxIndeterminateIcon.as
package
{
	import mx.skins.halo.CheckBoxIcon;
	
	public class CheckBoxIndeterminateIcon extends CheckBoxIcon{ 
		
		private var selectSize:uint = 4;
		
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			drawRoundRect(selectSize, selectSize, unscaledWidth - (selectSize * 2), unscaledHeight - (selectSize * 2), 
				0, [0x000000, 0x000000], [0xFFFFFF, 0xFFFFFF], 
				verticalGradientMatrix(1, 1, unscaledWidth - 2, unscaledHeight - 2));
		}
		
		override public function get name():String{
			switch(super.name){
				case "selectedUpIcon":
					return "upIcon";
				case "selectedOverIcon":
					return "overIcon";
				case "selectedDownIcon":
					return "downIcon";
				case "selectedDisabledIcon":
					return "disabledIcon";
			}
			return super.name;
		}
	}
}

Open in new window


CheckBoxHeaderColumn.as

package
{
	import flash.events.Event;
	
	import mx.controls.DataGrid;
	import mx.controls.dataGridClasses.DataGridColumn;
	import mx.controls.listClasses.IListItemRenderer;
	import mx.events.CollectionEvent;
	import mx.events.CollectionEventKind;
	import mx.core.mx_internal;

	use namespace mx_internal;

	public class CheckBoxHeaderColumn extends DataGridColumn
	{
		private var _selectedItemRenderers:Array;
		
		public static const ITEM_RENDERER_UPDATE:String = "itemRendererUpdateEvent";
		public static const HEADER_RENDERER_UPDATE:String = "headerRendererUpdateEvent";

		public function CheckBoxHeaderColumn(columnName:String=null){
			super(columnName);
			_selectedItemRenderers = [];
		}

		public function get selectedItemRenderers():Array{
			return _selectedItemRenderers;
		}

		override mx_internal function getMeasuringRenderer(forHeader:Boolean, data:Object):IListItemRenderer
		{
			if(!measuringObjects && owner){
				DataGrid(owner).dataProvider.addEventListener(CollectionEvent.COLLECTION_CHANGE, onCollectionChanged);
				onCollectionChanged();
			}
			return super.getMeasuringRenderer(forHeader, data);
		}

		public function selectAll(selected:Boolean):void{
			for(var index:uint = 0; index < _selectedItemRenderers.length; index++)
				_selectedItemRenderers[index] = selected;
			dispatchEvent(new Event(ITEM_RENDERER_UPDATE));
		}

		public function selectItem(index:uint, selected:Boolean):void{
			_selectedItemRenderers[index] = selected;
			dispatchEvent(new Event(HEADER_RENDERER_UPDATE));
		}

		private function onCollectionChanged(event:CollectionEvent=null):void{
			if(event == null || event.kind == CollectionEventKind.RESET){
				_selectedItemRenderers = [];
				for(var i:uint = 0; i < DataGrid(owner).dataProvider.length; i++)
					_selectedItemRenderers[i] = false;
			}
			dispatchEvent(new Event(ITEM_RENDERER_UPDATE));
		}
	}
}

Open in new window


CheckBoxHeaderRenderer.as

package
{
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import mx.controls.CheckBox;
	import mx.controls.DataGrid;
	import mx.controls.listClasses.BaseListData;
	import mx.events.DataGridEvent;
	import mx.skins.halo.CheckBoxIcon;

	public class CheckBoxHeaderRenderer extends CheckBox
	{
		private var column:CheckBoxHeaderColumn;

		public function CheckBoxHeaderRenderer(){
			super();
		}

		override public function set listData(value:BaseListData):void{
			super.listData = value;
			if(listData != null)
				DataGrid(listData.owner).addEventListener(DataGridEvent.HEADER_RELEASE, sortEventHandler);
		}

		override public function set data(value:Object):void{
			if(data == null && value is CheckBoxHeaderColumn){
				column = value as CheckBoxHeaderColumn;
				column.addEventListener(CheckBoxHeaderColumn.HEADER_RENDERER_UPDATE, onDataChanged);
			}
			super.data = value;
		}

		override protected function clickHandler(event:MouseEvent):void{
			super.clickHandler(event);
			column.selectAll(selected);
			onDataChanged();
		}

		private function onDataChanged(event:Event=null):void{
			var index:uint = 0;
			for(var i:uint = 0; i < column.selectedItemRenderers.length; i++){
				var status:Boolean = column.selectedItemRenderers[i];
				if(status == true)
					index++;
			}

			if(index != 0 && index != column.selectedItemRenderers.length){
				setStyle('upIcon', CheckBoxIndeterminateIcon); 
				setStyle('overIcon', CheckBoxIndeterminateIcon);
				setStyle('downIcon', CheckBoxIndeterminateIcon);
				selected = false;
			}else{
				setStyle('upIcon', CheckBoxIcon); 
				setStyle('overIcon', CheckBoxIcon);
				setStyle('downIcon', CheckBoxIcon);
				selected = (index != 0);
			}
		}

		private function sortEventHandler(event:DataGridEvent):void{
			if (event.itemRenderer == this)
				event.preventDefault();
		}
	}
}

Open in new window


CheckBoxItemRenderer.as

package
{
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import mx.controls.CheckBox;
	import mx.controls.DataGrid;
	import mx.controls.listClasses.BaseListData;

	public class CheckBoxItemRenderer extends CheckBox
	{
		private var column:CheckBoxHeaderColumn;

		public function CheckBoxItemRenderer(){
			super();
		}

		override public function validateProperties():void{
			super.validateProperties();
			if (data != null && column)
				selected = data[column.dataField];
		}

		override public function set listData(value:BaseListData):void{
			if(listData == null && value != null){
				var dg:DataGrid = DataGrid(value.owner);
				column = dg.columns[value.columnIndex];
				column.addEventListener(CheckBoxHeaderColumn.ITEM_RENDERER_UPDATE, onDataChanged);
			}
			super.listData = value;
		}

		override public function set data(value:Object):void{
			super.data = value;
			onDataChanged();
		}

		override protected function clickHandler(event:MouseEvent):void{
			super.clickHandler(event);
			var index:uint = DataGrid(owner).itemRendererToIndex(this);
			column.selectItem(index, selected);
		}
		
		private function onDataChanged(event:Event=null):void{
			if(owner is DataGrid){
				var index:uint = DataGrid(owner).itemRendererToIndex(this);
				selected = column.selectedItemRenderers[index];
			}
		}
	}
}

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
myBlueSkyAuthor Commented:
Thanks dgofman. It is perfect as usual..
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Apache Flex

From novice to tech pro — start learning today.