vaadin 7 combo box with sublist on click

hi vaadin experts
i have combo box im alrady use in my app
now i’m trying to open sublist to this combobox when i click(or highlight - mouse hover in) some item
and close it when i click agine (or remove highlist - mouse hover in)
(the user can select only from mainlist the sublist only for view)

how can i do it with combo box
and if there is no way to do it with combobox
which components i should use

i mean somethink like this:

thanks in advance

This is an interesting question. What is sufficent for your application really depends on context and how finely polished solution you need.

The simplest way to accomplish something like this would be something where you modify the item list of the combobox on the fly. You can do this algorithmically, since addItems method accepts Collection as a parameter. This means that in valueChange event you need to check whether the item belongs to first or second level of the list. If it is first level item, you add/remove items from the list (and possibly do something else if so is needed) and on second level you just perform what is needed to be done when second level item is selected.

“+” and “-” symbols can be added easily with addIcon using appropriate symbols from fontAwesome. Now the tricky part is that if you want the list be nicely indented, that would perhpas require some extra tricks with styles. Also I am not sure how nice the outcome is regarding focus changes etc.

ComboBox is rather complex combonent internally, so something that is more ellaborate than this, would be considerably larger task to be done.

Another (maybe easier approach) might be to use a PopupView or a
PopupButton
with a Table (without headers to look like the list inside the combobox) inside the Popup. That table can then have a seperate column or a OnSelectionListener to open an Info-Window or Panel or whatever. Might need a bit to set up but if it works like i would imagine it, a lot easier then customizing the actual Combobox.

Or you can just use a menubar with one hierarchical menu. Your menu selection handler can change the menu caption to simulate the behavior of a combobox. This would probably be the simplest approach and it would automatically take on the look of your theme.