How to Select All checkboxes in Flex Item Renderer?

Question

I am stuck at a point where I need to select all check boxes of the Item Renderer.

I have a Select All button on whose click my all check boxes needs to get selected. Is it possible to do in Flex item renderer.

Below is my code for item renderer:

                          rowCount="2" columnCount="5" dragEnabled="false" dragMoveEnabled="false" height="100%"  width="100%" verticalScrollPolicy="on" verticalScrollPosition="0" selectable="false">



<mx:itemRenderer>

                        <fx:Component>

                            <!--<mx:VBox height="100%" width="100%" verticalGap="0">-->


                            <mx:VBox width="175" height="200" verticalGap="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" >

                                <fx:Script>

                                    <![CDATA[
                                        import mx.collections.ArrayCollection;
                                        import mx.controls.Alert;
                                        import mx.controls.List;
                                        import mx.core.FlexGlobals;
                                        import mx.utils.ObjectUtil;

                                        [Bindable]   

                                        public var productData:Array = new Array();

                                        import mx.collections.ArrayCollection;
                                        import mx.controls.listClasses.BaseListData;
                                        private var _listData:BaseListData;
                                        private var _tileList:List;
                                        [Bindable("dataChange")]
                                        public function get listData():BaseListData
                                        {
                                            return _listData;
                                        }
                                        public function set listData(value:BaseListData):void
                                        {
                                            _listData = value;
                                            _tileList = value.owner as List;
                                        }
                                        override public function set data(value:Object):void
                                        {
                                            super.data = value;
                                            checkFileToDownload.selected = value["isSelected"];
                                        }
                                        private function onChange(event:Event):void
                                        {
                                            data["isSelected"] = checkFileToDownload.selected;
                                            FlexGlobals.topLevelApplication.checkFileToDownload(event); 
                                        }


                                        /* protected function checkSelectedFile(event:MouseEvent):void
                                        {
                                            // TODO Auto-generated method stub

                                                checkFileToDownload.selected = true;

                                                FlexGlobals.topLevelApplication.generateDownloadFileArray("push",checkFileToDownload.name,checkFileToDownload.automationName);
                                                outerDocument.downloadButtonStatus(event)


                                        } */

                                    ]]>

                                </fx:Script>

                                <mx:HBox id="currentTileElement">

                                    <s:CheckBox id="checkFileToDownload" name="{data.itemUrl}"  automationName="{data.contentId}"
                                                change="{onChange(event)}"
                                                skinClass="com.skinClass.CustomCheckBoxSkin" click="{outerDocument.downloadButtonStatus(event)}"/>

                                    <mx:TextArea wordWrap="true" fontWeight="bold" text="{data.title}" borderStyle="none"  verticalScrollPolicy="off" 

                                                 horizontalScrollPolicy="off" textAlign="left" editable="false"/>


                                </mx:HBox>

                                <mx:HBox>

                                    <mx:Image  source="{'/assets/'+data.contentId.substring(1, 2)+'.png'}" maintainAspectRatio="true"/>

                                    <mx:Image id="tileListImageSource" width="150" height="75" maintainAspectRatio="false"

                                              source="{data.localActualPath}"/>

                                </mx:HBox>


                            <!--    <mx:HBox  horizontalGap="0">

                                    <mx:Repeater id="itemCategory" dataProvider="{data.category.split('|')}">

                                        <mx:Text textAlign="left"  text="{itemCategory.currentItem}"  color="#FF9900" fontWeight="bold"  fontSize="9"  />

                                    </mx:Repeater>

                                </mx:HBox> -->


                                <mx:VBox  horizontalGap="0" width="100%" verticalGap="0" paddingLeft="25">
                                    <s:Spacer height="2"/>

                                    <mx:TextArea text="{data.author.split('|')}" color="#FF9900" fontWeight="bold" chromeColor="white" height="40" editable="false" wordWrap="true" borderStyle="none" verticalScrollPolicy="on" horizontalScrollPolicy="off" textAlign="left"/>
                                    <!-- <mx:Repeater id="authorCategory" dataProvider="{data.author.split('|')}">
                                        <mx:Text textAlign="left" fontSize="11" fontSharpness="400" fontWeight="bold" color="#FF9900"   text="{authorCategory.currentItem}"/>
                                    </mx:Repeater> -->
                                    <s:Spacer height="2"/>
                                    <mx:Text fontSize="11" text="{data.publishedDate}"/>
                                    <s:Spacer height="2"/>
                                    <mx:HBox horizontalGap="0" verticalGap="0">
                                        <mx:Text fontWeight="bold" fontSize="10" text="File Size: " paddingRight="0"/><mx:Text fontSize="10" color="red" paddingLeft="0" fontWeight="bold" text="{data.itemSize}MB"/>   
                                    </mx:HBox>
                                </mx:VBox>
                            </mx:VBox>


                        </fx:Component>

                    </mx:itemRenderer>

                </mx:TileList>

Any help is appreciated.

Thanks, Ankit Tanna.

Answer 1

You can affect all the checkboxes in your list by changing a property in the dataprovider;s objects and binding to that. Something like this in your click handler:

public function selectAllBtnClickHandler(e:MouseEvent):void {
  if (selectAllBtn.selected) {
    for each (var value:Object in checkboxList.dataProvider) {
      value["isSelected"] = true;
    }
  }
}

Then change your checkbox declaration as follows:

<s:CheckBox id="checkFileToDownload" name="{data.itemUrl}"  automationName="{data.contentId}"
change="{onChange(event)}" selected="{data.isSelected}"
skinClass="com.skinClass.CustomCheckBoxSkin" click="{outerDocument.downloadButtonStatus(event)}"/>

Answer 2

I want to clear the concept of Brian a bit , so that you can understand it better.

Here is an array collection i am using to populate the grid below

[Bindable] private var testArray:ArrayCollection = new ArrayCollection
            (
                [
                    {NAME:'Alan',DEPT:'CIS',ADDRESS:'dhaka',chk:0},
                    {NAME:'Jordan',DEPT:'CIS',ADDRESS:'dhaka',chk:1},
                    {NAME:'Simmi',DEPT:'CIS',ADDRESS:'dhaka',chk:0},
                    {NAME:'Alex',DEPT:'CIS',ADDRESS:'dhaka',chk:1},
                    {NAME:'Adams',DEPT:'CIS',ADDRESS:'dhaka',chk:0}
                ]
            );

here goes the code of datagrid

<mx:DataGrid height="100%" width="100%" id="dataGrid" dataProvider="{testArray}">
        <mx:columns>
            <mx:DataGridColumn headerText="Name" dataField="NAME"/>
            <mx:DataGridColumn headerText="Department" dataField="DEPT"/>
            <mx:DataGridColumn headerText="Address" dataField="ADDRESS"/>
            <mx:DataGridColumn headerText="Address" dataField="chk">
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:CheckBox selected="{data.chk==1?true:false}"/>
                    </fx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
<mx:Button label="Check All" click="button1_clickHandler(event)"/>

Notice the item renderer which is a check box is looking on the value of "chk". You can make all the check boxes "CHECKED" by clicking "Check All" button. here is the "button1_clickHandler" function

protected function button1_clickHandler(event:MouseEvent):void
        {
            for(var i:int=0;i<testArray.length;i++)
            {
                testArray[i].chk = 1;
            }
            testArray.refresh();

        }