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
  1. Home
  2. Forum
  3. jQuery
  4. Enable/disable dropdown remove selected values

Enable/disable dropdown remove selected values

Hi,

I have a problem when I change value of 'enabled' attribute for ejDropDownList, all selected values are removed / disappeared.

Attached example partially reproduce example, but I think it would be helpful.
 
There are one multiple dropdown and one button. Click on the button change "enabled" value of dropdown.

Button click complete remove current data source and disable dropdown selection.
I do not know why enabling/disabling have influence on data source at all?

My real problem is that data source is not deleted, just selections are removed, but I could not reproduce it on this test example.

I hope so this would be a enough ...

regards,
Milos

Attachment: HTML_StarterKit_54dea7a4.zip

11 Replies
KV Karthikeyan Viswanathan Syncfusion Team January 12, 2017 07:08 AM UTC

Hi Milos,   
  
Thanks for contacting Syncfusion Support.   
  
We have analyzed your shared sample. We found the issue reproducing criteria of your sample. For the first execution ko.observableArray([]) empty array was assigned to dropdownlist, then updated DropDownDataSource called some array value to be set into dropdownlist. So, that it is working fine initially. On button click, ko.observableArray([]) empty array is set to dropdownlist. For an empty value, the dropdownlist displays nothing and datasource is not loaded. Please check this data source issue and set the data properly.   
  
     
<code>   
  
self.dropDownMultiple = {   
  
// Issue occurred in below highlighted case.   
            dataSource: ko.observableArray([ ]),   
            fields: { text: "text", value: "value" },    
            enabled: self.isReadonly,   
            allowMultiSelection: true,   
            multiSelectMode: "visualMode",   
        }   
  
</code>   
  
   
  
Regards,   
Karthikeyan V.   


MI Milos January 12, 2017 03:12 PM UTC

Hi Karthikeyan,

Thank you for your response.

In my project dropdownlist dataSource is updating all the time with promise requests.
It means my initial datasource does not help me to much since it will be changed many times.

In my new attachment below you can see how I put initial datasource with the same values but different labels.
First time you click on button "Change enabled DD", all selected values will be removed and current data source will be replaced with initial datasource, although selection values are the same. 

I do not know why enabling/disabling feature have influence on dataSource ?
I do not know how does it work in background but I assumed that should be some CSS update (when we enable/disable dropdown) not changing datasource or any other data manipulation. 

Regards,
Milos

Attachment: HTML_StarterKit_fb59fd61.zip

KV Karthikeyan Viswanathan Syncfusion Team January 13, 2017 06:27 AM UTC

Hi Milos, 
 
Thanks for your update. 
 
When button click, Model properties values changes will be reflected into dropdownlist. In your case, Model value changes passing with dataSource and enabled properties. The dataSource value is be changed when you assigned as ko.observableArray([]). For an empty value, the dropdownlist displays nothing and datasource is not loaded. 
 
Regards, 
Karthikeyan V. 


MI Milos January 13, 2017 07:32 AM UTC

Hi Karthikeyan,

Thank you for explanation.

Is there any way how I can solve my problem from last attachment, where I have initial data source and I constantly update datasource and enable / disable dropdown from time to time?

regards,
Milos

GG Gopi Govindasamy Syncfusion Team January 16, 2017 12:55 PM UTC

Hi Milos,  

We have checked your scenario for when click the button to disable the dropdownlist, clear the text and enable the dropdownlist and bind to another datasoure or Model value changes passing with dataSource. The dataSource value is be changed when you assigned as ko.observableArray([]). We have prepared sample and attached sample below link. 


Please let us know if you need any other help. 

Regards, 
Gopi G. 


MI Milos January 17, 2017 12:00 PM UTC

Hi Gopi,

Sorry for the inconvenience, it seems I attached wrong example in one of my previous answer.
Here is the right version now.

Point is that I lost all selection of my dropdown first time when I disabled it.
Enabling datasource also erase my updated datasource and back it to the initial state.


Regards,
Milos

Attachment: Syncfusion_1_a37af553.zip

GG Gopi Govindasamy Syncfusion Team January 19, 2017 03:52 AM UTC

Hi Milos,
  

We have checked your shared sample. Your shared sample button control used. When button click, Model properties values changes will be reflected into dropdownlist. In your case, Model value changes passing with dataSource and enabled properties. So we have use toggle button change event take dropdownlist object enable() and disable() method dropdownlist disabled, but input text clear. Please find the code snippet.
  

<code>  


  

 

self.check = {
    width: "107px", 
    defaultText: "Enable", 
    activeText: "Disable",
    change: function(args){ 
        var obj = $('#' + self.dropDownMultipleId).data("ejDropDownList");
        if(args.isChecked){
            obj.disable();
        } 
        else{
            obj.enable()
        } 
    } 
}
 


  

</code>  


  

Regards,  

Gopi G.  



MI Milos January 20, 2017 03:51 PM UTC

Hi Gopi,

Thanks for replay.

Actually dropdown does not remove selection values when we use jquery:

   var obj = $('#' + self.dropDownMultipleId).data("ejDropDownList");
            obj.disable();  or    obj.enable()


I solved my problem with your replay, thank you, but I thinks it is a bug.
Enabling/disabling feature does not have to do anything with selected values it should work also with ko.observable variable also.


Regards,
Milos

KV Karthikeyan Viswanathan Syncfusion Team January 23, 2017 09:25 AM UTC

Hi Milos, 
 
Thanks for your reply. 
 
Please find the details in following table: 
 
S.No 
Details 
1 
In your shared sample, You have assigned a JSON observable object values into KO Dropdownlist control. In button click, You have change the enable values and in previous you have changed the datasource values as empty array into JSON observable object. This observable object is override the initial rendered. So, The datasource model values changes also be reflected with enable property into dropdownlist. In your case, Model changes passing with dataSource and enabled properties. The dataSource value is be changed when you assigned as ko.observableArray([]). For an empty value, the dropdownlist displays nothing and datasource is not loaded. 
So, This is not an issue. It is a behavior of Knockout JS. Please refer to the Knockout JS Documentation link: http://knockoutjs.com/documentation/observables.html 
2 
In JavaScript , Public method call(enable() / disable()) is not be changed the JSON observable object values. So, Dropdownlist datasource values is not be changed. This is the different between this two scenario. 
 
Please let us know if you need any other help. 
 
Regards, 
Karthikeyan V. 


MI Milos January 23, 2017 12:03 PM UTC

Hi Karthikeyan ,

Thanks for explanation, now it is clear.
No more questions from my side :).

Regards,
Milos

KV Karthikeyan Viswanathan Syncfusion Team January 24, 2017 05:32 AM UTC

Hi Milos,    
  
Thanks for the update.   
  
We are glad the suggestion helped you to achieve your requirement.   
  
Please let us know if you need further assistance.   
  
Regards,    
Karthikeyan V.  


SIGN IN To post a reply.
Loader.
Live Chat Icon For mobile
Up arrow icon