ItemRender data change

Question

I have a List with an ItemRenderer. When I click a button, then a property of the ArrayCollection I bound to the list is changed.

When I click the button, then it does change the property, but the list doesn't change.

How do I solve this.

Here's my code

<fx:Script>
    <![CDATA[

        [Bindable] 
        public var controllers:ControllerCollection = new ControllerCollection();

        private function hideTheFirstItem(evt:MouseEvent):void
        {
            (controllers[0] as Controller).meetsRequirements = false;

                    //these methods don't work unfortunatly
                    controllers.itemUpdated(controllers[0]);
                    controllers.refresh();

        }


    ]]>
</fx:Script>

<mx:List id="listControllers" dataProvider="{controllers}">
    <mx:itemRenderer>
        <fx:Component>
            <solutionItems:displaySolutionItem visible="{data.meetsRequirements}" />
        </fx:Component>
    </mx:itemRenderer>
</mx:List>
<mx:Button label="test" click="hideTheFirstItem(event)" />

(ControllerCollection extends ArrayCollection)

Thanks!

Vincent

Please show your item renderer. Also, what does ControllerCollection look like? — Brian Genisio, May 09 '11 at 14:53
Thanks for your reply. ControllerCollection is just an ArrayCollection actually. And nothing special going on in the itemrender. I'll add the code. — Vinzcent, May 09 '11 at 15:15

JeffryHouser · Answer 1 · 2011-05-09T19:36:44.490

2

Two ways:

Of course, ControllerCollection is not a standard Flex Collection class; so I am just assuming that it implements the ICollectionView interface.

Update: I do notice that your code is set to modify the first element of the ArrayCollection

private function hideTheFirstItem(evt:MouseEvent):void
{
 (controllers[0] as Controller).meetsRequirements = false;

 //these methods don't work unfortunatly
 controllers.itemUpdated(controllers[0]);
 controllers.refresh();
}

I wanted to be sure to specify that the first element of the collection may not be the first element currently visible in the view. I wonder if that is causing you issues.

edited May 09 '11 at 19:36

answered May 09 '11 at 15:08

JeffryHouser

39,401
4
38
59

Thanks for your reply, but the methods didn't work. Nothing changed. I've added your sugestions to my code above. – Vinzcent May 09 '11 at 15:16
Then tell us more about your ControllerCollection class. With an ArrayCollection either of those should work. – JeffryHouser May 09 '11 at 16:05
@Vinzcent I updated my answer a bit; but I'm just speculating on what may be the problem. You'll have to show us the itemRenderer and your custom Collection class so we can know for sure. – JeffryHouser May 09 '11 at 19:39

score 2 · Answer 2 · answered May 09 '11 at 19:44

Without seeing your item renderer, I need to make some assumptions.

First, I will assume that your item renderer is using data binding to the meetsRequirements property. If that is the case, then the meetsRequirements property needs to notify when that property changes. If you add the [Bindable] tag to that property or the Controller class, then the meetsRequirements property will notify the itemRenderer to update that field based on your data binding.

If my assumptions are wrong, we need to see the code to give you any further thoughts.

score 1 · Answer 3 · answered May 09 '11 at 15:32

Try this:

<fx:Script>
    <![CDATA[

        [Bindable(Event="refreshMyList")] 
        public var controllers:ControllerCollection = new ControllerCollection();

        private function hideTheFirstItem(evt:MouseEvent):void
        {
            (controllers[0] as Controller).meetsRequirements = false;

            dispatchEvent(new Event("refreshMyList"));
        }


    ]]>
</fx:Script>

score 1 · Accepted Answer · answered May 09 '11 at 16:54

First, don't try to create new collections if you don't need to.

I believe your problem lies with this statement: (controllers[0] as Controller).meetsRequirements = false; which should fail on compile because a collection item cannot be retrieved using the square bracket annotation. You need to use getItemAt(index:int) function.

Furthermore, you wouldn't want to set visible to false to an item renderer if you want to 'remove' it because then you'd have an empty spot. What you want to do is filter it out:

<s:Application creationComplete="onCreationComplete()">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable] public var data:ArrayCollection = new ArrayCollection();

            private function onCreationComplete():void
            {
                // TODO: need to add data here
                // Adding filter function
                data.filterFunction = filterItems;
            }

            private function filterItems(item:Object):Boolean
            {
                return item.meetsRequirements;
            }

            private function hideFirstItem():void
            {
                if(data.length > 0)
                {
                    Controller(data.getItemAt(0)).meetsRequirements = false;
                }

                data.refresh();
            }
        ]]>
    </fx:Script>

    <mx:List id="listControllers" dataProvider="{data}" />
    <mx:Button label="test" click="hideFirstItem()" />
</s:Application>

This should do it. Untested though.

Thank you very much. This filterFunction works the way I wanted. — Vinzcent, May 10 '11 at 07:25

ItemRender data change

4 Answers4