|
export class Cascading extends SampleBase {
constructor() {
super(...arguments);
this.tempCountry = 'country';
//define the country ComboBox data
this.countryData = data[this.tempCountry];
this.tempState = 'state';
//define the state ComboBox data
this.stateData = data[this.tempState];
// maps the country column to fields property
this.countryFields = { value: 'CountryId', text: 'CountryName' };
// maps the state column to fields property
this.stateFields = { value: 'StateId', text: 'StateName' };
}
onChange() {
this.stateObj.inputWrapper.container.classList.add("e-hide");
if(this.stateObj.inputWrapper.container.classList.contains("e-hide")){
this.stateObj.inputWrapper.container.style.display ="none";
}
}
onClose(){
if(this.stateObj.inputWrapper.container.classList.contains("e-hide")){
this.stateObj.inputWrapper.container.classList.remove("e-hide");
}
}
render() {
return (<div className='control-pane'>
<div className='control-section'>
<div id='cascade'>
<div style={{ paddingTop: '35px' }}>
<ComboBoxComponent id="countryList" dataSource={this.countryData} allowCustom={false} ref={(combobox) => { this.countryObj = combobox; }} popupHeight="auto" fields={this.countryFields} change={this.onChange.bind(this)} close={this.onClose.bind(this)} placeholder="Select a country"/>
</div>
<div style={{ paddingTop: '35px' }}>
<ComboBoxComponent id="stateList" dataSource={this.stateData} allowCustom={false} ref={(combobox) => { this.stateObj = combobox; }} popupHeight="auto" fields={this.stateFields} placeholder="Select a state"/>
</div>
</div>
</div>
</div>);
}
} | 
