AdvancedDataGrid with checkbox

Looks like you are looking for a three state checkbox ... have a look at this code ... but you will have to adapt it to your situation. Unfortunately Im currently sort of really blocked by my Job :-(

 

package de.cware.cweb.utils
{
    import mx.controls.Image;
	import mx.controls.Tree;
	import mx.controls.treeClasses.*;
	import mx.collections.*;
	import mx.controls.CheckBox;
	import flash.events.MouseEvent;

public class CheckTreeRenderer extends TreeItemRenderer
	{
        [Embed(source="/assets/inner.png")]
        [Bindable]
        protected var myImageClass:Class;

		protected var myCheckBox:CheckBox;
        protected var myImage:Image;
		static public var STATE_CHILDREN_CHECKED:String = "children-checked";
		static public var STATE_CHECKED:String = "checked";
		static public var STATE_UNCHECKED:String = "unchecked";
	    
        public function CheckTreeRenderer () 
		{
			super();
			mouseEnabled = false;
		}
		private function toggleParents (item:Object, tree:Tree, state:String):void
		{
			if (item != null)
			{
				item.state = state;
				toggleParents(tree.getParentItem(item), tree, getState (tree, tree.getParentItem(item)));
			}
		}
		
		private function toggleChildren (item:Object, tree:Tree, state:String):void
		{
			if (item != null)
			{
				item.state = state;
				var treeData:ITreeDataDescriptor = tree.dataDescriptor;
				if (treeData.hasChildren(item))
				{
					var children:ICollectionView = treeData.getChildren (item);
					var cursor:IViewCursor = children.createCursor();
					while (!cursor.afterLast)
					{
						toggleChildren(cursor.current, tree, state);
						cursor.moveNext();
					}
				}
			}
		}
		
		private function getState(tree:Tree, parent:Object):String
		{
			var noChecks:int = 0;
			var noCats:int = 0;
			var noUnChecks:int = 0;
			if (parent != null)
			{
				var treeData:ITreeDataDescriptor = tree.dataDescriptor;
				var cursor:IViewCursor = treeData.getChildren(parent).createCursor();
				while (!cursor.afterLast)
				{
					if (cursor.current.state == STATE_CHECKED)
					{
						noChecks++;
					}
					else if (cursor.current.state == STATE_UNCHECKED)
					{
						noUnChecks++
					}
					else
					{
						noCats++;
					}
					cursor.moveNext();
				}
			}
			if ((noChecks > 0 && noUnChecks > 0) || (noCats > 0))
			{
				return STATE_CHILDREN_CHECKED;
			}
			else if (noChecks > 0)
			{
				return STATE_CHECKED;
			}
			else
			{
				return STATE_UNCHECKED;
			}
		}
		private function imageToggleHandler(event:MouseEvent):void
		{
			myCheckBox.selected = !myCheckBox.selected;
			checkBoxToggleHandler(event);
		}
		private function checkBoxToggleHandler(event:MouseEvent):void
		{
			if (data)
			{
				var myListData:TreeListData = TreeListData(this.listData);
				var tree:Tree = Tree(myListData.owner);
				var toggle:Boolean = myCheckBox.selected;
				if (toggle)
				{
					toggleChildren(data, tree, STATE_CHECKED);
				}
				else
				{
					toggleChildren(data, tree, STATE_UNCHECKED);
				}
				var parent:Object = tree.getParentItem (data);
				toggleParents (parent, tree, getState (tree, parent));
			}
		}
		
		override protected function createChildren():void
		{
			super.createChildren();
			myCheckBox = new CheckBox();
			myCheckBox.setStyle( "verticalAlign", "middle" );
			myCheckBox.addEventListener( MouseEvent.CLICK, checkBoxToggleHandler );
			addChild(myCheckBox);
            myImage = new Image();
            myImage.source = myImageClass;
			myImage.addEventListener( MouseEvent.CLICK, imageToggleHandler );
			myImage.setStyle( "verticalAlign", "middle" );
			addChild(myImage);
			
	    }	

		private function setCheckState (checkBox:CheckBox, value:Object, state:String):void
		{
			if (state == STATE_CHECKED)
			{
				checkBox.selected = true;
			}
			else if (state == STATE_UNCHECKED)
			{
				checkBox.selected = false;
			}
			else if (state == STATE_CHILDREN_CHECKED)
			{
				checkBox.selected = false;
			}
		}
        
		override public function set data(value:Object):void
		{
			super.data = value;

			setCheckState (myCheckBox, value, (value) ? value.state : STATE_UNCHECKED);
    		if (this.parent != null)
			{
				var _tree:Tree = Tree(this.parent.parent);
	    		_tree.setStyle("defaultLeafIcon", null);
	  		}
			setStyle("fontStyle", 'normal');
	    }

	   override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
	   {
			super.updateDisplayList(unscaledWidth, unscaledHeight);
	        if(super.data)
	        {
			    if (super.icon != null)
			    {
				    myCheckBox.x = super.icon.x;
				    myCheckBox.y = (super.label.y + (super.label.height / 2)) - (myCheckBox.height / 2);
				    super.icon.x = myCheckBox.x + myCheckBox.width + 17;
				    super.label.x = super.icon.x + super.icon.width + 3;
				}
				else
			    {
				    myCheckBox.x = super.label.x;
				    myCheckBox.y = (super.label.y + (super.label.height / 2)) - (myCheckBox.height / 2);
				    super.label.x = myCheckBox.x + myCheckBox.width + 17;
				}
			    if (data.state == STATE_CHILDREN_CHECKED)
			    {
			    	myImage.x = myCheckBox.x + 1;
			    	myImage.y = myCheckBox.y - 6;
					myImage.width = 12;
					myImage.height = 12;
			    }
			    else
			    {
			    	myImage.x = 0;
			    	myImage.y = 0;
					myImage.width = 0;
					myImage.height = 0;
			    }
			}
	    }
	}
}

Select allOpen in new window

Thanks ChristoferDutz.

I'm totally lost. Where we should palce this renderer? Can we have working example ?

ChristoferDutz,

I already posted the source of the same example in the question(first post).
I have flat arraycollection and the example is using xmllist and hierarchal data approach and I not that familiar with and i need your help also in the following area.

 Add checkbox for each row in Flex AdvanceDataGrid and indicator to the group if its rows partially selected and checked if all rows under that group were selected.
- How can we access that data for further processing, I need to use checked rows for further processing.
- add option to select/deselect all rows/groups
- show row count for each group
- allow the user to expand/collapse all nodes (groups)

please have a look on it again.

Your help is highly appreciated. (I know that your are blocked by your job ).

Thanks,

More attention please.

Your support is needed.

Thanks,

any update?

Thank you for your participation.