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
var listIndexPos:ArrayCollection = new ArrayCollection();
listIndexPos.addItem(IpodList.selectedIndices);
Keep your examples flowing, they're great for learning :)
P
I com form Taiwan
I study Flex too.
No luck :-(
Please if you get it working, shoot me an email by all means! Ta.
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.
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?
http://butterfliesandbugs.wordpress.com/2007/11/08...
Hope it'll help finding the root cause
Cheers
Ingo
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....
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
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!