How to synchronize between Itemrenderer and component

Question

I have a List component using Checkbox as ItemRenderer. Now the problem is there is no synch between checkbox and List selection. When the checkbox is selected/desected, I want to update selectedIndices property of the List and vice versa. The list is allowing multiple selection.

Any sample code for this?

My code is as below:

Assign Itemrenderer in List component:

_list.itemRenderer=new ClassFactory(CheckBoxRenderer);

CheckBoxRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:CheckBox xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        label="{data.name}"
        selected="{data.isSelected}">
</mx:CheckBox>

Answer 1

If I understood your problem correctly, here is my solution and the running example.

I added a data grid to let you see that the data provider is changed after user interaction.

//Application

<?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" minWidth="955" minHeight="600">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.CollectionEvent;

        [Bindable]private var dp:ArrayCollection = new ArrayCollection([
            {name: "record01", isSelected: false}, 
            {name: "record02", isSelected: true}, 
            {name: "record03", isSelected: false}]);

        protected function onClick(event:MouseEvent):void
        {
            myDG.dataProvider.dispatchEvent( new CollectionEvent(CollectionEvent.COLLECTION_CHANGE));
        }
    ]]>
</fx:Script>

<s:VGroup x="10" y="10">

    <s:List dataProvider="{dp}" itemRenderer="renderers.CheckBoxRenderer" click="onClick(event)"/>

    <s:Spacer height="20"/>

    <s:DataGrid id="myDG" height="120" dataProvider="{dp}">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="name" headerText="Name" width="70"/>
                <s:GridColumn dataField="isSelected" headerText="IsSelected" width="90"/>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>

</s:VGroup>

</s:Application>

//Renderer

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            autoDrawBackground="true">
<fx:Script>
    <![CDATA[
        protected function onChangeEvent(event:Event):void
        {
            data.isSelected = !data.isSelected;
        }
    ]]>
</fx:Script>

<s:CheckBox label="{data.name}" selected="{data.isSelected}" change="onChangeEvent(event)"/>

</s:ItemRenderer>

EDIT

As I mentioned the data grid was added only to show the changes in the data provider. Here is the code without additional components.

You need to control the data provider through the debuger to see that it is being changed.

The button was added just to invoke the debugger on trace() line.

//Application without the grid

<?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" minWidth="955" minHeight="600">

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import renderers.CheckBoxRenderer;

        [Bindable]private var dp:ArrayCollection = new ArrayCollection([
            {name: "record01", isSelected: false}, 
            {name: "record02", isSelected: true}, 
            {name: "record03", isSelected: false}]);

        protected function onBtnClick(event:MouseEvent):void
        {
            trace();
        }

    ]]>
</fx:Script>

<s:VGroup x="10" y="10">
    <s:List dataProvider="{dp}" itemRenderer="renderers.CheckBoxRenderer"/>
    <s:Button click="onBtnClick(event)"/>
</s:VGroup>

</s:Application>

EDIT2

If you want to restrict the max number of selected items have a look at this code. It works well by me. This time I inserted the itemRenderer in the List definition.

Here is the working example.

<?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" minWidth="955" minHeight="600" 
           creationComplete="{reculcSelectedCount()}">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        private var _selectedCount:int = 0;

        [Bindable]private var dp:ArrayCollection = new ArrayCollection([
            {name: "record01", isSelected: false}, 
            {name: "record02", isSelected: true}, 
            {name: "record03", isSelected: false},
            {name: "record04", isSelected: false}]);

        [Bindable]public function get selectedCount():int
        {
            return _selectedCount;
        }

        public function set selectedCount(value:int):void
        {
            _selectedCount = value;
        }

        protected function onClick(event:MouseEvent):void
        {
            reculcSelectedCount();
        }

        protected function reculcSelectedCount():void
        {
            selectedCount = 0;
            for each (var item:Object in dp)
            {
                if (item.isSelected)
                    selectedCount++;
            }
        }

    ]]>
</fx:Script>

<s:VGroup x="10" y="10">
    <s:List dataProvider="{dp}" click="onClick(event)">
        <s:itemRenderer>
            <fx:Component>
                <mx:HBox>
                    <fx:Script>
                        <![CDATA[
                            protected function onChangeEvent(event:Event):void
                            {
                                data.isSelected = !data.isSelected;
                            }
                        ]]>
                    </fx:Script>
                    <s:CheckBox id="cb" label="{data.name}" selected="{data.isSelected}" enabled="{data.isSelected || (!data.isSelected &amp;&amp; (outerDocument.selectedCount &lt; 2))}" change="onChangeEvent(event)"/>
                </mx:HBox>
            </fx:Component>
        </s:itemRenderer>
    </s:List>
</s:VGroup>
</s:Application>