May 28, 2007 

Flex Tip: Changing the source of an ArrayCollection

Here is a quick tip for Flex newbies although I imagine this is something thats fairly obvious. If you want to change the complete dataset of an ArrayCollection, do not create a new ArrayCollection object pointing to the same variable(well you can, but it will kill all the databound controls that are listening to events on the ArrayCollection instance). Instead use arraycollection.source = [ ... ] to repopulate the source value with a new Array. This will broadcast a CollectionEvent with the ‘kind’ property of the event set to ‘RESET’ and keep all the controls in sync. CollectionEvents are broadcasted everytime the values in an ListCollectionView instance are changed (ArrayCollections extend ListCollectionView).

I just saw this bug on an application I was working on where the controls kept getting out of sync with the core data in the ArrayCollection and this was the culprit ! The code looked something like this:

[AS]

[Bindable]
public var dataAC:ArrayCollection;
…
private function onDataLoaded(evt:Event){
dataAC = new ArrayCollection(parseIntoArray(evt.data));
}

[/AS]

So everytime the new data came in, databinding was destroyed. The correct solution should have looked like:

[AS]

[Bindable]
public var dataAC:ArrayCollection = new ArrayCollection;
…
private function onDataLoaded(evt:Event){
dataAC.source = parseIntoArray(evt.data);
}

[/AS]

Hope this saves some time for someone :)

  • Pingback: Flex Tip: Changing The Source Of An... [Linkosphere]

  • Pingback: Code Sweat Blog » Blog Archive » Some Flex 2 Related Links (pt. two)

  • http://biztekpros.com umair

    Thanks,

    Very useful,

    Umair

  • oluwaseun

    great. thanks

  • Rajesh Bhadra

    Hi,
    do we have to refresh that arraycollection object after assigning to the data object.

  • Jamie McDaniel

    @Rajesh, It is not necessary to call the ArrayCollection’s refresh() method after changing the ArrayCollection’s source property. You can see for yourself in the source code for ListCollectionView (the superclass for ArrayCollection).

    /**
    * @private
    * When the source list is replaced, reset.
    */
    mx_internal function reset():void
    {
    internalRefresh(false);
    if (dispatchResetEvent)
    {
    var event:CollectionEvent =
    new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
    event.kind = CollectionEventKind.RESET;
    dispatchEvent(event);
    }
    }

    public function refresh():Boolean
    {
    return internalRefresh(true);
    }

    Notice that calling the refresh() method merely calls internalRefresh() — just like the reset() function does (which gets called when you change the source).