ListBuilder Add-On

Okay, I’m trying ListBuilder 0.7.3.v7 today on my Vaadin 7.1.7 system. I swapped out a TwinColSelect for a ListBuilder and the ListBuilder seems most unhappy in the layout. It appears to work in that I can choose values and move them back and forth as expected, but the layout issues are puzzling.

Comment 1: ListBuilder.setMultiSelect(true) should not throw an exception…only if the param is ‘false’.

I have added the ListBuilder component to a GridLayout on this page. Note that the only changes I made in the conversion was swapping TwinColSelect for ListBuilder and changing my Set/HashSet code to use Collection/LinkedList. Not only is the ListBuilder itself not using the space available (despite setWidth(“100%”) or setSizeFull()), but it’s somehow messing up other elements in my GridLayout.

Below/attached is the same Window, one using ListSelect and the other the TwinColSelect. It is still in a legacy Form, but I’ve not see any other issues with other components laying out incorrectly. Note that everything in my GridLayout column 2 seems to be overlaid on column 1, and also that I have a horizontal scrollbar that otherwise is not present.

What might be causing this?
13306.png

Hi David, and thanks for the feedback.

You’re right about the setMultiSelect, I changed that to only throw exceptions when called with false parameter. I can also confirm and already fixed the layout issue (fix is pushed to github). I’ll try to publish a new version with these fixes later today.

-tepi

Hi,

I have a question about ListBuilder.

I have 2 ListBuilder, which use the same datasource container.
is ther any chance that, when you select in one ListBuilder an item, this item removed from the other ListBuilder?
and when you unselect it again the other ListBuilder get it back?
I hope you understand what I mean.

-Aissam

Hi,

I don’t think there’s any integrated logic that could do what you want, so I’d say you have to implement this manually. Anyway, if you want to completely remove the item selected in ListBuilder1 from even the options (left side) in ListBuilder2, you are going to find it impossible since if you’re using the same container it will of course be removed from both ListBuilders.

However, if you just need to make sure that any item can be selected (right side) only in one of the ListBuilders at any one time, you could put something together with some ValueChangeListeners for your ListBuilders, and then ‘syncing’ the selections manually (using some flags to prevent loops) - e.g. user selects Item1 in ListBuilder1 → you get value change event → you check if Item1 is selected in ListBuilder2 and if it is, you deselect it there.

Ah ok thats a good Idee I will try to do this. Thank you for your help.

and Wish you nice holidays :slight_smile:

Sorry but another Question. How you can deselect an Item from ListBuilder?

Sorry for the late reply due to Christmas. You can deselect items simply by calling org.vaadin.tepi.listbuilder.ListBuilder.unselect(Object) with the relevant itemId as the parameter.

Thanks for a nice replacement of TwinColSelect!

I have run into one difference between the ListBuilder (0.7.3.v7) and TwinColSelect (the one in Vaadin 7.1.10)

If I do:

tcs.setColumns(24);
lb.setColumns(24);

both the TwinColSelect and the ListBuild gets the same width on the page; but if I do

tcs.setWidth(160f, Unit.MM);
lb.setWidth(160f, Unit.MM);

the width of the ListBuidler will be half of the width of the TwinColSelect (which has the width 160mm as expected).

Is it possible to word-wrap the two lists?

Unfortunately it is not possible. The lists are just common HTML select elements which have no support for word wrapping.

Hello,

thanks for your quick answer!

Hi Teppo!

I have tested Vaadin 7.3.0.beta1 and Listbuilder 0.7.3.v7BETA with the new Valo theme. Seems that up, down, remove, left and right button icons are rendered incorrectly in buttons. Seems to occur with Firefox 31 and Chromium 36 in Linux. Attached is a screencapture of the issue.

BR,

Teemu

15906.png

Very useful add-on, thanks for sharing!

There is one little omission though: there is no mention of a
license
in the Add-on Directory or in the GitHub repo. Please choose a license and display it in both places, to avoid any confusion.

Hi,

Change CSS to:

.v-listbuilder .v-button-caption { width: 11px; height: 11px; background-repeat: no-repeat; background-position: left bottom; padding-top: 3px; [b] display: inline-block; [/b] } Regards,
Harke

Hi,

your suggestion seem to work (tested with Vaadin 7.3.2/Listbuilder 0.7.3.v7) and is better than setting negative margins which I used as a quick hack.

BR,

Teemu

Hi,

all my add-ons are Apache 2 licensed and this is also set in the Directory and should be shown near the top of the add-on’s page. I’ll make sure to add the license to github too to avoid any misunderstandings. Thanks for notifying me.

-tepi

Well, I’ll be damned… Somehow I did not notice the license in the Directory the last time I checked. :slight_smile:
Anyway, thanks for getting back to me and clearing this up!

Could you add a setItemDescriptionGenerator for the ListBuilder Addon so we can have a tooltip for each item ?

Please support value-change listeners

Check in ipad or iphone

It doesn’t work in IPAD, but window browser works fine.

Anyone have any idea to solve this issue?