CODEWITHSUNDEEP
vaadinvaadin-flowvaadin-spring-boot
aby
aby

Reputation: 830

How to update a combo box component's data in Vaadin spreadsheet?

I'm new to vaadin. I have a spreadsheet component that has two combo boxes in columns A and B in Springboot (Java). I added these combo boxes through the spreadsheet setSpreadsheetComponentFactory. What I want is to make a db/api call to fetch and load the combo box data in Column B based on the value a user selects in column A. The data in column B may be different for each row based on the value selected in column A for that specific row. How can update/listen to the value changes from column A combo box to update the values in column B?

Upvotes: 1

Views: 134

Answers (1)

Johannes Tuikkala
Johannes Tuikkala

Reputation: 160

One option is to do something like the following within the SpreadsheetComponentFactory. Since you are already using it you have implemented getCustomComponentForCell. In that method you can create the ComboBoxes and store those as references. For example like below.

@Override
public Component getCustomComponentForCell(Cell cell,
                                       int rowIndex, int columnIndex,
                                       Spreadsheet spreadsheet, Sheet sheet) {
if (spreadsheet.getActiveSheetIndex() == 0
    && rowIndex == 2 && columnIndex == 1) {
    if (cb1 == null) {
        initCombobox1();
    }
    return cb1;
}
if (spreadsheet.getActiveSheetIndex() == 0
    && rowIndex == 2 && columnIndex == 2) {
    if (cb2 == null) {
        cb2 = new ComboBox<>();
    }
    return cb2;
}
return null;
}

Then in the init method of the first ComboBox (cb1) you can assign a value change listener which will populate the items of the another ComboBox (cb2) based on the value of the first one:

private void initCombobox1() {
    cb1 = new ComboBox<>();
    cb1.setItems("value1", "value2");
    cb1.addValueChangeListener(e -> {
        if ("value1".equals(e.getValue())) {
            cb2.setItems("value1_1", "value1_2");
        } else {
            cb2.setItems("value2_1", "value2_2");
        }
    });
}

This is obviously simplified example with hard coded values. In the real life you would then call the API to get those items.

Upvotes: 1

Related Questions