Multiple cascading in React Drop down list component

15 Mar 202424 minutes to read

The following example demonstrate about how to preselect the list items in multiple cascading DropDownList.

[Class-component]

index.jsx

import { Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    // country DropDownList instance
    countryObj;
    // state DropDownList instance
    stateObj;
    // city DropDownList instance
    cityObj;
    // define the country DropDownList data
    countryData = [
        { CountryName: 'Australia', CountryId: '2' },
        { CountryName: 'United States', CountryId: '1' }
    ];
    // define the state DropDownList data
    stateData = [
        { StateName: 'New York', CountryId: '1', StateId: '101' },
        { StateName: 'Virginia ', CountryId: '1', StateId: '102' },
        { StateName: 'Tasmania ', CountryId: '2', StateId: '105' }
    ];
    // define the city DropDownList data
    cityData = [
        { CityName: 'Albany', StateId: '101', CityId: 201 },
        { CityName: 'Beacon ', StateId: '101', CityId: 202 },
        { CityName: 'Emporia', StateId: '102', CityId: 206 },
        { CityName: 'Hampton ', StateId: '102', CityId: 205 },
        { CityName: 'Hobart', StateId: '105', CityId: 213 },
        { CityName: 'Launceston ', StateId: '105', CityId: 214 }
    ];
    // maps the country column to fields property
    countryField = { value: 'CountryId', text: 'CountryName' };
    // maps the state column to fields property
    stateField = { value: 'StateId', text: 'StateName' };
    // maps the city column to fields property
    cityField = { text: 'CityName', value: 'CityId' };
    // Index no of the country dropdownlist
    index = 1;
    constructor(props) {
        super(props);
        this.onCountryChange = this.onCountryChange.bind(this);
        this.onStateChange = this.onStateChange.bind(this);
    }
    onCountryChange() {
        // query the data source based on country DropDownList selected value
        this.stateObj.query = new Query().where('CountryId', 'equal', this.countryObj.value);
        // enable the state DropDownList
        this.stateObj.enabled = true;
        // clear the existing selection.
        this.stateObj.text = null;
        // bind the property changes to state DropDownList
        this.stateObj.dataBind();
        // clear the existing selection in city DropDownList
        this.cityObj.text = null;
        // disable the city DropDownList
        this.cityObj.enabled = false;
        // bind the property change to City DropDownList
        this.cityObj.dataBind();
    }
    onStateChange() {
        // query the data source based on state DropDownList selected value
        this.cityObj.query = new Query().where('StateId', 'equal', this.stateObj.value);
        // enable the city DropDownList
        this.cityObj.enabled = true;
        // clear the existing selection
        this.cityObj.text = null;
        // bind the property change to city DropDownList
        this.cityObj.dataBind();
    }
    componentDidMount() {
        this.onCountryChange();
        // preselect an item from filtered state DropDownList
        this.stateObj.index = 0;
        this.stateObj.dataBind();
        // initally change event not triggered, so manually call the corresponding function
        this.onStateChange();
        // preselect an item from filtered city DropDownList
        this.cityObj.index = 0;
        this.cityObj.dataBind();
    }
    render() {
        return (<div>
        {/* specifies the tag for render the country DropDownList component */}
        <DropDownListComponent id="country-ddl" ref={(scope) => { this.countryObj = scope; }} index={this.index} fields={this.countryField} dataSource={this.countryData} placeholder='Select a country' change={this.onCountryChange}/>
        <br />

        {/* specifies the tag for render the state DropDownList component */}
        <DropDownListComponent id="state-ddl" ref={(scope) => { this.stateObj = scope; }} enabled={false} fields={this.stateField} dataSource={this.stateData} placeholder='Select a state' change={this.onStateChange}/>
        <br />

        {/* specifies the tag for render the city DropDownList component */}
        <DropDownListComponent id="city-ddl" ref={(scope) => { this.cityObj = scope; }} enabled={false} fields={this.cityField} dataSource={this.cityData} placeholder='Select a city'/>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { Query } from '@syncfusion/ej2-data';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {

  // country DropDownList instance
  private countryObj: any;

  // state DropDownList instance
  private stateObj: any;

  // city DropDownList instance
  private cityObj: any;

  // define the country DropDownList data
  private countryData: { [key: string]: Object }[] = [
    { CountryName: 'Australia', CountryId: '2' },
    { CountryName: 'United States', CountryId: '1' }
  ];

  // define the state DropDownList data
  private stateData: { [key: string]: Object }[] = [
    { StateName: 'New York', CountryId: '1', StateId: '101' },
    { StateName: 'Virginia ', CountryId: '1', StateId: '102' },
    { StateName: 'Tasmania ', CountryId: '2', StateId: '105' }
  ];

  // define the city DropDownList data
  private cityData: { [key: string]: Object }[] = [
    { CityName: 'Albany', StateId: '101', CityId: 201 },
    { CityName: 'Beacon ', StateId: '101', CityId: 202 },
    { CityName: 'Emporia', StateId: '102', CityId: 206 },
    { CityName: 'Hampton ', StateId: '102', CityId: 205 },
    { CityName: 'Hobart', StateId: '105', CityId: 213 },
    { CityName: 'Launceston ', StateId: '105', CityId: 214 }
  ];

  // maps the country column to fields property
  private countryField: object = { value: 'CountryId', text: 'CountryName' };

  // maps the state column to fields property
  private stateField: object = { value: 'StateId', text: 'StateName' };

  // maps the city column to fields property
  private cityField: object = { text: 'CityName', value: 'CityId' };

  // Index no of the country dropdownlist
  private index: number = 1;

  constructor(props: any) {
    super(props);
    this.onCountryChange = this.onCountryChange.bind(this);
    this.onStateChange = this.onStateChange.bind(this);
  }

  public onCountryChange() {
    // query the data source based on country DropDownList selected value
    this.stateObj.query = new Query().where('CountryId', 'equal', this.countryObj.value);
    // enable the state DropDownList
    this.stateObj.enabled = true;
    // clear the existing selection.
    this.stateObj.text = null;
    // bind the property changes to state DropDownList
    this.stateObj.dataBind();
    // clear the existing selection in city DropDownList
    this.cityObj.text = null;
    // disable the city DropDownList
    this.cityObj.enabled = false;
    // bind the property change to City DropDownList
    this.cityObj.dataBind();
  }
  public onStateChange() {
    // query the data source based on state DropDownList selected value
    this.cityObj.query = new Query().where('StateId', 'equal', this.stateObj.value);
    // enable the city DropDownList
    this.cityObj.enabled = true;
    // clear the existing selection
    this.cityObj.text = null;
    // bind the property change to city DropDownList
    this.cityObj.dataBind();
  }
  public componentDidMount() {
    this.onCountryChange();
    // preselect an item from filtered state DropDownList
    this.stateObj.index = 0;
    this.stateObj.dataBind();
    // initally change event not triggered, so manually call the corresponding function
    this.onStateChange();
    // preselect an item from filtered city DropDownList
    this.cityObj.index = 0;
    this.cityObj.dataBind();
  }
  public render() {
    return (
      <div>
        {/* specifies the tag for render the country DropDownList component */}
        <DropDownListComponent id="country-ddl" ref={(scope) => { this.countryObj = scope; }} index={this.index} fields={this.countryField} dataSource={this.countryData} placeholder='Select a country' change={this.onCountryChange} />
        <br />

        {/* specifies the tag for render the state DropDownList component */}
        <DropDownListComponent id="state-ddl" ref={(scope) => { this.stateObj = scope; }} enabled={false} fields={this.stateField} dataSource={this.stateData} placeholder='Select a state' change={this.onStateChange} />
        <br />

        {/* specifies the tag for render the city DropDownList component */}
        <DropDownListComponent id="city-ddl" ref={(scope) => { this.cityObj = scope; }} enabled={false} fields={this.cityField} dataSource={this.cityData} placeholder='Select a city' />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

index.jsx

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { useState, useRef } from 'react';
import { Query } from '@syncfusion/ej2-data';

function App() {
      // state DropDownList instance
  const stateObj = useRef(null);
  // city DropDownList instance
  const cityObj = useRef(null);
  //define the country DropDownList data
  const countryData = [
    { CountryName: 'Australia', CountryId: '2' },
    { CountryName: 'United States', CountryId: '1' }
    ];
  //define the state DropDownList data
  const stateData = [
    { StateName: 'New York', CountryId: '1', StateId: '101' },
    { StateName: 'Virginia ', CountryId: '1', StateId: '102' },
    { StateName: 'Tasmania ', CountryId: '2', StateId: '105' }
  ];
  //define the city DropDownList data
  const cityData = [
    { CityName: 'Albany', StateId: '101', CityId: 201 },
    { CityName: 'Beacon ', StateId: '101', CityId: 202 },
    { CityName: 'Emporia', StateId: '102', CityId: 206 },
    { CityName: 'Hampton ', StateId: '102', CityId: 205 },
    { CityName: 'Hobart', StateId: '105', CityId: 213 },
    { CityName: 'Launceston ', StateId: '105', CityId: 214 }
  ];
  // maps the country column to fields property
  const countryFields = { value: 'CountryId', text: 'CountryName' };
  // maps the state column to fields property
  const stateFields = { value: 'StateId', text: 'StateName' };
  // maps the city column to fields property
  const cityFields = { text: 'CityName', value: 'CityId' };
  const [stateQuery, setStateQuery] = useState(null);
  const [stateText, setStateText] = useState(null);
  const [cityText, setCityText] = useState(null);
  const [cityQuery, setCityQuery] = useState(null);
  const countryChange = (args) => {
    // query the data source based on country DropDownList selected value
    let tempQuery = new Query().where('CountryId', 'equal', args.value);
    setStateQuery(tempQuery);
    // clear the existing selection.
    setStateText(null);
    // bind the property changes to state DropDownList
    stateObj.current.dataBind();
    // clear the existing selection.
    setCityText(null);
    // bind the property changes to city DropDownList
    cityObj.current.dataBind();
  };
  const stateChange = (args) => {
    // query the data source based on state DropDownList selected value
    let tempQuery1 = new Query().where('StateId', 'equal', args.value);
    setCityQuery(tempQuery1);
    // clear the existing selection.
    setCityText(null);
  };
    return (
      <div id="cascade">
        <div style=>
          <DropDownListComponent
            id="country"
            dataSource={countryData}
            fields={countryFields}
            popupHeight="auto"
            change={countryChange.bind(this)}
            placeholder="Select a country"
          />
        </div>
        <div style=>
          <DropDownListComponent
            id="state"
            dataSource={stateData}
            ref={stateObj}
            fields={stateFields}
            popupHeight="auto"
            change={stateChange.bind(this)}
            placeholder="Select a state"
            query={stateQuery}
            text={stateText}
          />
        </div>
        <div style=>
          <DropDownListComponent
            id="city"
            dataSource={cityData}
            ref={cityObj}
            fields={cityFields}
            popupHeight="auto"
            placeholder="Select a city"
            text={cityText}
            query={cityQuery}
          />
        </div>
      </div>
    );
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { useState, useRef } from 'react';
import { Query } from '@syncfusion/ej2-data';

function App() {
      // state DropDownList instance
  const stateObj = useRef(null);
  // city DropDownList instance
  const cityObj = useRef(null);
  const tempCountry = 'country';
  //define the country DropDownList data
  const countryData = [
    { CountryName: 'Australia', CountryId: '2' },
    { CountryName: 'United States', CountryId: '1' }
    ];
  const tempState = 'state';
  //define the state DropDownList data
  const stateData = [
    { StateName: 'New York', CountryId: '1', StateId: '101' },
    { StateName: 'Virginia ', CountryId: '1', StateId: '102' },
    { StateName: 'Tasmania ', CountryId: '2', StateId: '105' }
  ];
  const tempCity = 'cities';
  //define the city DropDownList data
  const cityData = [
    { CityName: 'Albany', StateId: '101', CityId: 201 },
    { CityName: 'Beacon ', StateId: '101', CityId: 202 },
    { CityName: 'Emporia', StateId: '102', CityId: 206 },
    { CityName: 'Hampton ', StateId: '102', CityId: 205 },
    { CityName: 'Hobart', StateId: '105', CityId: 213 },
    { CityName: 'Launceston ', StateId: '105', CityId: 214 }
  ];
  // maps the country column to fields property
  const countryFields = { value: 'CountryId', text: 'CountryName' };
  // maps the state column to fields property
  const stateFields = { value: 'StateId', text: 'StateName' };
  // maps the city column to fields property
  const cityFields = { text: 'CityName', value: 'CityId' };
  const [stateQuery, setStateQuery] = useState(null);
  const [stateText, setStateText] = useState(null);
  const [cityText, setCityText] = useState(null);
  const [cityQuery, setCityQuery] = useState(null);
  const countryChange = (args) => {
    // query the data source based on country DropDownList selected value
    let tempQuery = new Query().where('CountryId', 'equal', args.value);
    setStateQuery(tempQuery);
    // clear the existing selection.
    setStateText(null);
    // bind the property changes to state DropDownList
    stateObj.current.dataBind();
    // clear the existing selection.
    setCityText(null);
    // bind the property changes to city DropDownList
    cityObj.current.dataBind();
  };
  const stateChange = (args) => {
    // query the data source based on state DropDownList selected value
    let tempQuery1 = new Query().where('StateId', 'equal', args.value);
    setCityQuery(tempQuery1);
    // clear the existing selection.
    setCityText(null);
  };
    return (
      <div id="cascade">
        <div style=>
          <DropDownListComponent
            id="country"
            dataSource={countryData}
            fields={countryFields}
            popupHeight="auto"
            change={countryChange.bind(this)}
            placeholder="Select a country"
          />
        </div>
        <div style=>
          <DropDownListComponent
            id="state"
            dataSource={stateData}
            ref={stateObj}
            fields={stateFields}
            popupHeight="auto"
            change={stateChange.bind(this)}
            placeholder="Select a state"
            query={stateQuery}
            text={stateText}
          />
        </div>
        <div style=>
          <DropDownListComponent
            id="city"
            dataSource={cityData}
            ref={cityObj}
            fields={cityFields}
            popupHeight="auto"
            placeholder="Select a city"
            text={cityText}
            query={cityQuery}
          />
        </div>
      </div>
    );
}
ReactDOM.render(<App />, document.getElementById('sample'));