We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

how to hide combobox control on selection of value in another combobox

how to hide combobox control on selection of specific value in another combobox

1 Reply

NP Narayanasamy Panneer Selvam Syncfusion Team August 21, 2019 03:55 AM UTC

Hi Amol, 
Thanks for contacting Syncfusion support. 
As per your request we have hided the ComboBox control on value selection of another ComboBox control. Please refer the below code snippet, 

export class Cascading extends SampleBase { 
    constructor() { 
        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.style.display ="none"; 
    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 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"/> 
Please find the sample below, 

Please let us know if you need any further assistance on this. 
Narayanasamy P. 

Live Chat Icon For mobile
Up arrow icon