Search results

Cascading DropDownList with Grid editing

You can achieve the Cascading DropDownList with grid Editing by using the Cell Edit Template feature.

In the below demo, Cascading DropDownList rendered for ShipCountry and ShipState column.

Source
Preview
App.tsx
datasource.tsx
import { DataManager, Query } from '@syncfusion/ej2-data';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { ColumnDirective, ColumnsDirective, EditSettingsModel, GridComponent } from '@syncfusion/ej2-react-grids';
import { Edit, IEditCell, Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { cascadeData } from './datasource';

export default class App extends React.Component<{}, {}> {
  public editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true };
  public toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
  public countryParams : IEditCell = {
    create:()=>{
      this.countryElem = document.createElement('input');
      return this.countryElem;
    },
    destroy:()=>{
        this.countryObj.destroy();
    },
    read:()=>{
        return this.countryObj.text;
    },
    write:()=>{
      this.countryObj = new DropDownList({
        change: () => {
          this.stateObj.enabled = true;
          const tempQuery: Query = new Query().where('countryId', 'equal', this.countryObj.value);
          this.stateObj.query = tempQuery;
          this.stateObj.text = '';
          this.stateObj.dataBind();
        },
        dataSource: new DataManager(this.country),
        fields: { value: 'countryId', text: 'countryName' },
        floatLabelType: 'Never',
        placeholder: 'Select a country'
      });
      this.countryObj.appendTo(this.countryElem);
    }
  };
  public stateParams : object = {
    create:()=>{
        this.stateElem = document.createElement('input');
        return this.stateElem;
    },
    destroy:()=>{
        this.stateObj.destroy();
    },
    read:()=>{
        return this.stateObj.text;
    },
    write:()=>{
      this.stateObj = new DropDownList({
        dataSource: new DataManager(this.stateColl),
        enabled: false,
        fields: { value: 'stateId', text: 'stateName' },
        floatLabelType: 'Never',
        placeholder: 'Select a state'
      });
      this.stateObj.appendTo(this.stateElem);
    }
  };

  public countryElem : HTMLElement;
  public countryObj : DropDownList;

  public stateElem : HTMLElement;
  public stateObj : DropDownList;

  public country: object[] = [
      { countryName: 'United States', countryId: '1' },
      { countryName: 'Australia', countryId: '2' }
  ];
  public stateColl: object[] = [
      { stateName: 'New York', countryId: '1', stateId: '101' },
      { stateName: 'Virginia ', countryId: '1', stateId: '102' },
      { stateName: 'Washington', countryId: '1', stateId: '103' },
      { stateName: 'Queensland', countryId: '2', stateId: '104' },
      { stateName: 'Tasmania ', countryId: '2', stateId: '105' },
      { stateName: 'Victoria', countryId: '2', stateId: '106' }
  ];

  public render() {
    return <GridComponent dataSource={cascadeData} editSettings={this.editOptions}
        toolbar={this.toolbarOptions} height={273}>
        <ColumnsDirective>
          <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" isPrimaryKey={true}/>
          <ColumnDirective field='CustomerID' headerText='Customer ID' width='120'/>
          <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' editType= 'dropdownedit' edit={this.countryParams} textAlign="Right"/>
          <ColumnDirective field='ShipState' headerText='Ship State' editType= 'dropdownedit' edit={this.stateParams} width='150'/>
        </ColumnsDirective>
        <Inject services={[Edit, Toolbar]} />
    </GridComponent>
  }
};
export let cascadeData: Object[] = [
    {
        OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
        ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
        ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'Australia', ShipState: 'Queensland', Freight: 32.38, Verified: !0
    },
    {
        OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
        ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
        ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Australia', ShipState: 'Tasmania', Freight: 11.61, Verified: !1
    },
    {
        OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'United States', ShipState: 'New York', Freight: 65.83, Verified: !0
    },
    {
        OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
        ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
        ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'Australia', ShipState: 'Queensland', Freight: 41.34, Verified: !0
    },
    {
        OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 2, OrderDate: new Date(8368506e5),
        ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
        ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'United States', ShipState: 'New York', Freight: 51.3, Verified: !0
    },
    {
        OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 7, OrderDate: new Date(836937e6),
        ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
        ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'United States', ShipState: 'New York', Freight: 58.17, Verified: !0
    },
    {
        OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
        ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
        ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'United States', ShipState: 'Virginia', Freight: 22.98, Verified: !1
    },
    {
        OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
        ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
        ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Australia', ShipState: 'Tasmania', Freight: 148.33, Verified: !0
    },
    {
        OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
        ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
        ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'United States', ShipState: 'Virginia', Freight: 13.97, Verified: !1
    },
    {
        OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
        ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
        ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'United States', ShipState: 'Virginia', Freight: 81.91, Verified: !0
    },
    {
        OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
        ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
        ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'United States', ShipState: 'Washington', Freight: 140.51, Verified: !0
    },
    {
        OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
        ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
        ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'United States', ShipState: 'Washington', Freight: 3.25, Verified: !1
    },
    {
        OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
        ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Australia', ShipState: 'Victoria', Freight: 55.09, Verified: !0
    },
    {
        OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
        ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
        ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'United States', ShipState: 'Washington', Freight: 3.05, Verified: !1
    },
    {
        OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
        ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
        ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'Australia', ShipState: 'Victoria', Freight: 48.29, Verified: !0
    }];