Visible property in ItemRenderer

Question

Hi there,
I have a very basic question. I'm trying to hide a canvas in the itemrender of a list
<mx:List dataProvider="{currentCollection}" width="100%" height="100%">
  <mx:itemRenderer>
   <mx:Component>
    <mx:Canvas visible="false" includeInLayout="false">
    </mx:Canvas>
   </mx:Component>
  </mx:itemRenderer>
It seems that it cannot hide the first element after component? the following code works:
<mx:List dataProvider="{currentCollection}" width="100%" height="100%">
  <mx:itemRenderer>
   <mx:Component>
    <mx:Canvas>
   <mx:Canvas visible="false"includeInLayout="false">
      </mx:Canvas>
    </mx:Canvas>
   </mx:Component>
  </mx:itemRenderer>
But that is pretty pointless-the top canvas anyway takes up the space
Any idea how to hide items in a list? Do i have to make my own itemrenderer?
any advice would be appreciated

Answer 1

There is an alternative:
Take two arrayCollections. The first one holds your application data, so you shouldn't filter this right?
The second one is bound to the dataProvider of your list.
Now, use the filter function of the source array of your first collection to fill your second one. The array.filter function creates a new array!
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var mainColl:ArrayCollection;
            [Bindable]
            private var dp:ArrayCollection = new ArrayCollection();
            private function init():void
                var a:Array = [{label: "Item 1", available: 1},
                                {label: "Item 2", available: 0},
                                {label: "Item 3", available: 0},
                                {label: "Item 4", available: 1},
                                {label: "Item 5", available: 1}];
                mainColl = new ArrayCollection(a);
                showAll();
            public function filterAvailable():void
                dp.source = mainColl.source.filter(function callback(item:*, index:int, array:Array):Boolean
                            return item.available == 1;
            public function showAll():void
                dp.source = mainColl.source.filter(function callback(item:*, index:int, array:Array):Boolean
                            return true;
        ]]>
    </mx:Script>
    <mx:HBox>
        <mx:List dataProvider="{mainColl}" width="400" height="400" labelField="label"/>
        <mx:List dataProvider="{dp}" width="400" height="400" labelField="label"/>
    </mx:HBox>
    <mx:Button label="Show available" click="filterAvailable()"/>
    <mx:Button label="Show all" click="showAll()"/>
</mx:Application>
Dany