3 Replies Latest reply on Jul 23, 2010 2:40 AM by chris00chris

    Repeaters and DataGroups

    chris00chris

      Hi All,

       

      It seems that in Flex 4, the new Repeater is now the DataGroup. I think this is generally a good thing as Repeaters tend to have some strange functionality, especially when using recycleChildren.

       

      However, I seem to have a bit of a problem with DataGroup. I would like my particular ItemRenderer to know what index it is in the dataProvider, such that if a user interacts with it then it can call a method based on the index. Eg. itemClicked(itemRendererIndex), but there doesn't seem to be any way in which the item index can be passed to the ItemRenderer. I don't want to put the index in the dataProvider if possible as this array is remotely managed and can change at any time, which makes adding extra index data relatively complex.

       

      When using a repeater this was easy as I could just assign repeater.currentIndex to some property of the repeated component.

       

      Perhaps I am approaching the problem in the wrong way, so let me explain what I am trying to do...

      I want to arrange some buttons horizontally in a line, each of which represents the day of a month. I want the text of the buttons to be populated by an ArrayCollection. I want to do this with a dataProvider because the array length and contents may change and I want this to be reflected in the number of buttons and the button text. The array does not contain the day number, this is implicit in the item's position in the array. If the user clicks one of the buttons I then wish to call a function to say that day 'n' has been clicked, so each button has to know which day/index it is.

       

      I originally did this with a Repeater, which worked, but I'm not convinced this is the best way, plus I am trying to use pure Flex 4. I then tried with DataGroup, but I can't pass the index to the buttons!

       

      Perhaps there is a better way to do this?

       

      Any help is much appreciated,

      Thanks,

      Chris.

        • 1. Re: Repeaters and DataGroups
          UbuntuPenguin Level 4

          I would just go ahead and attach a listener to the arraycollection.   Something like this

           

          var collection:AC = new AC();

           

          collection.addEventListener(CollectionEvent.Change  , changeHandler);

           

          private function changeHandler( event:CollectionEvent  ):void

          {

            for( var i:int = 0; i < collection.length; i++  )

            {

               var object:Object = collection.getItemAt(i);

                object.index = i;

            }

          }

           

          If you truly don't want to do that ,  then you can hack something together using the

          listData class found on

          mx.controls.listClasses.IDropInListItemRenderer
          • 2. Re: Repeaters and DataGroups
            marcbir Level 1

            I avoid repeaters whenever I can.  Based on your description I would use something like the following.  Obviously change the click handler to your function call (itemClicked(event.target.owner.itemIndex)).

             

            Basically DataGroups use itemRenderers to render each item in the data provider, and itemRenderers publish the itemIndex and data attributes.  So you just need to hit the owner of the button to get the required info.

             

             

             

                <s:DataGroup dataProvider="{new ArrayList(['Monday', 'Tuesday', 'Wednesday', 'Otherday'])}" click="trace(event.target.owner.itemIndex, event.target.owner.data);">
                    <s:layout>
                        <s:HorizontalLayout />
                    </s:layout>
                    <s:itemRenderer>
                        <fx:Component>
                            <s:ItemRenderer>
                                <s:Button label="{data}" />
                            </s:ItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:DataGroup>

            • 3. Re: Repeaters and DataGroups
              chris00chris Level 1

              Thanks Marc. I did go for this approach in the end. Works well.