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

Good day Expert!

Question : How to create a second Combobox which is dependent from the First Combobox ?
description of my Question : I have problem with my codes , where my second combobox doesnt appeared with values that dependent with the id's form the First Combobox. When I select an item in the first Combobox - State value, i want that the items in the district combo (Second Combobox) are going to change their value based on the state (First Combobox) the user have selected. below is my codes:

// 1) FirstDependentSecond class

public class FirstDependentSecond extends GridLayout implements View {
private ComboBox combofirst;
 private ComboBox combosecond; // Second combobo
private List<RefState> refstate = new ArrayList<RefState>();
private List<RefDistrict> refdistrict = new ArrayList<RefDistrict>();
private BeanItemContainer<RefDistrict> objectsDistrict;

// 2) init method
public void initContent() {
combofirst= createFirstComboSelect(); // state combobox
combosecond = createSecondComboSelect(); // district
}

// 3) Second Initialize combobox district
private ComboBox createSecondComboSelect() {
            BeanItemContainer<Schedule> objects;
schedule.setItemCaptionPropertyId("schedulename");
            schedule.setNewItemsAllowed(true);
            schedule.setImmediate(true);
            schedule.addStyleName("tiny");
            schedule.setWidth("10em");
            schedule.setFilteringMode(FilteringMode.CONTAINS);
            schedule.setInvalidAllowed(false);
            schedule.setNullSelectionAllowed(false);
             return schedule;
}

// 4) First method combobox
  private ComboBox createFirstComboSelect() {
               refstate = getRefStates();
               BeanItemContainer<RefState> objects = new BeanItemContainer<>(RefState.class, refstate);
               ComboBox s = new ComboBox("RefState", objects);
              s.setItemCaptionPropertyId("statename");
              s.setImmediate(true);
              
               s.addValueChangeListener(new ValueChangeListener()
            {
                @Override
                public void valueChange(ValueChangeEvent event)
                {
                      // update the district by selected value id state.
                   objectsDistrict= updateDistrictSelection((RefState) event.getProperty().getValue());

                 scheduleSelect = new ComboBox();
                 scheduleSelect.setContainerDataSource(objectsDistrict);
                 scheduleSelect.setItemCaptionMode(ItemCaptionMode.PROPERTY);
                 scheduleSelect.setItemCaptionPropertyId("districtname");
                 scheduleSelect.setNewItemsAllowed(true);
                 scheduleSelect.setImmediate(true);
}

- Why the second Combobox - district does not load the new record from district values.. objectsDistrict have the values , only its not bind with new scheduleSelect = new ComboBox(); at method createFirstComboSelect().
 

You should not create a new instance of ComboBox inside your ValueChangeListener; instead set the container datasource in  createSecondComboSelect and then only update the container in the listener.

Try something like this:

private BeanItemContainer<RefDistrict> objectsDistrict = new BeanItemContainer<>(RefDistrict.class);

....
private ComboBox createSecondComboSelect() {
   ....
   scheduleSelect.setContainerDataSource(objectsDistrict);
   ....
}

private ComboBox createFirstComboSelect() {
    ....
    s.addValueChangeListener(new ValueChangeListener() {
       public void valueChange(ValueChangeEvent event) {
            ....
            objectsDistrict.removeAllItems();
            objectsDistrict.addAll( findDistrictSelection((RefState) event.getProperty().getValue() );
            ....
       }
    ....
}

private List<RefDistrict> findDistrictSelection(RefState input) {
    ....
}

HTH
Marco