DevExtreme Datagrid Popup with cascading dropdown/lookups?

Question

I would like to find a solution to cascade lookups on a popup form, given that the second lookup needs to set its dataSource at runtime (or calling an API), since the lookup source could be coming from different sources. For example, say that if I selected Arkansas, then it would set a different lookup from a web service call, and if California is selected it would use a call from a database to populate the lookup values.

I have taken the DevExtreme sample below as an example, what events or methods would I need to achieve this?

Code Example:

    $(() => {
      $('#gridContainer').dxDataGrid({
        keyExpr: 'ID',
        dataSource: employees,
        showBorders: true,
        editing: {
          allowUpdating: true,
          allowAdding: true,
          mode: 'popup',
        },
        onEditorPreparing(e) {
          if (e.parentType === 'dataRow' && e.dataField === 'CityID') {
            e.editorOptions.disabled = (typeof e.row.data.StateID !== 'number');
          }
        },
        columns: ['FirstName', 'LastName', 'Position',
          {
            dataField: 'StateID',
            caption: 'State',
            setCellValue(rowData, value) {
              rowData.StateID = value;
              rowData.CityID = null;
            },
            lookup: {
              dataSource: states,
              valueExpr: 'ID',
              displayExpr: 'Name',
            },
          },
          {
            dataField: 'CityID',
            caption: 'City',
            lookup: {
//this is not a static list and will need to be populated when the State changes from various sources...
              dataSource(options) {
                return {
                  store: cities,
                  filter: options.data ? ['StateID', '=', options.data.StateID] : null,
                };
              },
              valueExpr: 'ID',
              displayExpr: 'Name',
            },
          },
        ],
      });
    });

Data:

const states = [{
  ID: 1,
  Name: 'Alabama',
}, {
  ID: 2,
  Name: 'Alaska',
}, {
  ID: 3,
  Name: 'Arizona',
}, {
  ID: 4,
  Name: 'Arkansas',
}, {
  ID: 5,
  Name: 'California',
}];

const cities = [{
  ID: 1,
  Name: 'Tuscaloosa',
  StateID: 1,
}, {
  ID: 2,
  Name: 'Hoover',
  StateID: 1,
}, {
  ID: 3,
  Name: 'Dothan',
  StateID: 1,
}, {
  ID: 4,
  Name: 'Decatur',
  StateID: 1,
}, {
  ID: 5,
  Name: 'Anchorage',
  StateID: 2,
}, {
  ID: 6,
  Name: 'Fairbanks',
  StateID: 2,
}, {
  ID: 7,
  Name: 'Juneau',
  StateID: 2,
}, {
  ID: 8,
  Name: 'Avondale',
  StateID: 3,
}, {
  ID: 9,
  Name: 'Buckeye',
  StateID: 3,
}];

Answer 1

I managed to resolve the issue using the onEditorPreparing method, basically you have to register the onValueChanged event to manipulate the column cell you need to:

onEditorPreparing: (e): any => {
   if (e.parentType === 'dataRow') {
      if (e.dataField === 'FieldType') {
         e.editorName = 'dxLookup';
         $.extend(e.editorOptions, {
             showClearButton: true,
             dataSource: this.SetDatasource(this.GetArrayDataStore(AdvancedSettingsBuilder.GetFieldTypes)),
             valueExpr: 'value',
             displayExpr: 'text',
             value: e.value || [],
             onValueChanged: async (args): Promise<void> => {
                 e.setValue(args.value);
                 .........