Flex checkboxes change order

I have set  checkboxes  and I want allow to change the order of them (e.g. moveing item7 to the top). Is that possible and how? I will assume we will have two arrows up & down to this.

<mx:VBox >
<mx:CheckBox id="CheckBox1" label="Item1"  />
<mx:CheckBox id="CheckBox2" label="Item2"  />
<mx:CheckBox id="CheckBox3" label="Item3"  />
<mx:CheckBox id="CheckBox4" label="Item4"  />
<mx:CheckBox id="CheckBox5" label="Item5"  />
<mx:CheckBox id="CheckBox6" label="Item6"  />
<mx:CheckBox id="CheckBox7" label="Item7"  />
</mx:VBox>

Your exceptional support is highly appreciated :)

Reagrds,
LVL 1
myBlueSkyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Siva Prasanna KumarPrincipal Solutions ArchitectCommented:
Here is some sample code to do it, its half the way complete just implement the down part with causing index out of bounds errors :)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.core.IChildList;
			protected function upButton(event:MouseEvent):void
			{
				var list:IChildList = vbox.rawChildren;
				for(var i:int =0;i<list.numChildren;i++)
				{
				 var check:CheckBox = 	list.getChildAt(i) as CheckBox;
				 if(check.selected == true)
				 {
					 if(i-1>=0)
					 {
						 list.addChildAt(list.removeChildAt(i), i-1);
						 vbox.validateNow(); 
					 }	
				 }
				}
			}
			protected function downButton(event:MouseEvent):void
			{
				var list:IChildList = vbox.rawChildren;
				for(var i:int =0;i<list.numChildren;i++)
				{
					var check:CheckBox = 	list.getChildAt(i) as CheckBox;
					if(check.selected == true)
					{
						list.removeChildAt(i);
						//list.
						vbox.validateNow(); 
						//}
					}
				}
			}
		]]>
	</mx:Script>

	<mx:VBox id="vbox">
		<mx:CheckBox id="CheckBox1" label="Item1"  />
		<mx:CheckBox id="CheckBox2" label="Item2"  />
		<mx:CheckBox id="CheckBox3" label="Item3"  />
		<mx:CheckBox id="CheckBox4" label="Item4"  />
		<mx:CheckBox id="CheckBox5" label="Item5"  />
		<mx:CheckBox id="CheckBox6" label="Item6"  />
		<mx:CheckBox id="CheckBox7" label="Item7"  />
	</mx:VBox>
	<mx:Button x="106" y="57" label="UP" click="upButton(event)" id="up"/>
	<mx:Button x="106" y="87" label="DOWN" click="downButton(event)" id="down"/>
	
</mx:Application>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
myBlueSkyAuthor Commented:
Thanks alot shivaspk,

Can you enhance it? So, we never got any errors.
waiting for free-error sample code :)
Thanks again. :)
0
Siva Prasanna KumarPrincipal Solutions ArchitectCommented:
ha ha actually I am all busy, your question was kind of interesting so took out some time from my schedule to do it, just take care of the down arrow, give it a try.
0
Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Siva Prasanna KumarPrincipal Solutions ArchitectCommented:
by the way is it the same behavior of the check boxs  as expected??
0
myBlueSkyAuthor Commented:
I really appreciate your effort in solving the problems especially with your busy schedule  

It seems behavior is ok but  I'm trying to figure out and identify the problems.

1. Down arrow is not working (you alrady mentioned that; it needs work to make it work ).
2. Up arrow is working with some strange behavior (the item is disappeared when we move up take item 7 and move it up to item1).
3. How can we access the order of the checkbox (The index of Item5 or any item is important for further processing).
4. We have to select the checkbox in order to move it from location to another.
5. Is possible to highlight the checkbox we we move it?

Regards,
0
mah8473Commented:
This was a really interesting question, so I hope you don't mind ShivaSPK, I had a bit of a tinker with your code.

The problem with Down Button was we were always looping from the top down (0-7), so as you moved a checkbox down, the next iteration of our loop created an index out of bounds error.

A simple way to get around this was too loop backwards to move checkbox down, loop forwards to move up.

Does this get you any closer to a solution?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.core.IChildList;
			protected function upButton(event:MouseEvent):void {
				var list:IChildList = vbox.rawChildren;
				
				for (var i:int =0; i < list.numChildren -1; i++) {
					var check:CheckBox = list.getChildAt(i) as CheckBox;
					 
					if(check.selected == true){
						if (i - 1 >= 0) {
							list.addChildAt(list.removeChildAt(i), i-1);
							vbox.validateNow(); 
						}	
					}
				}
			}
			
			protected function downButton(event:MouseEvent):void {
				var list:IChildList = vbox.rawChildren;
			
				for (var i:int = (list.numChildren - 1); i > 0 ; i--) {
					var check:CheckBox = list.getChildAt(i) as CheckBox;
					
					if (check.selected == true) {
						if (i + 1 <= list.numChildren-1) {
							list.addChildAt(list.removeChildAt(i), i+1);
							vbox.validateNow();
						}

					}
				}
			}
		]]>
	</mx:Script>

	<mx:VBox id="vbox">
		<mx:CheckBox id="CheckBox1" label="Item1"  />
		<mx:CheckBox id="CheckBox2" label="Item2"  />
		<mx:CheckBox id="CheckBox3" label="Item3"  />
		<mx:CheckBox id="CheckBox4" label="Item4"  />
		<mx:CheckBox id="CheckBox5" label="Item5"  />
		<mx:CheckBox id="CheckBox6" label="Item6"  />
		<mx:CheckBox id="CheckBox7" label="Item7"  />
	</mx:VBox>
	<mx:Button x="106" y="57" label="UP" click="upButton(event)" id="up"/>
	<mx:Button x="106" y="87" label="DOWN" click="downButton(event)" id="down"/>
	
</mx:Application>

Open in new window

0
myBlueSkyAuthor Commented:
Thanks to both of you.

The solution is about to be functioning with issues.

mah8473:
Try to move down item1 --> it is not moving.

Up Button is not functioning well. It seems the code removing the item ---> I started to move up item7 but it is not moving them I moved item6 --> it moved but after keep moving, the item is disappeared or overlapped with other items
0
mah8473Commented:
BlueSky,

i didn't really change the up functionality much other than change the for loop to NumChildren-1

i just got the down functionality working because it was an interesting question, though I'll admit I only spent 5 minutes on it.....have you tried to iron out the bugs yourself?

If I find some time today I'll have another look but it might assist if you can post what you have attempted in correcting the issues?
0
myBlueSkyAuthor Commented:
Can assist on:
1. why I can't move first item down and last item up.
2. why can't move up last item (always start from item before)
3. Why I can to move the item up and I can't make at the top (to be first item)
4. Can we make moving for set of items at time not only one selected item.

Thanks,

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.core.IChildList;
			
			private function upButton(event:MouseEvent):void {
				var list:IChildList = vbox.rawChildren;				
				for (var i:int =0; i < list.numChildren -1; i++) {
					
					var check:CheckBox = list.getChildAt(i) as CheckBox;
					 
					if(check.selected == true){
						
						if (i - 1 > 0) 
						{
							list.addChildAt(list.removeChildAt(i), i-1);
							vbox.validateNow(); 		
								

						}	
					}
				}
			}
			
			private function downButton(event:MouseEvent):void {
				var list:IChildList = vbox.rawChildren;
			
				for (var i:int = (list.numChildren - 1); i > 0 ; i--) 
				{
					var check:CheckBox = list.getChildAt(i) as CheckBox;
					
					if (check.selected == true) 
					{
						
						if (i + 1 <= list.numChildren-1) 
						{
							list.addChildAt(list.removeChildAt(i), i+1);
							vbox.validateNow();
							
						}

					}
				}
			}
		]]>
	</mx:Script>

	<mx:VBox id="vbox">
		<mx:CheckBox id="CheckBox1" label="Item1"  />
		<mx:CheckBox id="CheckBox2" label="Item2"  />
		<mx:CheckBox id="CheckBox3" label="Item3"  />
		<mx:CheckBox id="CheckBox4" label="Item4"  />
		<mx:CheckBox id="CheckBox5" label="Item5"  />
		<mx:CheckBox id="CheckBox6" label="Item6"  />
		<mx:CheckBox id="CheckBox7" label="Item7"  />
	</mx:VBox>
	<mx:Button x="106" y="57" label="UP" click="upButton(event)" id="up"/>
	<mx:Button x="106" y="87" label="DOWN" click="downButton(event)" id="down"/>
	
</mx:Application>

Open in new window

0
myBlueSkyAuthor Commented:
The code is here for review
can't move down first item
can't move up item to the first.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  minWidth="955" minHeight="600">

	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.core.IChildList;
			
			private function upButton(event:MouseEvent):void {
				var list:IChildList = vbox.rawChildren;				
				
				for (var i:int =0; i <= list.numChildren -1; i++) {
					
					var check:CheckBox = list.getChildAt(i) as CheckBox;
					 
					if(check.selected == true)
					{
						if (i - 1 > 0) 
						{
							list.addChildAt(list.removeChildAt(i), i-1);
							vbox.validateNow(); 		
						}	
					}
				}
			}
			
			private function downButton(event:MouseEvent):void {
				var list:IChildList = vbox.rawChildren;
			
				for (var i:int = (list.numChildren - 1); i > 0 ; i--) 
				{
					var check:CheckBox = list.getChildAt(i) as CheckBox;
					
					if (check.selected == true) 
					{
						
						if (i + 1 <= list.numChildren-1) 
						{
							list.addChildAt(list.removeChildAt(i), i+1);
							vbox.validateNow();
							
						}

					}
				}
			}


		]]>
	</mx:Script>
<mx:HBox>
	<mx:VBox id="vbox">
		<mx:CheckBox id="CheckBox1" label="Item1"  />
		<mx:CheckBox id="CheckBox2" label="Item2"  />
		<mx:CheckBox id="CheckBox3" label="Item3"  />
		<mx:CheckBox id="CheckBox4" label="Item4"  />
		<mx:CheckBox id="CheckBox5" label="Item5"  />
		<mx:CheckBox id="CheckBox6" label="Item6"  />
		<mx:CheckBox id="CheckBox7" label="Item7"  />
	</mx:VBox>
	
	<mx:Button x="106" y="57" label="UP" click="upButton(event)" id="up"/>
	<mx:Button x="106" y="87" label="DOWN" click="downButton(event)" id="down"/>
</mx:HBox>

</mx:Application>

Open in new window

0
Pravin AsarPrincipal Systems EngineerCommented:
Here is another way, use CheckBox as Item Renderer with List Control. List Control supports drag & drop.




<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:VBox>
      <mx:List id="list1" width="300" dragEnabled="true" dragMoveEnabled="true" dropEnabled="true">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:CheckBox selectedField="isSelected"
                            change="onChange(event);">
                        <mx:Script>
                            <![CDATA[
                                private function onChange(evt:Event):void {
                                    data.isSelected = !data.isSelected;
                                }
                            ]]>
                        </mx:Script>
                    </mx:CheckBox>
                </mx:Component>
        </mx:itemRenderer>
            <mx:Array>
                  <mx:Object id="c1" value="v1" label="Label 1" isSelected="false"/>
                  <mx:Object id="c2" value="v2" label="Label 2" isSelected="false"/>
                  <mx:Object id="c3" value="v3" label="Label 3" isSelected="true"/>
                  <mx:Object id="c4" value="v4" label="Label 4" isSelected="false"/>
                  <mx:Object id="c5" value="v5" label="Label 5" isSelected="false"/>
                  <mx:Object id="c6" value="v6" label="Label 6" isSelected="false"/>
                  <mx:Object id="c7" value="v7" label="Label 7" isSelected="false"/>
            </mx:Array>
      </mx:List>
      </mx:VBox>
</mx:Application>
0
myBlueSkyAuthor Commented:
pravinasar
Thanks for your post. What about having two buttons to handle up & down events instead of drag & drop.

Can you check previous post?

Reagrds,
0
Pravin AsarPrincipal Systems EngineerCommented:
<!-- Add the following Script  -->

<mx:Script>
<![CDATA[
      import mx.collections.ArrayCollection;
      private function Move(dir:Number):void {
                if (!list1) { return; }
            if (list1.selectedIndex <0) { return; }
            if ( list1.selectedIndex ==0 && dir == 1) { return; }

            var ld:ArrayCollection = list1.dataProvider as ArrayCollection;

            if (((list1.selectedIndex+1) ==ld.length) && dir == -1) { return; }
            var item:Object = list1.selectedItem;
            var pos:Number = list1.selectedIndex;
            ld.removeItemAt(list1.selectedIndex);
            ld.addItemAt(item,pos-dir);
      }
]]>
<mx:Script>

<!-- Add Button --->
<mx:Button label="Move Up" click="Move(1);"/>

<mx:Button label="Move Down" click="Move(-1);"/>
0
Pravin AsarPrincipal Systems EngineerCommented:
And if you like to keep item selected after move ...Add following line to the script.



list1.selectedIndex = pos -dir;
0
myBlueSkyAuthor Commented:
This is my post to overcome item at index 0 and it is working fine.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  minWidth="955" minHeight="600">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.core.IChildList;
			
			private function upButton(event:MouseEvent):void
			 {
				var list:IChildList = vbox.rawChildren;				
				
				for (var i:int =0; i <= list.numChildren -1; i++)
				 {
					var check:CheckBox = list.getChildAt(i) as CheckBox;
					 
					if(check.selected == true)
					{
						if (i - 1 > 0) 
						{
							list.addChildAt(list.removeChildAt(i), i-1);
							vbox.validateNow(); 		
						}	
					}
				}
			}
			
			private function downButton(event:MouseEvent):void 
			{
				var list:IChildList = vbox.rawChildren;
			
				for (var i:int = list.numChildren-2 ; i > 0 ; i--) 
				{
					
					var check:CheckBox = list.getChildAt(i) as CheckBox;
					
					if (check.selected == true) 
					{
							list.addChildAt(list.removeChildAt(i), i+1);
							vbox.validateNow();
					}
			}
			}


		]]>
	</mx:Script>

<mx:HBox>
	<mx:VBox id="vbox">
		
		<mx:CheckBox id="CheckBox0" label="Item0" visible="false" includeInLayout="false"  />
		<mx:CheckBox id="CheckBox1" label="Item1"  />
		<mx:CheckBox id="CheckBox2" label="Item2"  />
		<mx:CheckBox id="CheckBox3" label="Item3"  />
		<mx:CheckBox id="CheckBox4" label="Item4"  />
		<mx:CheckBox id="CheckBox5" label="Item5"  />
		<mx:CheckBox id="CheckBox6" label="Item6"  />
		<mx:CheckBox id="CheckBox7" label="Item7"  />
	</mx:VBox>
	
	<mx:Button x="106" y="57" label="UP" click="upButton(event)" id="up"/>
	<mx:Button x="106" y="87" label="DOWN" click="downButton(event)" id="down"/>
</mx:HBox>

</mx:Application>

Open in new window

0
myBlueSkyAuthor Commented:
shivaspk
mah8473
pravinasar

Thanks to all of you for your support.
0
myBlueSkyAuthor Commented:
Thanks to all of you.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Apache Flex

From novice to tech pro — start learning today.