Can I order the items in a multi-select SelectItem

[leeyuiwah]

I know how to use a SelectItem.

I also know how to make it support multi-select

I know in TileGrid I can use setCanOrderTiles() to let the end users order the tile in the TileGrid.

Now I have this question: can I do similar thing with SelectItem (supporting multi-select)?

I have an application scenario where I prefer to use a SelectItem over a TileGrid for the smaller footprint of the former, but I also need to let the end user to express an order about the multiply selected items on the drop-down menu.

Thanks!

[Isomorphic]

Can you clarify what you're after: Are you talking about a selectItem with the multipleAppearance set to "grid" or to "pickList"?

If the latter - are you talking about specifying the order of items in the drop down list, or about changing the order in which the selected items appear in the text-box area once they have been selected?
Also, given that you want the user to control this - what user interaction are you after (drag to reorder items in the list? something else?)

Thanks
Isomorphic Software

[leeyuiwah]

Hi,

Yes I am talking about SelectItem with setMultiple(true) and setMultipleAppearance(MultipleAppearance.PICKLIST).

Also, I am talking about letting the end users changing the order of the entries in the drop-down menu *after* the entries have already been presented to the end users.

I am hoping that the interaction that the end users can do is to drag the entries up and down on the menu (press and hold a mouse button, and then move the cursor up or down on the screen)

And then the SelectItem will return the value as a list of selected entries (i.e. for which the check-boxes that have been checked), and the *order* of entries in the list will be according to the order shown on the screen (from top to bottom).

It is a bit like what is being done with TreeList in your showcase of

http://www.smartclient.com/smartgwt/showcase/#tree_editing

In that example, employees in the TreeList can be dragged up and down. The key lines of code were like these:

TreeGrid employeeTree = new TreeGrid();  
...
employeeTree.setCanEdit(true);  
employeeTree.setCanReorderRecords(true);  
employeeTree.setCanAcceptDroppedRecords(true);

My question is this: can we use similar methods (setCanReorderRecords()) with SelectItem? I read through the Javadoc API but the answer is not obvious to me.

Thanks!

[leeyuiwah]

Hi,

We found half of the solution.

On one hand, our application logic handles the end user's clicks via a ChangeHandler. It registers the clicks one by one, and in order, and adds the clicked entries to our internal data structure one by one, and in order. So in our internal data structure the order is honored. This is good.

On the other hand, the UI provided by SmartGWT's SelectItem, displays checked entries in a fixed order (as specified in the original ValueMap), so it does not reflect the click order in the display. Even though our internal data structure has registered the correct order, the UI misleads end users into thinking otherwise.

The attached screenshot shows the latter problem. No matter what order that the end users clicked on the check boxes, the UI display always shows the same order.

We would like to have a solution to the latter problem. Any good idea?

By the way, let me clarify our wish. We are asking the order of the text in the SelectItem box (not that of the drop-down menu) to honor the clicking order. For example, if end users clicked Entries C, B, A, then the text would say "C, B, A". It is okay that order of the entries on the drop-down menu remains static.

[Isomorphic]

You've requested two distinct things here -- drag reorder of the records within the pickList of a SelectItem, and modifying Multi-Select behavior so that selected items are ordered based on the user's selection steps (they show up in the order they were selected, rather than the order in which they appear in the list).

The SelectItem does not support either of these out of the box.

Drag-reordering pickList records could be achieved via some custom data and some settings on the PickList (a subclass of ListGrid) to support drag reordering of records. It's not trivial to do this and there could be some edge cases which would need careful testing, but it should be achievable.
However, changing the item value (both the logical value and the value displayed in the text-box) to reflect the (chronological) order in which things were selected by the user is not going to be achievable in any straightforward way. The value is based on the pick-list selection and we simply don't maintain an array indexed by when items were selected or deselected.

A better solution here might be to roll your own custom control.

This could be achieved in various ways.

Exactly how to implement this will depend on your desired appearance and user experience.

If you want your control to appear in a DynamicForm, and want to mimic the appearance of the SelectItem, you could start with a StaticTextItem with showPicker set to true, and when the user hits the pickerIcon, you could display a floating ListGrid in the appropriate position.
Some customizations you might want on your grid
- data and fields would be populated by app code to reflect your desired set of options
- showHeader may be set to false to hide the header
- canReorderRecords enabled (if you want drag-reorder of data)
- and selectionAppearance set to checkbox to support the checkbox-selection column

You would probably make use of the showClickMask method to mask the other components while the user interacts with your listgrid, and hide the grid when the user clicks outside.

To respond to the user picking items, you'd need some custom app logic. The ListGrid selection paradigm retains the selection in the order in which records appear in the list -- it doesn't take the chronological order of user-selection into account. So you'd probably want a selectionChanged handler which built a separate array of the current selected values, ordered by when they were selected (if a value is newly selected it'd be added to the array, if de-selected it'd be removed from the array). You could then set the value of your underlying formItem to this value.

However - this is just one possible implementation and of course this starts to get beyond normal support and into application design.

Regards
Isomorphic Software

[leeyuiwah]

Yes I understand my Comments #3 and #4 are asking for two different approaches. But the goal is the same -- that we want to let end users to express both

1. multiple selections, and
2. an ordering of the entries

in a low-footprint multi-select SelectItem.

(We know we can use TileGrid, but a TileGrid takes up more spaces than a SelectItem).

Comment #4 got half of the solution already. Our ChangeHandler already can register the order. The only thing that is not working yet is the compact display of the selected entries on the top.

I will look at your suggestions. Thanks!