[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3007
  • Last Modified:

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

0
myBlueSky
Asked:
myBlueSky
  • 4
  • 4
1 Solution
 
Pravin AsarCommented:
Here is a simple solution. See if this suits you.



chIR.txt
0
 
Pravin AsarCommented:

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

0
 
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
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Pravin AsarCommented:
Here is a updated code.


chIR.txt
0
 
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/
0
 
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


0
 
Pravin AsarCommented:
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.

0
 
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

0
 
myBlueSkyAuthor Commented:
Thanks dgofman. It is perfect as usual..
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now