Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

AdvancedDataGrid with checkbox

Posted on 2010-09-02
10
Medium Priority
?
2,283 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 2000 total points
ID: 33603903
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

885 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