vaadin – How to create a second Combobox which is dependent from the First Combobox.

Good Day!

Title : vaadin – How to create a second Combobox which is dependent from the First Combobox.


1) Here are the tutorial , “How To create a second Combobox which is dependent from the First Combobox . The purpose, when I selected an item in the first Combobox – State value, i want the items in the district combo (Second Combobox) are going to change their value based on the state (First Combobox).

2) create a class –

public class VaadinComboBox extends UI {
 private BeanItemContainer<RefDistrict> objectsDistrict = new BeanItemContainer<>(RefDistrict.class);
 private ComboBox combofirst; // first combobox
 private ComboBox combosecond; // Second combobox
 private List<RefState> refState = new ArrayList<RefState>();
 private List<RefDistrict> refDistrict = new ArrayList<RefDistrict>();
 public static class Servlet extends VaadinServlet {

 protected void init(VaadinRequest request) {
 final VerticalLayout layout = new VerticalLayout();
 combofirst= createFirstComboSelect(); // state combobox
 combosecond = createSecondComboSelect(); // district combobox
 private ComboBox createFirstComboSelect() { // state combobox
 refState = getRefState(); // get records state dummy
 BeanItemContainer<RefState> objects = new BeanItemContainer<>(RefState.class, refState);
 ComboBox s = new ComboBox("RefState", objects);
 s.addValueChangeListener(new ValueChangeListener() {
 public void valueChange(ValueChangeEvent event) {
 objectsDistrict.addAll( findDistrictSelection((RefState) event.getProperty().getValue()));
     return s;
 private ComboBox createSecondComboSelect() {
 ComboBox districtcombo = new ComboBox("refDistrict"); // combox box District with objects values
 // Allow adding new items
 return districtcombo;
 private List<RefDistrict> findDistrictSelection(RefState refstate) {
 refDistrict = getRefDistrict(); // get all records district
 BeanItemContainer<RefDistrict> objects = new BeanItemContainer<>(RefDistrict.class, refDistrict);
 List<RefDistrict> objDistrictList = new ArrayList<RefDistrict>();
 // how to get value same with the selection of object by filtering string refstate id
 Object[] ids = objects.getItemIds().toArray();
 System.out.println("length 1 : " + ids.length);
 for (int i = 0; i < ids.length; i++) {
          if (((RefDistrict) ids[i]).getStateid().equals(refstate.getStateid())) {
          System.out.println("scedule id : " + ((RefDistrict) ids[i]).getRefdistrictid()); // district id
          System.out.println("schedule name : " + ((RefDistrict) ids[i]).getRefdistrictname()); // district name
          objDistrictList.add((RefDistrict) ids[i]);
 return objDistrictList;
 // dummy data from state using entity refState
 private List<RefState> getRefState() {
 refState.add(new RefState(new String("01"),"Malaysia"));
 refState.add(new RefState(new String("02"),"Indonesia"));
 refState.add(new RefState(new String("03"),"Vietnam"));
 refState.add(new RefState(new String("04"),"Singapore"));
 refState.add(new RefState(new String("05"),"Thailand"));
 return refState;
 //dummy data from District using entity refDistrict
 private List<RefDistrict> getRefDistrict() {
 refDistrict.add(new RefDistrict(new String("01"),"Kuala Lumpur","01"));
 refDistrict.add(new RefDistrict(new String("02"),"Bandung","02"));
 refDistrict.add(new RefDistrict(new String("03"),"Ho chi Minch city","03"));
 refDistrict.add(new RefDistrict(new String("04"),"Jurong","04"));
 refDistrict.add(new RefDistrict(new String("05"),"Phuket","05"));
 return refDistrict;

3. For More info how its began :!/thread/13374868 , How to create a second Combobox which is dependent from the First Combobox.

4. To Download the Source code Project , please Download button below.


5. you can update the code using new java expression (lambda expression – java 8 ) for valueChangeListener : 

// add lambda expression – java 8
s.addValueChangeListener((ValueChangeListener) (ValueChangeEvent) ->
objectsDistrict.addAll(findDistrictSelection((RefState) ValueChangeEvent.getProperty().getValue())));

One thought on “vaadin – How to create a second Combobox which is dependent from the First Combobox.”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s