how to unmount dropdownlist component

[DeBao Chua]

I am wondering how to unmount dropdownlist. It does not display correctly when I close modal dialog.

[Karthikeyan Viswanathan]

Hi DeBao, 

Thanks for contacting Syncfusion support. 

Based on your scenario, you can unmount the dropdown list component by using destroy public method. 

Please refer the API reference link: https://ej2.syncfusion.com/react/documentation/drop-down-list/api-dropDownListComponent.html#destroy  

Regards, 

Karthikeyan V. 

[DeBao Chua]

Hi Karthikeyan Viswanathan,

Thank you for your reply.

I guess it may be the one I need to use "destroy" method but I am not sure how I can call it to unmount or mount dropdownlist? Your sample codes will be helpful.

Another question - not related to dropdownlist. If I have a tab inside dropdownlist, do I have to unmount dropdownlist or tab component?

public componentWillUnmount() {

}

public componentDidMount() {

}

public destroy() {

}

<Col xl={4}>

<div style={headerFont}>{Environment.Lists.Vertraege.fields.Vertragstyp.label}div>

<Field name={Environment.Lists.Vertraege.fields.Vertragstyp.listDataField} validateFields={[]} type="text">

{(props: any) => (

<div>

<DropDownListComponent

cssClass={"e-small"}

placeholder={Environment.Lists.Vertraege.fields.Vertragstyp.label}

dataSource={vertragTypValues}

fields={{ text: "text", value: "value" }}

change={args => props.input.onChange(args.value)}

blur={args => props.input.onBlur(args)}

value={props.input.value}

/>

div>

)}

Field>

Col>

[Karthikeyan Viswanathan]

Hi DeBao, 

Based on your scenario, you can access the destroy public method by using control instance.  

Please refer the below code example: 

<code> 

class Hello extends App { 

  constructor(props) { 

    super(props); 

  }; 

  private sportsData: string[] = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis']; 

  // country DropDownList instance 

    private ddlObj: DropDownList; 

  componentWillMount() { 

     

  } 

  componentWillUnmount() { 

    // No Need 

   // this.ddlObj.destroy(); 

  } 

  render() { 

    return ( 

      <div id="component"> 

        <DropDownListComponent id="ddlelement" ref={(scope) => { this.ddlObj = scope; }} dataSource={this.sportsData} placeholder="Select a game" /> 

      </div> 

    ); 

  } 

} 

</code> 

Refer the sample link: https://stackblitz.com/edit/react-ts-nc4aem?file=index.tsx  

In model dialog mount and unmount scenario, you can load the component dynamically based on open and close event. 

Refer the below code example: 

<Code> 

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

 

  constructor(props) { 

    super(props); 

  } 

public state: AppState = { 

      showChild: false 

  }; 

  private dialogInstance: Dialog; 

 

  onOverlayClick() { 

        this.dialogInstance.hide(); 

        this.setState({ showChild: false }); 

    } 

    onClose() { 

        this.setState({ showChild: false }); 

    } 

    onOpen() { 

        this.setState({ showChild: true }); 

    } 

  //Bind the button click event 

    buttonClick() { 

        this.dialogInstance.show(); 

    } 

 

  render() { 

    const { showChild } = this.state; 

    const childElement = showChild ? <Hello /> : null; 

    return ( 

      <div id="container"> 

         

            <DialogComponent id="dialog" isModal={true} header='DropDown'  ref={dialog => this.dialogInstance = dialog}  width= {'400px'} 

    target='#container' height= {'100%'}   overlayClick={this.onOverlayClick.bind(this)} open={this.onOpen.bind(this)} close={this.onOpen.bind(this)} showCloseIcon = {true} > 

    <div className='content'> 

    <h4>DropDownList</h4> 

         {childElement} 

    </div> 

    </DialogComponent> 

      </div> 

    ); 

  } 

} 

</Code> 

 Refer the API reference link:  https://ej2.syncfusion.com/react/documentation/drop-down-list/api-dropDownListComponent.html#close  

https://ej2.syncfusion.com/react/documentation/drop-down-list/api-dropDownListComponent.html#open  

The above same scenario, you can also unmount the DropDownList from Tab component. 

Regards, 

Karthikeyan V. 

[DeBao Chua]

Thanks.

[Karthikeyan Viswanathan]

Hi DeBao,  

 

Thanks for the update. 

 

We are glad to hear that your issue has been resolved. 

 

Regards, 

Karthikeyan V.