Solved

AdvancedDataGrid with checkbox

Posted on 2010-09-02
10
2,231 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

739 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