ComboBox : How to delete an item

Vaadin 6 / 7 / 8
1

Hi Vaadin users,

I need your knowledge on the following problem :

I need to modify a combobox so that the user can delete one item. 3 solutions :
1 / it seems we can add some icons for each item in a combobox, like this :
combo.setItemIcon(1, new ThemeResource(“icons/ok.png”));
Is it possible to delete an item by clicking on this icon (= red cross) next to the item to be deleted ?
2 / Or by using the event “right-clicking” on the item instead of “left-clicking” ?
3 / otherwise, i will create a button next to the combobox for deleting the selected item from the list

Regards
Eric

2

You could probably do 1. and 2. with a Custom extension , but my guess is that you would get a better user experience using a ListSelect or TwinColSelect in combination with a com.vaadin.ui.PopupView…

3

Thank you Petrus for your answer.

I cannot use ListSelect or TwinColSelect because there is not enough space in the GUI.
For the moment i used a little button “delete” at the right side of the combobox.

You say the case 1 is possible (one icon for each item of the comboBox, if we click on the icon, the item next to it is deleted), but when i see the following
example
with icons and source code, i do not know how to do it. How can i add a listener on an icon ??

Eric

4

The Extension you would have to write yourself :slight_smile:
Basic it would have to detect the mouse click on the Client Side, detect you clicked on the icon location , and communicating this via the rpcConnector…

Not sure if this would be easy or even possible ( Have not looked at the Client Side source of ComboBox )

5

A word of warning: the client side of ComboBox is very, very, very complicated and messy, full of hacks and workarounds for browser issues and complex lazy loading code etc.

Nevertheless, if you manage to identify the actual item from the icon clicked, a simple Extension or JavaScriptExtension might not need to care about the intricacies of how VFilterSelect (the client side of ComboBox) works. One possible trick would be to generate icon URLs that contain e.g. “?itemId=…” so that your extension can parse it out from there and send it in an RPC call to the server part of the extension, which can then remove the item from the container of the ComboBox. To simplify the client side even further, the Extension could just send an RPC call for a click on any icon to the server with the icon URL as a parameter and the server side could parse the item to remove from the URL.

For more on extensions, check out the
mini-tutorials
. The sections “Using JavaScript” and “Extending Components and UIs” are the most relevant ones in this case, and “Custom widgets” contains information about the use of RPC etc.

6

Is this easier with Vaadin 14? I can’t find any help on this.

7

@Raul Yes it is. You can set a Renderer to control how the options are built. Just include a Button that will remove the item from the item list. Here is how this could look in theory:

Set<String> comboBoxItems = new HashSet<>(Arrays.asList("a", "b", "c", "d", "e"));

ComboBox<String> comboBox = new ComboBox<>("Removable items");
comboBox.setItems(comboBoxItems);
comboBox.setRenderer(new ComponentRenderer<>(item -> {
	Span itemName = new Span(item);

	Button removeItemButton = new Button(VaadinIcon.CLOSE.create(), click -> {
		comboBoxItems.remove(item);
		comboBox.getDataProvider().refreshAll();
	});

	return new HorizontalLayout(itemName, removeItemButton);
}));