Editable Grid. Filter Foreign key field data when selecting value in an other foreign key field.

[Unknown]

Hi.

I have a grid that has two Foreign Key columns among others fields (lets say Roles and Portals) . They are both editable.
User starts editing a row. He goes to Portals field, and selects a specific value from a list of portals. 
Then he goes to Roles field to select a role from a dropdown list.
I want to filter the data of the dropdown list, in the Roles field, depending on what value was selected on the Portals field.

Is there a way to achieve that? This is my code.

const Grid = React.memo( props => {

  const {
    gridRef,
    addToast,
    context
  } = props;

  const LOCALE = window.BASE_LURL;
  const LANG = window.LANG;
  const { t } = useTranslation('gridHeaders');
  L10n.load(L10nTranslations);

  const dataManager = new DataManager({
    adaptor: new UrlAdaptor(),
    insertUrl: `${LOCALE}parameters/portal/user/roles/store`,
    removeUrl: `${LOCALE}parameters/portal/user/roles/remove`,
    updateUrl: `${LOCALE}parameters/portal/user/roles/update`,
    url: `${LOCALE}parameters/portal/user/roles/index`
  });

  const commands = [
    { type: 'Edit', buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' } },
    { type: 'Delete', buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons' } },
    { type: 'Save', buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons' } },
    { type: 'Cancel', buttonOption: { cssClass: 'e-flat', iconCss: 'e-cancel-icon e-icons' } }
  ];

  const userParams = {
    params: {
      actionComplete: () => false,
      allowFiltering: true,
      dataSource: context.users,
      fields: { text: "LoginName", value: "UserId" },
      query: new Query()
    }
  };

  return (
    <>
      <GridComponent
        ref={gridRef}
        dataSource={dataManager}
        editSettings={{
          allowDeleting: true,
          allowAdding: true,
          allowEditing: true,
          mode: 'Normal',
          newRowPosition: 'Bottom',
          showDeleteConfirmDialog: true
        }}
        toolbar={['Add', 'ColumnChooser']}
        locale={LANG}
        allowPaging={true}
        pageSettings={{ pageSize: 10, pageSizes: [5, 10, 20, 50] }}
        allowSorting={true}
        allowMultiSorting={true}
        allowFiltering={true}
        filterSettings={{ ignoreAccent: true, type: 'Menu' }}
        allowGrouping={true}
        allowResizing={true}
        allowReordering={true}
        allowTextWrap={true}
        textWrapSettings={{ wrapMode: 'Content' }}
        showColumnChooser={true}
        sortSettings={{ columns: [{ field: 'Description', direction: 'Ascending' }] }}
        actionFailure={(args) => handleGridErrorResponse(args, gridRef, addToast, t)}
      >
        <ColumnsDirective>
          <ColumnDirective commands={commands} allowResizing={false} width='40' textAlign='center' />
          <ColumnDirective field='id' headerText='id' visible={false} isPrimaryKey={true} />
          <ColumnDirective
            field='PortalId'
            headerText={t('Portal')}
            dataSource={context.portals}
            foreignKeyField='PortalId'
            foreignKeyValue='PortalName'
            textAlign='Left'
            allowEditing={false}
          />
          <ColumnDirective
            field='UserId'
            headerText={t('User')}
            dataSource={context.users}
            foreignKeyField='UserId'
            foreignKeyValue='LoginName'
            textAlign='Left'
            edit={userParams}
          />
          <ColumnDirective
            field='RoleId'
            headerText={t('Role')}
            dataSource={context.roles}
            foreignKeyField='RoleId'
            foreignKeyValue='Description'
            textAlign='Left'
            validationRules={{ required: true }}
          />
        </ColumnsDirective>
        <Inject services={[Page, Toolbar, Filter, Sort, Group, Resize, ForeignKey, ColumnChooser, Reorder, Edit, CommandColumn]} />
      </GridComponent>
    </>
  )
});

Attachment: UserRoles_72f7449b.rar

[Joseph Christ Nithin Issack]

Hi Alexandri,

  Greetings from Syncfusion support.

  Based on your requirement, you want to filter a dropdown edit column based on the value selected in the dropdown of another column. Your requirement can be achieved using cascading dropdown list. We have discussed this topic in detail in the below documentation.

Documentation: https://ej2.syncfusion.com/react/documentation/grid/how-to/cascading-drop-down-list-with-grid-editing/

Please get back to us for further details.

Regards,

Joseph I.