3 Replies Latest reply on Feb 19, 2010 4:21 AM by archemedia

    Visible property in ItemRenderer

    opiator

      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

        • 1. Re: Visible property in ItemRenderer
          archemedia Level 4

          If you want to hide items in a list, simply filter the out of the dataProvider! Use the filterfunction of the ArrayCollection class for that. An example:

           

          <?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 dp: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}];
                          dp = new ArrayCollection(a);
                      }
                     
                      public function filterAvailable(item:Object):Boolean
                      {
                          return (item.available == 1);
                      }
                  ]]>
              </mx:Script>
             
              <mx:List dataProvider="{dp}" width="400" height="400" labelField="label"/>
              <mx:Button label="Show available" click="dp.filterFunction = filterAvailable;dp.refresh()"/>
              <mx:Button label="Show all" click="dp.filterFunction = null;dp.refresh()"/>
          </mx:Application>

           

          Hope this helps

           

          Dany

          1 person found this helpful
          • 2. Re: Visible property in ItemRenderer
            opiator Level 1

            Hi

             

            Thanx for the reply. I have a list of RSS items,after 20 items,I want display a button with "Show older items" and hide all old entries in the list

            The thing is my currentCollection is being used throughout the whole application,so filtering the objects out would require some extra ArrayCollections to store the filtered out items. But I guess at this point it's the best solution.

            Thanx for the help

            • 3. Re: Visible property in ItemRenderer
              archemedia Level 4

              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

              1 person found this helpful