Solved

AdvancedDataGrid with checkbox

Posted on 2010-09-02
10
2,207 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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

837 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