Dependent Drop down functionality ng2-smart-table

0
votes

we have used ng2-smart-table for our project and I have a request now where one of the select input list is dependent upon selection of another list. For instance, in the below example there are 2 Inputs (Country & Cities) and when User selects one of the Countries from drop down then the cities would get populated. So, whenever the user selects a different country then the Cities list would get populated with appropriates cities:

enter image description here

Could someone please let me know if this is possible in ng2-smart-table?

My current settings

mode: internal, country: { title: 'Country', type: 'html', valuePrepareFunction: (cell, row) => { return cell }, editor: { type: 'list', config: { list: [] }, } }, city: { title: 'City', type: 'html', editor: { type: 'list', config: { selectText: 'Select the Location to see options...', list: [] }, } }

This is how the list is getting populated:

let countryAll = this.countryService.getAll(); let cityAll =this.cityService.getAll();

const countryOptions = []; for (const l of this.countryAll) { locationOptions.push({ value: l.name, title: l.name }); }

this.settings.columns.country.editor.config.list = countryOptions;

const cityOptions = []; for (const l of this.cityAll) { locationOptions.push({ value: l.name, title: l.name }); }

this.settings.columns.city.editor.config.list = cityOptions;

2
angular6ng2-smart-table
when you clicked on Country you need to call API and fetch cities list... Am I right ? - Sachin Shah
Yes, Sachin. I need to be able to have updated Cities list whenever the user changes the Country - Deepak
ok then I can help you. Just let know are you able to fetch changeEvent ? - Sachin Shah
No, I am not sure how to use change event upon selecting drop-down. If this is can be done then it will resolve my issue - Deepak
So what is your issue ? Either issue in getting click event Or issue to bind updated value in dropdown ? - Sachin Shah

2 Answers

0
votes

To fetch click event try this way. 

paymentStatus: {
    title: 'Country',
    type: 'html',
    valuePrepareFunction: (cell, row) => { return row },
    editor: {
      type: 'list',
      config: {
        list: [{ value: 1, title: 'India' }, { value: 2, title: 'Canada' }]
      }
    }
  },

Using valuePrepareFunction() you will be able to get data.

Then you have to call API and bind into dropdown.

0
votes

Below solution work for me:

enter image description here 

public settings = {
    actions: {
      position: 'right'
    },
    columns: {
      ctg_name: {
        title: 'Category',
      },
      ctg_visible: {
        title: 'Visible',
        editor: {
          type: 'list',
          config: {
            selectText: 'Select',
            list: [
              {value: '1', title:'True'},
              {value: '0', title:'False'}
            ]
          }
        }
      }
    }
  };