Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

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

FRANK NANDONG
5 years ago Jun 15, 2016 7:13am

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().
 

Marco Collovati
5 years ago Jun 15, 2016 7:36am

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
 

FRANK NANDONG
5 years ago Jun 15, 2016 8:34am