Vaadin combobox

问题:

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?

回答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.

回答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.

回答3:

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

回答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.

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

回答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);