25 Replies Latest reply on Nov 1, 2010 11:06 PM by drkstr_1

    How to move checked CheckBox to the top of the list?

    bryant_16 Level 1

      Hey guys,

       

      I have a Capture.PNG

       

      I have the above list which has the checkbox and also the label which is in blue. How do I do it in such a way that when I checked on the last row of the list, it will move to the top of the list with the checkbox being checked? The labels are actually taking from my dataprovider which is in ArrayCollection.

       

       

      Thanks and awaiting any response.

        • 1. Re: How to move checked CheckBox to the top of the list?
          Flex harUI Adobe Employee

          Probably by manipulating the ArrayCollection with removeItemAt and addItemAt

          • 2. Re: How to move checked CheckBox to the top of the list?
            bryant_16 Level 1

            Yup, that's right, I tried it. But the checked CheckBox will be unchecked after I do the remove and adding of the item.

             

            That's why.

            • 3. Re: How to move checked CheckBox to the top of the list?
              Flex harUI Adobe Employee

              The checkbox has to determine its checked state from the data or associated

              data.  You will need to store the fact that the item is checked somewhere.

              • 4. Re: How to move checked CheckBox to the top of the list?
                bryant_16 Level 1

                Hi there,

                 

                How do you check for that?

                 

                This is my current code:

                 

                My codes for the CheckBoxes and ComboBoxes:

                 

                <mx:Panel id="layerPanel" backgroundColor="#ffffff" height="220" width="220"
                  title="Layer Control Manager" showEffect="WipeRight" hideEffect="WipeLeft"
                  horizontalScrollPolicy="off" verticalScrollPolicy="off">
                  <mx:VBox height="140" width="400" horizontalScrollPolicy="off">
                   <mx:List id="layerList" itemClick="layerList_changeHandler(event)"
                   alternatingItemColors="[#EEEEEE, white]" selectable="true"
                   dataProvider="{lstDataProvider}" labelField="name" height="190" verticalScrollPolicy="off">
                   <mx:itemRenderer>
                    <mx:Component>
                     <mx:HBox>
                      <mx:CheckBox id="chkBox" change="layerCheckBox_onChange(event);">
                      <mx:Script>
                      <![CDATA[
                     
                      import mx.controls.Alert;
                      import mx.events.FlexEvent;
                     
                      override public function set data(value:Object):void
                      {
                       super.data = value;
                       if(value != null)
                       {
                        chkBox.selected = value.isSelected;
                        if(!chkBox.selected)
                        {
                         comboBox.selectedIndex = -1;
                         comboBox.prompt = "Please Select";        
                         comboBox.enabled = false;
                        }
                       }
                      }
                      private function layerCheckBox_onChange(evt:Event):void
                      {
                       data.isSelected = !data.isSelected;
                       if(data.isSelected)
                       {
                        comboBox.enabled = true;
                       }
                       else
                       {
                        comboBox.enabled = false;
                       }
                       if(data.isSelected && comboBox.selectedIndex > -1)
                       {
                        this.dispatchEvent(new Event("addImageToApplication", true));
                       }
                      }
                      ]]>
                      </mx:Script>
                      </mx:CheckBox>
                      <mx:Label text="{data.label}" />
                      <mx:ComboBox id="comboBox" enabled="false" width="100%" change="onComboBoxChange(event)" dataProvider="{outerDocument.comboBoxArray}" prompt="Please Select">
                       <mx:Script>
                        <![CDATA[
                         import mx.controls.ComboBox;
                        
                         private function onComboBoxChange(evt:Event):void
                         {
                          var myCombo:ComboBox = evt.currentTarget as ComboBox;
                         
                          //if(data.label == myCombo.selectedItem.label)
                          {
                           outerDocument.comboImageUrl = myCombo.selectedItem.src;
                           if(data.isSelected)
                           {
                            this.dispatchEvent(new Event("addImageToApplication", true));
                           }           
                          }
                         }
                       
                        ]]>
                        </mx:Script>
                       <mx:itemRenderer>
                        <mx:Component>
                         <mx:HBox horizontalScrollPolicy="off">
                          <mx:Image source="{data.src}" width="20" height="20" maintainAspectRatio="false" />
                          <mx:Label text="{data.label}" />
                         </mx:HBox>
                        </mx:Component>
                       </mx:itemRenderer>
                      </mx:ComboBox>
                     </mx:HBox>
                    </mx:Component>
                   </mx:itemRenderer>
                   </mx:List>
                  </mx:VBox>

                 

                <mx:VBox top="165" left="30">
                  <mx:Button label="Reset List" width="160" id="resetBut" click="resetList()"/>
                </mx:VBox>
                </mx:Panel>

                • 5. Re: How to move checked CheckBox to the top of the list?
                  bryant_16 Level 1

                  Hi guys,

                   

                  Anyone has any ideas about this?

                  • 6. Re: How to move checked CheckBox to the top of the list?
                    Flex harUI Adobe Employee

                    Looks like you are storing the selected state in an isSelected property.

                    Make sure it doesn't get reset as you remove and add

                    • 7. Re: How to move checked CheckBox to the top of the list?
                      bryant_16 Level 1

                      This is the add and remove:

                       

                      for(var counter:int=0; counter<outerDocument.lstDataProvider.length; counter++)

                      {

                      if(outerDocument.imageLayer == outerDocument.lstDataProvider.getItemAt(counter,0).name)

                      {

                      var layerObject:Object;

                      layerObject = outerDocument.lstDataProvider.getItemAt(counter,0);

                      outerDocument.lstDataProvider.removeItemAt(counter);

                      outerDocument.lstDataProvider.addItemAt(layerObject, 0);

                      }

                      }

                       

                      This is my add and remove codes, where should I place it and what to make sure how it didnt get reseted and I remove and add?

                      • 8. Re: How to move checked CheckBox to the top of the list?
                        bryant_16 Level 1

                        Anyone has any ideas about this solution?    

                        • 9. Re: How to move checked CheckBox to the top of the list?
                          Flex harUI Adobe Employee

                          I would check the isSelected property in layerObject.  Check the data setter

                          in your renderer that corresponds to the 0 slot after that.

                          • 10. Re: How to move checked CheckBox to the top of the list?
                            bryant_16 Level 1

                            What you mean? Got sample example for my existing codes?

                             

                            Is it possible for my codes for this?

                            • 11. Re: How to move checked CheckBox to the top of the list?
                              bryant_16 Level 1

                              Hi guys,

                               

                              Is there any solutions for this?

                              • 12. Re: How to move checked CheckBox to the top of the list?
                                Flex harUI Adobe Employee

                                I expect there is an answer, but you will have to use the debugger or trace

                                statements to find out where things are broken.

                                • 13. Re: How to move checked CheckBox to the top of the list?
                                  bryant_16 Level 1

                                  I tried tracing but still can't get it.

                                  • 14. Re: How to move checked CheckBox to the top of the list?
                                    BhaskerChari Level 4

                                    Hi Bryant,

                                     

                                    Try this...

                                     

                                    for(var counter:int=0; counter<outerDocument.lstDataProvider.length; counter++)

                                    {

                                    if(outerDocument.imageLayer == outerDocument.lstDataProvider.getItemAt(counter,0).name)

                                    {

                                    var layerObject:Object;

                                    layerObject = outerDocument.lstDataProvider.getItemAt(counter,0);

                                    outerDocument.lstDataProvider.removeItemAt(counter);

                                    layerObject.isSelected = true;

                                    outerDocument.lstDataProvider.addItemAt(layerObject, 0);

                                    break;

                                    }

                                    }

                                     

                                     

                                    Thanks,

                                    Bhasker

                                     

                                    Message was edited by: BhaskerChari

                                    • 15. Re: How to move checked CheckBox to the top of the list?
                                      bryant_16 Level 1

                                      Hi Bhasker,

                                       

                                      I tried it, but it is not working. The item went up to the top of the list but the CheckBox is not checked.

                                      • 16. Re: How to move checked CheckBox to the top of the list?
                                        BhaskerChari Level 4

                                        Hi Bryant,

                                         

                                        Can you tell me where and when are you calling the add and remove method...??

                                         

                                        If you don't  mind can you please post your total code..??

                                         

                                         

                                         

                                        Thanks,

                                        Bhasker

                                        • 17. Re: How to move checked CheckBox to the top of the list?
                                          bryant_16 Level 1

                                          <mx:VBox height="265" width="218" horizontalScrollPolicy="off">

                                          <mx:List id="layerList" itemClick="layerList_changeHandler(event)"

                                          alternatingItemColors="[#EEEEEE, white]" selectable="true"

                                          dataProvider="{lstDataProvider}" labelField="name" width="400" verticalScrollPolicy="off" horizontalScrollPolicy="off">

                                           

                                          <mx:itemRenderer>

                                          <mx:Component>

                                          <mx:HBox>

                                          <mx:CheckBox id="chkBox" change="layerCheckBox_onChange(event);">

                                          <mx:Script>

                                          <![CDATA[

                                           

                                          import mx.controls.Alert;

                                          import mx.events.FlexEvent;

                                           

                                           

                                          //reseting of checks from checkboxes

                                          override public function set data(value:Object):void

                                          {

                                          super.data = value;

                                          if(value != null)

                                          {

                                          chkBox.selected = !value.isSelected;

                                          if(!chkBox.selected)

                                          {

                                          comboBox.selectedIndex = -1;

                                          comboBox.prompt = "Icon";

                                          comboBox.enabled = false;

                                          }

                                          }

                                          }

                                          //reseting of checks from checkboxes

                                           

                                           

                                           

                                          private function layerCheckBox_onChange(evt:Event):void

                                          {

                                          if(Boolean(evt.currentTarget.selected) == true)

                                          {

                                          data.isSelected = !data.isSelected;

                                           

                                           

                                          outerDocument.imageLayer = data.name;

                                           

                                          comboBox.enabled = true;

                                           

                                          }

                                          else

                                          {

                                           

                                          }  

                                          }

                                          ]]>

                                          </mx:Script>

                                          </mx:CheckBox>

                                          <sls:ImageComboBox id="comboBox" width="55" paddingLeft="5" paddingTop="3" paddingBottom="3" change="onComboBoxChange(event)" dataProvider="{outerDocument.imagesBoxArray}">

                                          <!-- <sls:dataProvider>

                                          <mx:Object url="img/Home.png" label="" />

                                          <mx:Object url="img/Up.png" label="" />

                                          <mx:Object url="img/Down.png" label="" />

                                          </sls:dataProvider> -->

                                          <sls:itemRenderer>

                                          <mx:Component>

                                          <mx:Image source="{data.src}" />

                                          </mx:Component>

                                          </sls:itemRenderer>

                                          </sls:ImageComboBox>

                                           

                                           

                                           

                                           

                                          <!--<mx:ComboBox id="comboBox" enabled="false" width="68" change="onComboBoxChange(event)" dataProvider="{outerDocument.comboBoxArray}" prompt="Select">-->

                                          <mx:Script>

                                          <![CDATA[

                                          import mx.controls.ComboBox;

                                           

                                          private function onComboBoxChange(evt:Event):void

                                          {

                                          var myCombo:ComboBox = evt.currentTarget as ComboBox;

                                           

                                          //if(data.name == myCombo.selectedItem.label)

                                          //{

                                           

                                          outerDocument.comboImageUrl = myCombo.selectedItem.src;

                                          if(data.isSelected)

                                          {

                                          outerDocument.displayLoaderMessage();

                                          this.dispatchEvent(new Event("addImageToApplication", true));

                                          }           

                                          //}

                                          for(var counter:int=0; counter<outerDocument.lstDataProvider.length; counter++)

                                          {

                                          if(outerDocument.imageLayer == outerDocument.lstDataProvider.getItemAt(counter,0).name)

                                          {

                                          trace("hhhahhahahahdfsjfljdsl;f");

                                          var layerObject:Object;

                                          layerObject = outerDocument.lstDataProvider.getItemAt(counter,0);

                                          outerDocument.lstDataProvider.removeItemAt(counter);

                                          layerObject.isSelected = true;

                                          outerDocument.lstDataProvider.addItemAt(layerObject, 0);

                                          break;

                                          }

                                          }

                                          }

                                           

                                          ]]>

                                          </mx:Script>

                                          <!--<mx:itemRenderer>

                                          <mx:Component>

                                          <mx:HBox horizontalScrollPolicy="off">

                                          <mx:Image source="{data.src}" maintainAspectRatio="true" />

                                          </mx:HBox>

                                          </mx:Component>

                                          </mx:itemRenderer>

                                          </mx:ComboBox>-->

                                          <mx:Label text="{data.name}" />

                                          <!--<mx:Label text="{data.label}" />-->

                                          </mx:HBox>

                                          </mx:Component>

                                          </mx:itemRenderer>

                                          </mx:List>

                                          </mx:VBox>

                                          • 18. Re: How to move checked CheckBox to the top of the list?
                                            Devtron Level 3

                                            When I use the CheckBoxDataGrid, and I need to reset the checkbox selection, I use the "selectedIndices" property.

                                             

                                            What you need to do is add your new rowindex to the datagrid's selectedIndices property. That works for me.

                                            • 19. Re: How to move checked CheckBox to the top of the list?
                                              bryant_16 Level 1

                                              Where did you put your indices at?

                                              • 20. Re: How to move checked CheckBox to the top of the list?
                                                Devtron Level 3

                                                If you are simply moving the row to the top of the grid, and need to select/check it...then your index would always be 0.

                                                 

                                                so after you move the row to the top, you could do this:

                                                datagrid.selectedIndices=0;

                                                 

                                                If you need to check more, you would do:

                                                datagrid.selectedIndices=[0,5,10];

                                                 

                                                setting the datagrid's selectedIndices should check the checkbox. Atleast it does for me.

                                                 

                                                http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/listClasses /ListBase.html#selectedIndices

                                                • 21. Re: How to move checked CheckBox to the top of the list?
                                                  bryant_16 Level 1

                                                  Erm okie. But mine I wont know how many they checked because is the user

                                                  themselves that do it. Where do you set the datagrid selected indices? My

                                                  current set of codes able to do it?

                                                  • 22. Re: How to move checked CheckBox to the top of the list?
                                                    Devtron Level 3

                                                    Create an ArrayCollection. Store the values before you manipulate it. Do your logic and re-assign that to the datagrid selectedIndexes. I consider it a bit of a hack and much extra work. but what else is new? lol

                                                     

                                                    protected function dataggrid_itemClickHandler(event:ListEvent):void {

                                                     

                                                                    var indexesAC:ArrayCollection = new ArrayCollection();
                                                                    indexesAC.source = datagrid.selectedIndices;

                                                     

                                                                    //move your row to the top of the datagrid, perform all logic here. be sure to add the new index to your array.

                                                                    indexesAC.addItem(event.rowIndex); //use whatever index you need here, if moving to the top you would use 0

                                                                    indexesAC.addItem( 0 );  //lets go ahead and just use 0

                                                     

                                                                  //re-assign the selected indices to the datagrid, your top grid row should be checked if you added 0 to your array

                                                                  datagrid.selectedIndices = indexesAC.source;

                                                     

                                                    }

                                                     

                                                     

                                                     

                                                     

                                                    I use an ArrayCollection object instead of an Array because its easier to add items to.

                                                    • 24. Re: How to move checked CheckBox to the top of the list?
                                                      bryant_16 Level 1

                                                      Hi there,

                                                       

                                                      Mine isn't a datagrid, is it still able to work?

                                                      • 25. Re: How to move checked CheckBox to the top of the list?
                                                        drkstr_1 Level 4

                                                        Sure. You can sort any ICollectionView (IE. an ArrayCollection). You can of course sort native Arrays as well, it's just not as pretty (OOP wise I mean).