How to access data("ejDropDownList") inside EJ.DropDownList.create event?

[Nga]

Hi. I have a React.Component which wraps EJ.Dropdownlist. I have enabled in component props so that it can render disabled or enabled dropdownlist.

The enabled prop works fine with the component initial creation phase. When the props.enabled is changed and the component is re-rendered, the dropdownlist enabled property is not reflected.

So I would like to access the .data("ejDropDownList") in componentDidUpdate so that I can call method .enable() or .disable().

I don't want to set an ID for each component created. I tried getting .data("ejDropDownList") inside EJ.DropDownList create event but failed. Please help.

type SelectProps = { value: number; options: SelectOption[]; enabled: boolean; }

class Select extends React.Component<SelectProps, void> {
    public render() {
       return <EJ.DropDownList dataSource={this.props.options} fields={{ value: "key", text: "label" }} value={this.props.value} enabled={this.props.enabled} />;
    }

    componentDidUpdate() {
        //call .data("ejDropDownList").enable() or disable() here
    }
}
export default Select;

[Prince Oliver]

Hi Nga, 

Thank you for contacting Syncfusion support. 

We are unable to replicate your scenario at our end. Can you please provide us a sample replicating your scenario? It will help us understand your requirement better and provide you solution. 

Regards, 

Prince  

[Nga]

Hi, I prepare a sample in attachment. The page contains:

- a label displays value of enabled prop.

- an EJ dropdownlist

- a button that toggles enabled prop.

When you click the button, and look at the label, you can see that the enabled prop is changed. But the dropdownlist is not disabled/enabled based on the prop change. Please see my video: https://www.screencast.com/t/8dGt7J65V

Attachment: sample_8f8f64dc.zip

[Prince Oliver]

Hi Nga, 

Thank you for your update. 

You can set id attribute to the dropdownlist and access the control’s instance in the componentDidUpdate method using the id attribute. Then you can disable or enable the control using the control’s instance. Kindly refer to the following code snippet. 

class Select extends React.Component<SelectProps, void> { 

    constructor(props) { 

        super(props); 

    } 

    public render() { 

        return <EJ.DropDownList id="dropdown" dataSource={this.props.options} fields={{ value: "key", text: "label" }} value={this.props.value} enabled={this.props.enabled} />; 

    } 

 

    componentDidUpdate() { 

        var obj = $("#dropdown").data("ejDropDownList"); 

        obj.disable(); 

    } 

} 

Regards, 

Prince 

[Nga]

Hi,

As I mentioned above, I don't want to use ID attribute. Is there any other way?

Thanks.

[Prince Oliver]

Hi Nga,  

 

Thanks for your update.  

 

Instead of using the ID attribute, you can use the widget’s class to get the control’s instance on runtime.   

  

  

 var obj = $(".e-dropdownlist").data("ejDropDownList");   

        obj.disable();   

  

  

   

 

Also, if you want to differentiate each DropDownList using class, you can give the cssClass property to the component and can access it with different class name.  

 

 

  public render() {   

        return <EJ.DropDownList dataSource={this.props.options} fields={{ value: "key", text: "label" }}value={this.props.value} enabled={this.props.enabled} cssClass="myclass" />;   

    }   

   

    componentDidUpdate() {   

        var obj = $(".myclass .e-dropdownlist").data("ejDropDownList");   

        obj.disable();   

    }   

 

 

Regards, 

Prince