Home > Flex > Setting a default “selectedIndex” on an mx Control

Setting a default “selectedIndex” on an mx Control

This is the scenario I was faced with just the other day :
User is presented with your stock standard image gallery, only this time I had to write it all in Flex / AS3. Simple enough really, until I got stuck on a rather silly issue. It took me quite some time to find the solution and even then, I’m not quite satisfied with it – especially seeing as I’m making use of the Mate framework in this instance.

Ok, so on your right is a TileList of thumbnails. When the user clicks on a thumbnail, the larger version of the image is promptly displayed in a VBox on the left. Pretty straightforward stuff.

Now – when the app first loads, what I needed to do was display the first thumbnail’s “larger version” in the VBox by default – otherwise it looks empty and a little unprofessional. Still easy – all we need to do is execute a function when the TileList’s “onCreationComplete” event fires. All this function needs to do is set the TileList dataProvider’s selectedIndex to 0 ( as it’s blank by default ).

But what happens when the user performs a search ( chooses another category/album ) and the dataProvider’s content is replaced with a new ArrayCollection ?  The selectedIndex gets reset to null of course and your “larger image” disappears. 

This is where I got stuck – and I tried all sorts of things after finding out that the “dataChange” event doesn’t work. The problem wasn’t finding out when the ArrayCollection was replaced – the problem was setting the TileList dataProvider’s selectedIndex from within an “outside” class. I still don’t know how to do so unfortunately – so if you’re reading this and know of a better way to solve this problem, please feel free to leave a comment – and just write my stupidity off to “Flex Noobness”.

In the end I found that the “updateCompleted” event for the TileList fires when the dataProvider’s contents gets replaced. So what I ended up with is the following code, which I hope will help someone else in a similar predicament.

	xmlns:mx="http://www.adobe.com/2006/mxml	xmlns:model="com.gallery.model.*	xmlns:viewUtils="com.asfusion.mate.viewUtils.*" xmlns:controls="qs.controls.*">



			import com.gallery.events.*;
			import mx.collections.ArrayCollection;

			public function setItemDefault() : void{
				if (!list.selectedItem && model.currentSet != null && model.currentSet.length > 0){
					list.selectedIndex = 0;



	<model:PhotoViewerModel id="model" />

	<mx:TileList id="list"
		itemRenderer="com.gallery.ui.renderers.Thumbnail		width="100%" height="100%" updateComplete="{setItemDefault()}"/>
  1. defucius
    November 9, 2008 at 6:59 am

    Thanks you very much! Ran into a similar scenario and found a handful of posts asking the question (possibily from the same user). This is exactly what I need and it works beautifully.

  2. calisza
    November 9, 2008 at 9:37 pm

    Hi defucius,

    So glad I could help. It kept me busy for hours the first time round.

  3. Kerri
    December 15, 2009 at 10:21 pm

    Thank you:)

  4. misha
    December 16, 2009 at 6:10 pm

    list.indexToItemRenderer(list.selectedIndex) 😉

  5. John
    July 26, 2012 at 6:05 am

    Thank you SO MUCH for posting this. I have a complex data binding situation and have been pulling my hair out on this one for awhile. You’re right – ‘dataChanged’ is totally useless. updateComplete is a gem. Thanks!!

  1. August 6, 2008 at 4:14 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: