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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

131839 Jul 30,2017 11:07 AM Aug 8,2017 08:43 AM ReactJS 5
loading
Tags: ejDropDownList
Nga
Asked On July 30, 2017 11:07 AM

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 [Syncfusion]
Replied On July 31, 2017 08:34 AM

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
Replied On July 31, 2017 10:11 PM

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 [Syncfusion]
Replied On August 4, 2017 08:20 AM

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
Replied On August 7, 2017 04:35 AM

Hi,

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


Thanks.


Prince Oliver [Syncfusion]
Replied On August 8, 2017 08:43 AM

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;