Vaadin combobox - vaadin

Question

I want to create Vaadin drop down with 2 separators in it. I couldn't find a way to implement that, can anyone help me to solve this issue?
This is the way I want to display my drop down:
Option 1
Option 2
------------;
select 1
select 2
-----------;
group 1
How can I do that?

Answer 1

There is no built-in way to add separators to selects. The only way I can think of is to add an item with the desired separator as its caption. For example if you use the default caption (item id) select.addItem("-----"); should be enough. This should work for both ComboBoxes and NativeSelects.

Answer 2

You can implement a new Vaadin component including the client behaviour, but this is not an easy solution. This page https://vaadin.com/book/-/page/gwt.html of "Book of Vaadin" and Vaadin forum can help for that.
Also, creating your own component using existing components is another solution. You can implement a special combobox which takes values of String or Component arrays. The way of doing this is using Vaadin panels, layouts and windows with size and locations and click listeners.

Answer 3

I haven't tried it myself but give a go at NativeSelection dropdown.

Answer 4

You can always do
{select.addItem("-----");}
Once I also wanted a do something like that but there was no proper way to do that with Vaadin. I actually created a Vaadin widget extending the Combo Box. In the client side widget of Vaadin they filter out the HTML content before adding items to the list. So Using the client side code I override that functionality and use HTML tag "" to add the line.

Answer 5

select.addItem("-----");
looks like the best way, I dont know about some other
Btw if you are reading items from some list you can combine that with some item counter and (itemsCount%n)==0 operator to set separator after 'n' items inserted :)

Answer 6

You can add the item to the selected (as mentioned before) and then disable the separators with some javascript:
add the item to the select.
cb.addItem("separator");
cb.setItemCaption("separator", "-------------");
execute the javascript
final String javascript = ""
"var selects = document.getElementsByTagName('select');"
"for(var j = 0;j < selects.length;j++){"
"var op = selects[j].getElementsByTagName('option');"
"for (var i = 0; i < op.length; i++) {"
" if(op[i].text == '" + separatorText + "') op[i].disabled = true;"
"}}";
Page.getCurrent().getJavaScript().execute(javascript);

Answer 7

Is there a reason that you use the ComboBox instead of the Select, because with the select you can do that.
Select select = new Select();
select.setItems("Option 1", "Option 2", "select 1", "select 2", "group 1");
select.addComponentAtIndex(2, new Hr());
select.addComponentAtIndex(5, new Hr());
Or you can use a MenuBar but it looks very diferent that the ComboBox.
menuBar = new MenuBar();
MenuItem menuItem = menuBar.addItem("Select");
menuItem.getSubMenu().addItem("Option 1");
menuItem.getSubMenu().addItem("Option 2");
menuItem.getSubMenu().addItem(new Hr());
menuItem.getSubMenu().addItem("select 1");
menuItem.getSubMenu().addItem("select 1");
menuItem.getSubMenu().addItem(new Hr());
menuItem.getSubMenu().addItem("group 1");