Vaadin combobox

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?

Polysemy

Create a Vaadin widget using the Combo Box code of Vaadin. You can overrride the place where HTML content is filtered out at client side and use br tag to add the line. – Lurlinelusa

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.

Solitary

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.

Cosby

Answer 3

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

Terrier

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.

Lurlinelusa

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 :)

Hierophant

Answer 6

You can add the item to the selected (as mentioned before) and then disable the separators with some javascript:

1. add the item to the select. cb.addItem("separator"); cb.setItemCaption("separator", "-------------");

2. 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);

Scutate

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");

Villeinage