This is a little experiment to play with a different method of selecting items in a Flex List control. It allows you to re-create some of the multiple selection options you usually get by holding down the control or shift keys while you select items. But now you don’t need to hold down the control or shift keys. Just play with it to see what I mean, it’s hard to explain.
There was a question on flexcoders that was about something like this. I’m not sure if this little experiment solved the right problem for the original poster, but trying to figure out how to get some of the functionality of using the control and shift keys without using the actual keys was kind of interesting (what can I say… item renderers and list controls turn me on). So this is what I came up with. Another thing to note is that the checkbox acts as a visual indicator only, it is not actually a clickable control.
Have you tried click-and-drag to select ranges ?
It seems the shift click functionality takes precedence over attempts to replicate control click functionality. Perhaps it would be easier to replicate shift click only for items below the last item, that way you could start from the bottom and go up when you only want to control click a few items and not have to deselect the options between them.
Also, a bug: Click item 1, click item 19, click item 1, click item 2. Gives a type coercion error.
What I would love is to see this control in a combo box. Now that you have it working I am sure there is not much to it. But I think that would be a nice control.
Yeah, click and drag to select ranges would be much better. I might try to do that because I think that might actually be a useful control. This version that I posted might be useful for someone, but you certainly have to get to know how it works before you can use it, it doesn’t really make good intuitive sense. I think dragging to select ranges and then having the default clicks simulate control-clicks would actually be pretty intuitive for people. Only issue is if you’re trying to drag from a visible item to an item below the visible area. Should the list scroll automatically as you’re dragging (my first reaction is it should).
I’d say it should scroll too.
However, my concern on drag selecting, where as a useful feature, would become counter-intuitive if you wanted to drag/drop the selected items into another control.
How should drag/drop be dealt with in this context?
I think the right functionality would be this:
Pressing the mouse button on an unselected item would begin the selection process. Drag the mouse to select the range. Pressing the mouse on a selected item(s) would initiate a drag (as in move these items to another control) of the selected items (so you could drop them in another control), it would not initiate a new selection range. Pressing and releasing the mouse on a selected item without dragging would de-select that item, as if you had been holding down the control-key. Pressing the mouse and releasing on an unselected item would select that item as if you were holding control.
I kind of like this idea, we’ll see if I have time.
Doug,
I’ve been using a slightly modified version of this (as we discussed on the flexcoders list) for a while now.
I’m switching from the standalone flex builder to the flex builder plugin, and I can’t get the app I use this in to compile anymore because of a strange error in this component:
1119: Access of possibly undefined property CHANGE through a reference with static type Class. EntityLookup/ads CheckBoxListItemRenderer.as /EntityLookup/ads/CheckBoxListItemRenderer.as
(I changed it from CheckBoxItemRenderer to CheckBoxListItemRenderer)
Now, the line at which this error is occuring is in this method:
override public function set listData(value:BaseListData):void {
super.listData = value;
this.selected = (listData.owner as ListBase).isItemSelected(listData.uid);
//all we need to do is add an event listener to get notified whenever
//there a change event dispatched by the main list control
(value.owner as ListBase).addEventListener(ListEvent.CHANGE, listEventHandler);
}
I’m sure this response is gonna come out looking like crap but hopefully you’ll get the idea.
I don’t understand why it worked just fine before (when I was using FlexBuilder standaloen version) and it does not work in the plugin version
Got any ideas?
Doug Hi,
This is a very useful example.
I need to create multiselect combobox, with dropdown list with checkbox. This component is a great start.
If you select few items and few of them don’t have item renderer (if the item isn’t visible in the list ), when you trying to deselect this specific item you get :
TypeError: Error #1034: Type Coercion failed: cannot convert “Item 13” to mx.controls.listClasses.ListBaseSelectionData.
at mx.controls.listClasses::ListBase/mx.controls.listClasses:ListBase::removeSelectionData()[C:\dev\flex_201_ja\sdk\frameworks\mx\controls\listClasses\ListBase.as:5131]
at mx.controls.listClasses::ListBase/mx.controls.listClasses:ListBase::selectItem()[C:\dev\flex_201_ja\sdk\frameworks\mx\controls\listClasses\ListBase.as:4488]
at AlternateSelectionList/AlternateSelectionList::selectItem()[C:\Documents and Settings\hadas.or\My Documents\ComboBoxPrompt\ComboBoxPrompt\AlternateSelectionList.as:74]
at mx.controls.listClasses::ListBase/mx.controls.listClasses:ListBase::mouseDownHandler()[C:\dev\flex_201_ja\sdk\frameworks\mx\controls\listClasses\ListBase.as:7028]
at mx.controls::List/mx.controls:List::mouseDownHandler()[C:\dev\flex_201_ja\sdk\frameworks\mx\controls\List.as:1880]
Have any ideas?
I’m looking for info regarding how list , listbase components are working, not just description of the p[roperties and methods , do you know where I can find such information?
Thanks
Easy implementation of the control click functionality:
import flash.events.MouseEvent;
import spark.components.List;
/**
* A list that always acts as if the control key was pressed down so that when
* if an item is selected and another item is selected it wont deselect the
* previously selected item.
*
* @author Chad Callahan
*/
public class MultiSelectList extends List
{
/**
* Forces the control key functionality to always be implemented. See the
* class description for more information.
*
* @param event The event that called the function
*/
override protected function item_clickHandler(event:MouseEvent):void
{
event.ctrlKey = true;
super.item_clickHandler(event);
}
}
I have a Flex list that displays one item/Object at a time, however, I want to be able to each item/Object according to month:
1. The list contains 12 items/Objects
2. I have the DateChooser already set up w/Scroll
?: I want list’s items/Objects to change whenever I scroll the DateChooser’s month, however, I am having hard time grabbing and manipulating a single list’s item/Object at a time.
I need help; do you have any idea???
Emmanuel
Hi Doug,
First of all THANKS for your nice code! It is really helpful.
I have a small issue with this “List control for the one-armed man”
I would like to use it as a list of different countries. And I want to have a the flag of the country just before the corresponding check box.
Any idea on how I can do this ?
Thank you in advance,
Regards,
Casey