7 Replies Latest reply on Jun 10, 2010 11:09 PM by srinth

    select all checkbox in Grid

    srinth Level 1

      Hi,

       

       

       

       

      Created dynamic multiple checkbox which are placed in table format in the Grid,

      a) How to select all the checkbox on clicking a button

      b) How to find how many checkbox are selected on click a button

       

      Thanks in advance

        • 1. Re: select all checkbox in Grid
          Matt Le Fevre Level 4

          for each loops would proabbly be your best bet.

           

          i imagine you'll be storing a boolean value for each item in an array/arraycollection somewhere as a dataprovider, loop through that and increment a count for each one that is set to true.

           

           

          to turn them all on, do the same as before but instead of just checking the value, if it's false then set it to true.

          • 2. Re: select all checkbox in Grid
            srinth Level 1

            below is the code, i have tried binding the checkbox it is not working.

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/mx"
                           width="1000"
                           height="700">
               
                <fx:Script>
                    <![CDATA[
                        import flash.display.*;
                        import flash.events.*;
                        import flash.net.navigateToURL;
                        import flash.utils.*;
                       
                        import mx.containers.Grid;
                        import mx.containers.GridItem;
                        import mx.containers.GridRow;
                       
                        import mx.containers.VBox;
                        import mx.controls.Alert;
                        import mx.controls.Button;
                        import mx.controls.CheckBox;
                        import mx.controls.Label;
                        import mx.rpc.events.FaultEvent;
                        import mx.rpc.events.ResultEvent;
                       
                        private var chk:CheckBox;
                        private var arow:GridRow;
                        private var arrOfCellObj:GridItem;
                        private var selectedItem:Array= new Array();
                        private var vbox:VBox;
                       
                        [Bindable]
                        private var photoFeed:XML;
                       
                        // Result handler - xml data
                        private function photoResultHandler(event:ResultEvent):void {
                            photoFeed = event.result as XML;
                            var xmlList:XMLList = XML(event.result).company;
                            xmlListColl = new XMLListCollection(xmlList);
                            createGrid();
                        }
                       
                        // Fault handler - displays the error
                        private function photoFaultHandler(event:FaultEvent):void {
                            Alert.show(event.fault.message, "Could not load photo feed");
                        }
                       
                        public function doChange(event:Event):void
                        {
                            if (event.currentTarget.selected== true){
                                Alert.show(event.currentTarget.label);
                            }
                           
                        }
                        //
                        private function createGrid():void{
                            var rowLen:int;
                            rowLen=photoFeed.company.length()/4;
                            rowLen +=photoFeed.company.length()%4
                           
                            var cellNum:Number = 0;               
                            for(var i:int=0; i<rowLen; i++) {
                                arow = new GridRow();
                                arow.percentWidth = 100;
                               
                                for(var j:int=0; j<4; j++) {
                                    if (cellNum == photoFeed.company.length()){
                                        break;
                                    }
                                    var chkLen:Number;
                                    chkLen=photoFeed.company[cellNum].product.length();
                                    arrOfCellObj = new GridItem();
                                    arrOfCellObj.setStyle("paddingBottom", 30);
                                    arrOfCellObj.id="gridItem"+cellNum;
                                    vbox = new VBox();
                                    var lab:Label= new Label();
                                    lab.text=photoFeed.company[cellNum].@name;
                                    vbox.id="vboxs"+cellNum;
                                    vbox.addChild(lab);
                                    for(var k:int=0; k<chkLen; k++) {
                                        chk =new CheckBox();
                                        var chkLabel:String= photoFeed.company[cellNum].product[k].@model
                                        chk.data=chkLabel;
                                        chk.label=chkLabel;
                                        chk.id="chks"+j+k;
                                        chk.selected="{cb.selected}";
                                        chk.addEventListener(Event.CHANGE,doChange)     ;
                                        vbox.addChild(chk);
                                    }
                                   
                                    //add the vobx to the grid item here
                                    arrOfCellObj.addChild(vbox);
                                   
                                    //add the grid item to the row
                                    arow.addChild(arrOfCellObj);
                                    cellNum++;
                                }
                                //add the row to the grid
                                myGrid.addChild(arow);
                            }
                           
                        }
                       
                       
                        private function checkBox_change(evt:Event):void {
                            var ch:CheckBox = evt.currentTarget as CheckBox;
                            var bCheckBoxState:Boolean = (evt.target as CheckBox).selected
                            Alert.show(String(bCheckBoxState));
                           
                        }
                                       
                        private function compareAll():void{
                            Alert.show();
                        }
                       
                    ]]>
                </fx:Script>
               
                <fx:Declarations>
                <mx:HTTPService id="photoService"
                                    url="data/netbooks.xml"
                                    resultFormat="e4x"
                                    result="photoResultHandler(event);"
                                    fault="photoFaultHandler(event);"/>
                    <mx:XMLListCollection id="xmlListColl" />
                </fx:Declarations>
               
                <s:applicationComplete>
                    photoService.send();
                </s:applicationComplete>

             

                    <mx:VBox verticalScrollPolicy="auto" width="900" height="100%" id="chkVbox">
                        <mx:HBox paddingBottom="30">
                            <mx:CheckBox id="cb" change="checkBox_change(event)" label="{cb.selected ? 'Select None' : 'Select All'}" />
                            <mx:Button label="Compare" click="compareAll()" />
                           
                        </mx:HBox>
                        <mx:Grid id="myGrid" horizontalGap="60" verticalGap="0" />
                    </mx:VBox>
            </s:Application>

            • 3. Re: select all checkbox in Grid
              BhaskerChari Level 4

              Hi,

               

              Can you post your netbooks.xml file..?

               

              Thanks,

              Bhasker Chari

              • 4. Re: select all checkbox in Grid
                srinth Level 1

                <?xml version="1.0" encoding="utf-8"?>
                <notebooks type="Netbooks">
                <company name="Asus">
                     <product model="Asus Eee PC S101" company="Asus" image="assets/Asus_Eee_PC_S101.png">
                          <general>
                          </general>
                     </product>
                     <product model="Asus N10" company="Asus" image="assets/Asus_N10.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     <product model="Asus Eee PC 1002HA" company="Asus" image="assets/Asus_Eee_PC_1002HA.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     <product model="Asus Eee PC T91" company="Asus" image="assets/Asus_Eee PC T91.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     <product model="Asus Eee PC T101H" company="Asus" image="assets/Asus_Eee PC T101H.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     <product model="Asus Eee PC 1000HE" company="Asus" image="assets/Asus_Eee PC 1000HE.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     <product model="Asus Eee PC 1005HA Seashell" company="Asus" image="assets/Asus_Eee PC 1005HA Seashell.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     <product model="Asus Eee PC 1008HA Seashell" company="Asus" image="assets/Asus_Eee PC 1008HA Seashell.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     <product model="Asus Eee PC 1008HA Seashell" company="Asus" image="assets/Asus_Eee PC 1008HA Seashell.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     </company>
                     
                     <company name="Acer">
                     <product model="Acer Aspire One" company="Acer" image="assets/Acer_Aspire One.png">
                          <general>
                               <dimensions>10.3 * 6.56 * 0.99</dimensions>
                               <weight>2.13lb / 1.01kg</weight>
                               <startingPrice>$399</startingPrice>
                               <battery>TBD, 3-cell 26 Whr (up to 3.5hrs), 6-cell 52 Whr (up to 7hrs)</battery>
                          </general>
                     </product>
                     <product model="Acer Aspire One D150" company="Acer" image="assets/Acer_Aspire One D150.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     <product model="Acer Aspire One D250" company="Acer" image="assets/Acer_Aspire One D250.png">
                          <general>
                          </general>
                     </product>
                     </company>
                     
                     <company name="Lenovo">
                     <product model="Lenovo IdeaPad S10" company="Lenovo" image="assets/Lenovo_IdeaPad S10.png">
                          <general>
                          </general>
                     </product>
                     </company>
                
                <company name="HP">
                     <product model="HP Mini 1000" company="HP" image="assets/HP_Mini_1000.png">
                          <general>
                          </general>
                     </product>
                     <product model="HP Mini-Note 2140" company="HP" image="assets/HP_MiniNote_2140.png">
                          <general>
                          </general>
                     </product>
                     <product model="HP Mini 110" company="HP" image="assets/HP_Mini_110.png">
                          <general>
                          </general>
                     </product>
                     <product model="HP Mini 110 Studio Tord Boontje" company="HP" image="assets/HP_Mini_110_Studio_Tord_Boontje.png">
                          <general>
                          </general>
                     </product>
                     <product model="HP Eee PC 901" company="HP" image="assets/HP_Eee_PC_901.png">
                          <general>
                          </general>
                     </product>
                </company>
                     
                     <company name="Samsung">
                     <product model="Samsung NC10" company="Samsung" image="assets/Samsung_NC10.png">
                          <general>
                               <dimensions>10.3 * 6.56 * 0.99</dimensions>
                               <weight>2.13lb / 1.01kg</weight>
                               <startingPrice>$399</startingPrice>
                               <battery>TBD, 3-cell 26 Whr (up to 3.5hrs), 6-cell 52 Whr (up to 7hrs)</battery>
                          </general>
                     </product>
                     <product model="Samsung NC110" company="Samsung" image="assets/Samsung_NC110.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     <product model="Samsung NC310" company="Samsung" image="assets/Samsung_NC310.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     </company>     
                     
                     <company name="MSI">
                     <product model="MSI Wind U100" company="MSI" image="assets/MSI_Wind U100.png">
                          <general>
                               <dimensions>10.3 * 6.56 * 0.99</dimensions>
                               <weight>2.13lb / 1.01kg</weight>
                               <startingPrice>$399</startingPrice>
                               <battery>TBD, 3-cell 26 Whr (up to 3.5hrs), 6-cell 52 Whr (up to 7hrs)</battery>
                          </general>
                     </product>
                     <product model="MSI Wind 120" company="MSI" image="assets/MSI_Wind 120.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     <product model="MSI Wind 115" company="MSI" image="assets/MSI_Wind 115.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     <product model="MSI Wind U123" company="MSI" image="assets/MSI_Wind U123.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     </company>          
                     
                     <company name="Sony">
                     <product model="Sony VAIO P Lifestyle PC" company="Sony" image="assets/Sony_VAIO P Lifestyle PC.png">
                          <general>
                               <dimensions>10.3 * 6.56 * 0.99</dimensions>
                               <weight>2.13lb / 1.01kg</weight>
                               <startingPrice>$399</startingPrice>
                               <battery>TBD, 3-cell 26 Whr (up to 3.5hrs), 6-cell 52 Whr (up to 7hrs)</battery>
                          </general>
                     </product>
                     <product model="Sony VAIO W" company="Sony" image="assets/Sony_VAIO W.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     </company>          
                     
                     <company name="LG">
                     <product model="LG X120" company="LG" image="assets/LG_X120.png">
                          <general>
                               <dimensions>10.3 * 6.56 * 0.99</dimensions>
                               <weight>2.13lb / 1.01kg</weight>
                               <startingPrice>$399</startingPrice>
                               <battery>TBD, 3-cell 26 Whr (up to 3.5hrs), 6-cell 52 Whr (up to 7hrs)</battery>
                          </general>
                     </product>
                     <product model="LG X110" company="LG" image="assets/LG_X110.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     </company>     
                     
                     <company name="Dell">
                     <product model="Dell Inspiron Mini 9" company="Dell" image="assets/Dell_Inspiron_Mini_9.png">
                          <general>
                               <dimensions>10.3 * 6.56 * 0.99</dimensions>
                               <weight>2.13lb / 1.01kg</weight>
                               <startingPrice>$399</startingPrice>
                               <battery>TBD, 3-cell 26 Whr (up to 3.5hrs), 6-cell 52 Whr (up to 7hrs)</battery>
                          </general>
                     </product>
                     <product model="Dell Inspiron Mini 10" company="Dell" image="assets/Dell_Inspiron_Mini_10.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     <product model="Dell Inspiron Mini 10v" company="Dell" image="assets/Dell_Inspiron_Mini_10v.png">
                          <general>
                               <dimensions>10.3 * 6.5 * 1.05"</dimensions>
                               <weight>2.6lb / 1.19kg</weight>
                               <startingPrice>$449</startingPrice>
                               <battery>3-cell Li-ion (std), 6-cell option</battery>
                          </general>
                     </product>
                     </company>
                </notebooks>
                
                 
                

                • 5. Re: select all checkbox in Grid
                  BhaskerChari Level 4

                  Hi Srinth,

                   

                  Please find the working code below, I had to do a bit of hard work to acheive this..

                   

                  Just replace these below two functions in your code....It works exactly the way you needed.

                   

                  If this post answers your question or helps, please kindly mark it as such.

                   

                  private function checkBox_change(evt:Event):void {
                                  var ch:CheckBox = evt.currentTarget as CheckBox;
                                  var bCheckBoxState:Boolean = (evt.target as CheckBox).selected;
                                 
                                  //Alert.show(String(bCheckBoxState));
                                 
                                  for(var i:int=0;i<myGrid.numChildren;i++)
                                  {
                                   var gridRow:GridRow = myGrid.getChildAt(i) as GridRow;
                                   for(var j:int=0;j<gridRow.numChildren;j++)
                                   {
                                    var gridItem:GridItem = gridRow.getChildAt(j) as GridItem;
                                    for(var k:int=0;k<gridItem.numChildren;k++)
                                    {
                                     var vBox:VBox = gridItem.getChildAt(k) as VBox;
                                     for(var l:int=0;l<vBox.numChildren;l++)
                                     {
                                      var chkBox:*;
                                      chkBox = vBox.getChildAt(l) as DisplayObject;
                                      if(getQualifiedClassName(chkBox) == "mx.controls::CheckBox")
                                      {
                                       chkBox.selected = bCheckBoxState;
                                      }
                                     }
                                    }
                                   }
                                  }
                              }
                                             
                              private function compareAll():void{
                               var selCheckBoxCount:int=0;
                               for(var i:int=0;i<myGrid.numChildren;i++)
                                  {
                                   var gridRow:GridRow = myGrid.getChildAt(i) as GridRow;
                                   for(var j:int=0;j<gridRow.numChildren;j++)
                                   {
                                    var gridItem:GridItem = gridRow.getChildAt(j) as GridItem;
                                    for(var k:int=0;k<gridItem.numChildren;k++)
                                    {
                                     var vBox:VBox = gridItem.getChildAt(k) as VBox;
                                     for(var l:int=0;l<vBox.numChildren;l++)
                                     {
                                      var chkBox:*;
                                      chkBox = vBox.getChildAt(l) as DisplayObject;
                                      if(getQualifiedClassName(chkBox) == "mx.controls::CheckBox")
                                      {
                                       if(chkBox.selected)
                                       {
                                        selCheckBoxCount += 1;
                                       }
                                      }
                                     }
                                    }
                                   }
                                  }
                                  Alert.show("Selected ChecBoxes = " + selCheckBoxCount.toString());
                              }

                   

                  If this post answers your question or helps, please kindly mark it as such.


                  Thanks,

                  Bhasker Chari

                   

                  • 6. Re: select all checkbox in Grid
                    BhaskerChari Level 4

                    Hi Srinth,

                     

                    Have you tested the code...Is it working for you...?

                     

                    Its working perfectly right on my side...

                     

                     

                    Thanks,

                    Bhasker Chari

                    • 7. Re: select all checkbox in Grid
                      srinth Level 1

                      Hi Bhasker Chari,

                       

                      You made my day

                       

                      Thanks 

                      Srinath