How can I help you?
Cascading in React Combo box component
21 Feb 202616 minutes to read
Cascading ComboBox creates a series of dependent dropdowns, where the value of one ComboBox depends on another’s selection. Configure this using the change event of the parent ComboBox. In the change event handler, load data into the child ComboBox based on the parent’s selected value.
The following example demonstrates cascading behavior with country, state, and city ComboBox components. The dataBind method is used to immediately reflect property changes in the ComboBox.
import { Query } from '@syncfusion/ej2-data';
import { ComboBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
// country ComboBox instance
countryObj;
// state ComboBox instance
stateObj;
// city ComboBox instance
cityObj;
// define the country ComboBox data
countryData = [
{ CountryName: 'Australia', CountryId: '2' },
{ CountryName: 'United States', CountryId: '1' }
];
// define the state ComboBox data
stateData = [
{ StateName: 'New York', CountryId: '1', StateId: '101' },
{ StateName: 'Virginia ', CountryId: '1', StateId: '102' },
{ StateName: 'Tasmania ', CountryId: '2', StateId: '105' }
];
// define the city ComboBox 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' };
constructor(props) {
super(props);
this.onCountryChange = this.onCountryChange.bind(this);
this.onStateChange = this.onStateChange.bind(this);
}
onCountryChange() {
// query the data source based on country ComboBox selected value
this.stateObj.query = new Query().where('CountryId', 'equal', this.countryObj.value);
// enable the state ComboBox
this.stateObj.enabled = true;
// clear the existing selection.
this.stateObj.text = '';
// bind the property changes to state ComboBox
this.stateObj.dataBind();
// clear the existing selection in city ComboBox
this.cityObj.text = '';
// disable the city ComboBox
this.cityObj.enabled = false;
// bind the property change to City ComboBox
this.cityObj.dataBind();
}
onStateChange() {
// query the data source based on state ComboBox selected value
this.cityObj.query = new Query().where('StateId', 'equal', this.stateObj.value);
// enable the city ComboBox
this.cityObj.enabled = true;
// clear the existing selection
this.cityObj.text = '';
// bind the property change to city ComboBox
this.cityObj.dataBind();
}
render() {
return (<div>
{/* specifies the tag for render the country ComboBox component */}
<ComboBoxComponent id="country-ddl" ref={(scope) => { this.countryObj = scope; }} fields={this.countryField} dataSource={this.countryData} placeholder='Select a country' change={this.onCountryChange}/>
<br />
{/* specifies the tag for render the state ComboBox component */}
<ComboBoxComponent 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 ComboBox component */}
<ComboBoxComponent 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'));import { Query } from '@syncfusion/ej2-data';
import { ComboBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// country ComboBox instance
private countryObj: ComboBoxComponent;
// state ComboBox instance
private stateObj: ComboBoxComponent;
// city ComboBox instance
private cityObj: ComboBoxComponent;
// define the country ComboBox data
private countryData: { [key: string]: Object }[] = [
{ CountryName: 'Australia', CountryId: '2' },
{ CountryName: 'United States', CountryId: '1' }
];
// define the state ComboBox 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 ComboBox 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' };
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 ComboBox selected value
this.stateObj.query = new Query().where('CountryId', 'equal', this.countryObj.value);
// enable the state ComboBox
this.stateObj.enabled = true;
// clear the existing selection.
this.stateObj.text = '';
// bind the property changes to state ComboBox
this.stateObj.dataBind();
// clear the existing selection in city ComboBox
this.cityObj.text = '';
// disable the city ComboBox
this.cityObj.enabled = false;
// bind the property change to City ComboBox
this.cityObj.dataBind();
}
public onStateChange() {
// query the data source based on state ComboBox selected value
this.cityObj.query = new Query().where('StateId', 'equal', this.stateObj.value);
// enable the city ComboBox
this.cityObj.enabled = true;
// clear the existing selection
this.cityObj.text = '';
// bind the property change to city ComboBox
this.cityObj.dataBind();
}
public render() {
return (
<div>
{/* specifies the tag for render the country ComboBox component */}
<ComboBoxComponent id="country-ddl" ref={(scope) => { (this.countryObj as ComboBoxComponent | null) = scope; }} fields={this.countryField} dataSource={this.countryData} placeholder='Select a country' change={this.onCountryChange} />
<br />
{/* specifies the tag for render the state ComboBox component */}
<ComboBoxComponent id="state-ddl" ref={(scope) => { (this.stateObj as ComboBoxComponent | null) = scope; }} enabled={false} fields={this.stateField} dataSource={this.stateData} placeholder='Select a state' change={this.onStateChange} />
<br />
{/* specifies the tag for render the city ComboBox component */}
<ComboBoxComponent id="city-ddl" ref={(scope) => { (this.cityObj as ComboBoxComponent | null) = scope; }} enabled={false} fields={this.cityField} dataSource={this.cityData} placeholder='Select a city' />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));