Ionic-framework: feat:

[olaisen81]

Feature Request

Ionic version:


[x] 5.x

Describe the Feature Request

Make ion-picker works with columns that has relationship each other, So when select item on column 1, need to filter items of column 2.

Describe Preferred Solution

Describe Alternatives

Actually i'm trying to use picker.addEventListener('ionPickerColChange', async (event: any) => {} to avoid this without success.
Thanks in advance.

Related Code

picker.addEventListener('ionPickerColChange', async (event: any) => {
      let data: PickerColumn = event.detail;
      if (data.name == "Produttori") {
        let selectedProduttore: PickerColumnOption = data.options.find(p => p.selected == true);
        let columnProdotti: PickerColumn = this.dependentColumnsGlobal.find(p => p.name == "Prodotti");
        let columnsOptsProdottiUpdated = columnProdotti.options.filter(p => p.value.idSoftwareHouseProvenienza == selectedProduttore.value);
        if (columnsOptsProdottiUpdated.length > 0) {
          columnsOptsProdottiUpdated[0].selected = true;
          columnProdotti.options = columnsOptsProdottiUpdated;
          let updatedColumns = [data, columnProdotti];
          picker.columns = updatedColumns;

        }
      }
    });

[liamdebeasi]

Thanks for the feature request. I am going to close this as this is already possible in Ionic Framework.

You had the right idea using ionPickerColChange, but you will need to create new column array instances every time. It is possible in your code you are still referencing the old columns which will result in the component not updating properly.

I have created a CodePen that shows how to do this: https://codepen.io/liamdebeasi/pen/rNePYZa

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.