Using Flex List Control's SelectedIndices and SelectedItems Properties to Pre-Select Multiple Items

Introduction

I'm working on a project where we allow the user to select multiple items from a list. If the user has previously selected multiple items in the list, then we show the user his previous selections as selected items in the list. I've developed a methodology to do this but would appreciate any feedback. Additionally, I'm using the selectedIndices property of the list control, but from the description of the selectedItems property, the selectedItems property would seem to be a better choice for pre-selecting multiple list items. However, I cannot figure out what values need to be in the array that I could assign to the selectedItems property. Please comment if you've learned how to assign a value to the list control's selectedItems property.

Discussion

Each item displayed in the Flex 2 list control has an index value. The index values start with 0 and the highest index value equals the number of items in the list minus 1. So if my list has 5 items, then the first item's index value is 0 and the last item's index value is 4. The list control has a property named selectedIndices (see reference 1). This property stores an array that hold the index values of items selected in the list control.

You can also set the value of the selectedIndices property by assigning it an array of index values. For example if I create an array of index values ( [0,3] ) and assign this array to the selectedIndices property of my list control ( myList.selectedIndices = [0,3] ) then the list will display as selected the first item (index 0) and the fourth item (index 3). The index value is always one less then the item's position in the list.

A challenge arises when you have stored in a database table id values that represent the items a user has previously selected and these id values don't equate to the index values of your list. This is normally the case because the list's index values may change in the future if you reorder the items in the list or add/subtract list items. So the id values stored in the database will usually have no relationship to the index values.

So I needed to develop a methodology for using the id values for a user's previous selections to pre-select the items in the list. Reference 2 provides an example of how I did this.

Example:

In my example, I display a list of iPod models. Suppose a user had previously logged in and selected multiple iPods. I stored the id values of the selected iPods (eg, 10, 14) and the user's id number (9999) into a database table (eg tblPersonToIPod). Next time the user visits the application I use his id number (9999) to pull out of the database the id values of the iPods the user previously selected so that I can pre-select those iPods in the list control.

The function below receives an array containing the id values of the iPod models that are stored in the database for this user. The nested for loops are used to determine if an id value matches an id value of one of the items displayed by the list. If there is a match, then the value of j (which will equal the index value for that list item) is stored in the selectedIpodIndices array. After the for loops are done, I set the value of the list control's selectedIndices property to the selectedIpodIndices array.



private function selectIpodsForUser(userIpods:Array):void {

/*stores the index values of the list control
items that should be selected*/


var selectedIpodIndices:Array = [ ];

/*
Loop over the array that stores the id of the iPods
the user had previously selected
If a value in that array matches one of the id
values in the lists data provider add the
element value to the selectedIpodIndices array
*/

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

     //j will represent the list item's index value

     for ( var j:int = 0; j < iPodAry.length; j++) {
    
         if ( userIpods[i] == iPodAry[j].id ) {
        
         selectedIpodIndices.push( j );
         break;
        
         } //end if
    
     } //end for ( var iPodObj:Object in iPodAry) {
    

} //end for ( var i:int in userIpods )


/*mark as selected those index values in the
selectedIpodIndices array*/


iPodList.selectedIndices = selectedIpodIndices ;

} //end function selectIpodsForUser

Conclusion and Questions

You can open the example and right click on it to see the complete source code. Any feedback on this methodology would be appreciated. I'd especially like to hear from someone who figured out how to assign a value to the selectedItems property of the list control. According to the Flex 2.0.1 language reference (reference 1 below) the selectedItems property is a read-write property that can be assigned an " array of references to the selected items in the data provider." But I'm not able to figure out what values need to go in that array to mark items in the list as selected. If I could get the selectedItems property to work then I wouldn't need the nested for loops (which are used to figure out which index values should be pre-selected).

References

Flex 2.0.1 Language Reference, List Control

Example of Using SelectedIndices Property to Pre-Select List Items

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Thanks for the useful example. It might be easier to get the indexs of the selected list elements using the following line of code.

var listIndexPos:ArrayCollection = new ArrayCollection();
listIndexPos.addItem(IpodList.selectedIndices);


Keep your examples flowing, they're great for learning :)

P
# Posted By P | 9/21/07 10:20 AM
Hi , I like your Example
I com form Taiwan
I study Flex too.
# Posted By Dian | 10/4/07 9:07 PM
Well, I'm in the same situation than you. I have a fairly complex app that needs the list element and multiple selection, but I'm still googling as to how the selectedItems property work!

No luck :-(

Please if you get it working, shoot me an email by all means! Ta.
# Posted By Nicolas | 10/17/07 9:50 PM
Nicolas - still have not figured out how to set the selectedItems property. When I do, I'll post an example.
# Posted By Bruce | 10/18/07 11:40 AM
I had my dataProvider as an arrayCollection of beans. When i selected couple of items on the grid and looked into the selectedItems property i found the selected beans.
So to pre-select items on the datagrid i actually create a new array of the beans I want selected and asssigned this new array to the selectedItems property.
# Posted By Ahmad Hamid | 11/7/07 9:12 PM
I 'resolved' my problem by using a small datagrid rather than a list. That will do.
# Posted By Nicolas | 11/7/07 9:16 PM
I like your Example
# Posted By Sac Büküm | 1/25/08 1:01 PM
Bruce, thanks for this little tidbit. I was just wondering why my code was not working when I tried to push() values directly into the selectedIndices property of the List control. Your code took care of that problem.
# Posted By Rob Munn | 2/16/08 8:48 PM
When you use the selectedItem property, it doesn't compare to see if values are the same, it checks to see if the item is the exact item it's being compared to. So you have to set it to an item from the dataprovider, otherwise it's set to a new object and won't work. I hope that helps.
# Posted By Marty Mickelson | 3/3/08 3:38 PM
Keyboard Question
If you hold down CTRL in in the box, you can scroll around with the arrow keys, and use the space bar to multiselect. If you don't hold CTRL, the arrow keys cause the selection to reset to the one element now highlighted

Does anybody know the setting to make it behave like the CTRL key is being held all the time?
# Posted By Adam Ashenfelter | 3/12/08 11:28 AM
thanks,you have solved my problem,bcoz i cant use push() method for selectedIndices.thanks
# Posted By kamran aslam | 5/6/08 1:56 AM
Wondering that this blog is not known here???
http://butterfliesandbugs.wordpress.com/2007/11/08...

Hope it'll help finding the root cause

Cheers
Ingo
# Posted By Ingo | 5/29/08 4:06 AM
Nice example...

I got it working.....

MXML side

<mx:List doubleClickEnabled="true" doubleClick="selAllDev()" width="100%" height="100%" id="lstDevStage" enabled="true" allowMultipleSelection="true"></mx:List>


Scirpt side

private function selAllDev():void
{   
var selInd:Array = [ ];
   for(var x:int = 0; x <= devStages.length; x++)
   {
   selInd.push(x);
   }            
   lstDevStage.selectedIndices = selInd;
}

devStages is my dataprovide (arrayCollection) for the list control....
# Posted By venky | 5/30/08 4:11 AM
Hi,
I'm facing a problem with shift key to select multiple items from a tree structure.With control key it works fine but with Shift Key the selectedItem is null.If anybody has information regarding this issue please send me your suggestion.

Thanks,
Chaitra
# Posted By Chaitra G | 7/15/08 3:27 AM
Thanks Bruce,

This helped me out a lot - just what I needed. My data is XML and I have a node that has a list of comma seperated IDs in it which should restore corresponding selected items in the List. Your method was exactly what I needed. Thanks!
# Posted By Dave | 7/9/09 11:25 AM
BlogCFC was created by Raymond Camden. This blog is running version 5.9.1.002. Contact Blog Owner