Solved

AdvancedDataGrid with checkbox

Posted on 2010-09-02
10
2,189 Views
Last Modified: 2013-11-19
Hello,

I have an array collection and I’m using AdvancedDataGrid to display the data.
How can we put checkbox for each group and row in Flex AdvanceDataGrid?
 I tried this example http://sites.google.com/site/prosameer/CheckADG.zip here but I couldn’t able to apply it on my situation.
Your help is needed to do the following:
- 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)


Thanks,


<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
        	import mx.collections.ArrayCollection;
                  
            [Bindable]
            private var myData:ArrayCollection = new ArrayCollection([
              {Product:"Product-1", Item:"Item-1", Quantity:100, Price:372}, 
              {Product:"Product-1", Item:"Item-2", Quantity:200, Price:282},  
              {Product:"Product-1", Item:"Item-3", Quantity:321, Price:188},  
              {Product:"Product-2", Item:"Item-1", Quantity:112, Price:223},  
              {Product:"Product-2", Item:"Item-1", Quantity:221, Price:772},
              {Product:"Product-3", Item:"Item-1", Quantity:331, Price:102},
              {Product:"Product-3", Item:"Item-2", Quantity:811, Price:521},
              {Product:"Product-4", Item:"Item-1", Quantity:678, Price:132}
            ]);
		]]>
    </mx:Script>

    <mx:Panel  width="50%" height="50%" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <mx:AdvancedDataGrid id="myADG"   
            width="100%" height="100%" 
            initialize="gc.refresh();">        
            <mx:dataProvider>
                <mx:GroupingCollection id="gc" source="{myData}">
                    <mx:grouping>
                        <mx:Grouping>
                            <mx:GroupingField name="Product"/>
                        </mx:Grouping>
                    </mx:grouping>
                </mx:GroupingCollection>
            </mx:dataProvider>        
            
            <mx:columns>
                <mx:AdvancedDataGridColumn dataField="Product"/>
                <mx:AdvancedDataGridColumn dataField="Item"/>
                <mx:AdvancedDataGridColumn dataField="Quantity"/>
                <mx:AdvancedDataGridColumn dataField="Price"/>
            </mx:columns>
       </mx:AdvancedDataGrid>
   
    </mx:Panel>
    
</mx:Application>

Open in new window

0
Comment
Question by:myBlueSky
  • 5
  • 2
10 Comments
 
LVL 20

Expert Comment

by:ChristoferDutz
ID: 33597963
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;
			    }
			}
	    }
	}
}

Open in new window

0
 
LVL 1

Author Comment

by:myBlueSky
ID: 33600672
Thanks ChristoferDutz.

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

Accepted Solution

by:
ChristoferDutz earned 500 total points
ID: 33603903
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 1

Author Comment

by:myBlueSky
ID: 33604820
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,

0
 
LVL 1

Author Comment

by:myBlueSky
ID: 33642351
More attention please.

Your support is needed.

Thanks,
0
 
LVL 1

Author Comment

by:myBlueSky
ID: 33980736
any update?
0
 
LVL 1

Author Closing Comment

by:myBlueSky
ID: 33980850
Thank you for your participation.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will learn how to count occurrences of each item in an array.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question