• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 462
  • Last Modified:

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,
0
myBlueSky
Asked:
myBlueSky
  • 9
  • 3
  • 3
  • +1
5 Solutions
 
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
 
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
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 9
  • 3
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now