Avatar of myBlueSky
myBlueSky

asked on 

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

Apache FlexScripting LanguagesWeb Languages and Standards

Avatar of undefined
Last Comment
myBlueSky
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image

Here is a simple solution. See if this suits you.



chIR.txt
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image


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

Avatar of myBlueSky
myBlueSky

ASKER

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
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image

Here is a updated code.


chIR.txt
Avatar of myBlueSky
myBlueSky

ASKER

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/
Avatar of myBlueSky
myBlueSky

ASKER

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


Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image

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.

ASKER CERTIFIED SOLUTION
Avatar of dgofman
dgofman
Flag of United States of America image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of myBlueSky
myBlueSky

ASKER

Thanks dgofman. It is perfect as usual..
Web Languages and Standards
Web Languages and Standards

Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, and social network services using a wide variety of languages and standards, including the familiar HTML, JavaScript and jQuery, ASP and ASP.NET, PHP, ColdFusion, CSS, PHP, Flex and Flash, but also the implementation of a broad list of standards including XML, WSDL, SSDL, VoiceXML and many more.

40K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo