How to programatically select an item in a Flex List after dataProvider is updated?

Question

As I am somewhat new to Flex I may be missing something fundamental here. I have a Spark List container whose dataProvider is bound to a result set coming back from a RemoteObject call. Pretty standard stuff.

<s:List id="list" dataProvider="{model.stuff}" width="100%" height="100%"
        selectedIndex="@{selectedSlider.value}"
        itemRenderer="{stuffRenderer}">

</s:List>

The selectedIndex is associated with an HSlider, but that is not the problem. My issue is that I would like to automatically select a certain "preferred" element from the list (only initially...to guide the user).

I tried to do that in a creationComplete event but my data hadn't shown up yet...setting selectedIndex didn't work...it was too early.

What's the right way to do this?

Answer 1

private function findAllUsers_resultHandler(e:ResultEvent):void
{
    list.dataProvider = new ArrayCollection(e.result as Array);
    if(firstTry)
    {
        list.selectedIndex = 0;
        firstTry = false;
    }
}

Answer 2

spark.components.List has spark.components.SkinnableDataContainer in its class hierarchy which dispatches a dataProviderChanged event whenever the dataProvider changes. Unfortunatly there is no [Event] metadata in SkinnableDataContainer that allows using this event in MXML. So, you'll need to create your own custom component that extends List.

package
{
    import spark.components.List;

    [Event(name="dataProviderChanged", type="flash.events.Event")]
    public class MyList extends List
    {
        public function MyList()
        {
            super();
        }
    }
}

By using your custom component you can add an event listener for dataProviderChanged and update your selectedIndex accordingly.

<ns1:MyList id="list" dataProvider="{model.stuff}" width="100%" height="100%"
        dataProviderChanged="selectedIndex = selectedSlider.value"
        selectedIndex="@{selectedSlider.value}"
        itemRenderer="{stuffRenderer}">
</ns1:MyList>

BTW: This works with other List-based components (like DropDownList) too.

Answer 3

I believe it should work if you just set the initial value of the slider to the index you want to be selected at the beginning. Something like this:

<s:List dataProvider="{yourData}" selectedIndex="{hSlider.value}" /> <s:HSlider id="hSlider" minimum="0" maximum="{yourData.length - 1}" stepSize="1" value="theIndexYouWantAsInitial" liveDragging="true" />

That should work. HTH FTQuest