Vaadin ComboBox Examples

In this tutorial, we will learn to work with Vaadin ComboBox UI component including setting values, filtering, adding new values and event handling.

Table of Contents

Set ComboBox Values List
Disable Empty/Null Selection
Pre-selecting value
Enable/Disable Values Filtering
Editable Vaadin ComboBox
Add Custom CSS Style
Complete Example

Set ComboBox Values List

To add items to vaadin combobox component, use ComboBox.addItem() or ComboBox.addItems() methods.

ComboBox combobox = new ComboBox("Select your gender:");

//Add multiple items
combobox.addItems("Select", "Male", "Female", "Other");

layout.addComponent(combobox);

If you want to add one item at time:

ComboBox combobox = new ComboBox("Select your gender:");

//Add one item at a time
combobox.addItem("Select");
combobox.addItem("Male");
combobox.addItem("Female");
combobox.addItem("Other");

layout.addComponent(combobox);

Similarily, you can use other data structures to populate the combobox items. E.g. I have used enum type to populate vaadin combobox items.

enum Genders {
	MALE("Male"), FEMALE("Female"), OTHERS("Others");

	private String name;

	private Genders(String name) {
		this.name = name;
	}

	@Override
	public String toString() {
		return name;
	}
}

ComboBox combobox = new ComboBox("Select your gender:");

//Add enum values
combobox.addItems("Select", Genders.MALE, Genders.FEMALE, Genders.OTHERS);

layout.addComponent(combobox);

Disable Empty/Null Selection

You noticed the first option as empty in first screen shot. If you want to remove this empty option, use combobox.setNullSelectionAllowed(false); method.

ComboBox combobox = new ComboBox("Select your gender:");
combobox.addItems("Select", "Male", "Female", "Other");

//Remove empty option
combobox.setNullSelectionAllowed(false);

layout.addComponent(combobox);

Pre-selecting value

Many times you would like to pre-select some value, e.g. in case you are showing a edit form with pre-stored values in database. In this case, use setValue() method.

ComboBox combobox = new ComboBox("Select your gender:");
combobox.addItems("Select", "Male", "Female", "Other");

//Remove empty option
combobox.setNullSelectionAllowed(false);

//Pre-set some value
combobox.setValue("Male");

layout.addComponent(combobox);

Enable/Disable Values Filtering

By Default, vaadin combobox components support filtering i.e. you can filter the values by typring into textbox. In case, you want control the enable/disable this feature, use combobox.setFilteringMode() method.

There are 3 filtering modes available:

1. FilteringMode.CONTAINS

   Matches any item that contains the string given in the text field part of the component.

2. FilteringMode.OFF

   It makes filtering off and all items are shown all the time.

3. FilteringMode.STARTSWITH

   Matches only items that begin with the given string. It is the default mode in vaadin 7.

ComboBox combobox = new ComboBox("Select your gender:");
combobox.addItems("Select", "Male", "Female", "Other");

combobox.setNullSelectionAllowed(false);

//Add Filtering
combobox.setFilteringMode(FilteringMode.CONTAINS);

layout.addComponent(combobox);

Editable Vaadin ComboBox

In editable combobox, you can add new items from UI as well. To add new Items, just type the new item caption, and press enter.

Add a NewItemHandler instance to handle the new added item. E.g. after adding it I am selecting it as current value in combobox.

Label label = new Label();

ComboBox combobox = new ComboBox("Select your gender:");
combobox.addItems("Select", "Male", "Female", "Other");
combobox.setNullSelectionAllowed(false);

//Allow new Items
combobox.setNewItemsAllowed(true);
combobox.setImmediate(true);

combobox.setNewItemHandler(new NewItemHandler(){

	private static final long serialVersionUID = 1L;

	@Override
	public void addNewItem(String newItemCaption) {
		combobox.addItem(newItemCaption);
		combobox.setValue(newItemCaption);
		label.setValue("You added : " + newItemCaption);
	}
});

layout.addComponent(label);
layout.addComponent(combobox);

Add Custom CSS Style

• The entire combobox component is enclosed in v-filterselect style.
• The input field has v-filterselect-input style.
• The button in the right end that opens and closes the drop-down result list has v-filterselect-button style.
• The drop-down result list has an overall v-filterselect-suggestpopup style.
• It contains the list of suggestions with v-filterselect-suggestmenu style.

Modify above CSS classes to alter the display of combobox.

Complete Example

package com.howtodoinjava.vaadin.demo;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.combobox.FilteringMode;
import com.vaadin.ui.AbstractSelect.NewItemHandler;
import com.vaadin.ui.ComboBox;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {

	private static final long serialVersionUID = 1387172685749279538L;

	enum Genders {
		MALE("Male"), FEMALE("Female"), OTHERS("Others");

		private String name;

		private Genders(String name) {
			this.name = name;
		}

		@Override
		public String toString() {
			return name;
		}
	}

	@Override
	protected void init(VaadinRequest vaadinRequest) {
		final VerticalLayout layout = new VerticalLayout();

		addListItems(layout);
		removeEmptySelection(layout);
		preSelectValue(layout);
		addFiltering(layout);
		editableCombobox(layout);
		
		layout.setMargin(true);
		layout.setSpacing(true);

		setContent(layout);
	}

	private void addListItems(VerticalLayout layout) {
		ComboBox combobox = new ComboBox("Select your gender:");

		/*
		 * combobox.addItem("Select"); combobox.addItem("Male");
		 * combobox.addItem("Female"); combobox.addItem("Other");
		 */

		// combobox.addItems("Select", "Male", "Female", "Other");

		combobox.addItems("Select", Genders.MALE, Genders.FEMALE, Genders.OTHERS);

		layout.addComponent(combobox);
	}
	
	private void removeEmptySelection(VerticalLayout layout) {
		ComboBox combobox = new ComboBox("Select your gender:");
		combobox.addItems("Select", "Male", "Female", "Other");
		
		//Remove empty option
		combobox.setNullSelectionAllowed(false);
		
		layout.addComponent(combobox);
	}
	
	private void preSelectValue(VerticalLayout layout) {
		ComboBox combobox = new ComboBox("Select your gender:");
		combobox.addItems("Select", "Male", "Female", "Other");
		
		//Remove empty option
		combobox.setNullSelectionAllowed(false);
		
		//Pre-set some value
		combobox.setValue("Male");
		
		layout.addComponent(combobox);
	}
	
	private void addFiltering(VerticalLayout layout) {
		ComboBox combobox = new ComboBox("Select your gender:");
		combobox.addItems("Select", "Male", "Female", "Other");
		
		combobox.setNullSelectionAllowed(false);
		
		//Add Filtering
		combobox.setFilteringMode(FilteringMode.CONTAINS);
		
		layout.addComponent(combobox);
	}
	
	private void editableCombobox(VerticalLayout layout) 
	{
		Label label = new Label();
		
		ComboBox combobox = new ComboBox("Select your gender:");
		combobox.addItems("Select", "Male", "Female", "Other");
		combobox.setNullSelectionAllowed(false);

		//Allow new Items
		combobox.setNewItemsAllowed(true);
		combobox.setImmediate(true);
		
		combobox.setNewItemHandler(new NewItemHandler(){

			private static final long serialVersionUID = 1L;

			@Override
			public void addNewItem(String newItemCaption) {
				combobox.addItem(newItemCaption);
				combobox.setValue(newItemCaption);
				label.setValue("You added : " + newItemCaption);
			}
		});
		
		layout.addComponent(label);
		layout.addComponent(combobox);
	}
	
	@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
	public static class MyUIServlet extends VaadinServlet {
		private static final long serialVersionUID = -2718268186398688122L;
	}
}

Happy Learning !!

References:

Vaadin ComboBox Class
Vaadin Book Examples
Vaadin Wiki