HowToDoInJava

  • Python
  • Java
  • Spring Boot
  • Dark Mode
Home / Vaadin / Vaadin ComboBox Examples

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.

Vaadin ComboBox Items
Vaadin ComboBox Items
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.

Empty Option Removed from Vaadin Combobox
Empty Option Removed from Vaadin Combobox
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.

Preselect value in vaadin combobox
Preselect value in vaadin combobox
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.

Filtering in vaadin combobox
Filtering in vaadin combobox

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.

Editable Combobox
Editable 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;
	}
}
Sourcecode Download

Happy Learning !!

References:

Vaadin ComboBox Class
Vaadin Book Examples
Vaadin Wiki

Was this post helpful?

Let us know if you liked the post. That’s the only way we can improve.
TwitterFacebookLinkedInRedditPocket

About Lokesh Gupta

A family guy with fun loving nature. Love computers, programming and solving everyday problems. Find me on Facebook and Twitter.

Feedback, Discussion and Comments

  1. Nageswra Rao

    December 31, 2019

    Thanks a lot sir, Please start Vaadin Tutorial for Beginners to Master . i am expecting more than what u provide in this iste.

  2. Sathya

    November 12, 2016

    I am a regular reader of your blog. the blog is very interesting and will be much useful for us. i really enjoyed very much with this article here. Really its a amazing article that i had ever read. I hope it will help a lot for all the readers. Thank you so much for this amazing posts and please keep update like this excellent article.

    • Nageswara Rao

      December 31, 2019

      Yes, I am also a regular Reader. His tutorials are always awesome.

  3. Mohammed Amine Bourkadi

    September 14, 2016

    We’d like to see a tutorial of Vaadin+ Spring Security..
    Thank you

Comments are closed on this article!

Search Tutorials

Vaadin Tutorial

  • Vaadin – Hello World Application
  • Vaadin – ComboBox
  • Vaadin – Text Field
  • Vaadin – Spring Security BasicAuth

Meta Links

  • About Me
  • Contact Us
  • Privacy policy
  • Advertise
  • Guest and Sponsored Posts

Recommended Reading

  • 10 Life Lessons
  • Secure Hash Algorithms
  • How Web Servers work?
  • How Java I/O Works Internally?
  • Best Way to Learn Java
  • Java Best Practices Guide
  • Microservices Tutorial
  • REST API Tutorial
  • How to Start New Blog

Copyright © 2020 · HowToDoInjava.com · All Rights Reserved. | Sitemap

  • Sealed Classes and Interfaces