How to Select All checkboxes in Flex Item Renderer? - actionscript-3

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();
}