Hello
I had a hard time to find/focus the problem and can't find any solution. I have several cascading Kendoui dropdownlists in my project. I can't use the functionality "cascadeFrom" because I have to fill dropdownlist dynamically. But I assume the problem covers also the functionality "cascadeFrom" as mentioned here.
Here is a working example to reproduce the wrong behaviour. To see the problem you have to follow the steps after the code section:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Kendo UI Snippet</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css"> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css"> <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.ui.core.min.js"></script></head><body><input id='dropdownfirst'/><input id='dropdownsecond'/><script>$("#dropdownfirst").kendoDropDownList({ dataTextField: "showtext", dataValueField: "id", optionLabel: { showtext: "Choose option...", id: "-1"}, dataSource: { data: [{"id": "1", "showtext": "A"}, {"id": "2", "showtext": "B"}] }, change: function(e) { // Empty datasource of dropdownsecond $("#dropdownsecond").data("kendoDropDownList").dataSource.data([]); // Refill datasource of dropdownsecond var newDataSource = [{"id": "1", "showtext": "3"}, {"id": "2", "showtext": "4"}]; $("#dropdownsecond").data("kendoDropDownList").dataSource.data(newDataSource); }});$("#dropdownsecond").kendoDropDownList({ dataTextField: "showtext", dataValueField: "id", optionLabel: { showtext: "Choose option...", id: "-1"}, dataSource: { data: [{"id": "1", "showtext": "1"}, {"id": "2", "showtext": "2"}] }, change: function(e) { alert ("change event of dropdownsecond fired"); }});</script></body></html>After starting the code snippet you should see 2 dropdownlists. Now proceed the following steps to see when the change event of dropdownsecond will not fire:
- Choose "A" from first dropdownlist (dropdownfirst)
- Choose "4" from second dropdownlist (dropdownlistsecond)
-> The change event of second dropdownlist fires and show message - Choose "Choose option..." from first dropdownlist
-> The second dropdownlist will be emptied and will be set back to "Choose option..." - Now choose again "4" from second dropdownlist
-> This time the change event of the second dropdownlist does not fire!
I assume that the second dropdownlist is internally still set to "4" after step 3 and therefore will not fire on step 4 because no change was detected. My project heavily depends on a proper working change event with up to four dropdownlists in a row. I guess this problem came up after Telerik has removed the optional value from DOM (see documention in blue box below "OptionLabel").I don't mind the optionLabel is no more put into DOM but the dropdownlist should, even in such a case, brought into a state where the change event still will fire.
What do you suggest me to do to solve this problem? Workaround?
Regards
What do you suggest me to do
2 Answers, 1 is accepted
Before update widget's source, you will need to reset its value. Thus the widget will continue function properly:
$("#dropdownsecond").data("kendoDropDownList").value("");$("#dropdownsecond").data("kendoDropDownList").dataSource.data([]);Test demo:
Regards,
Georgi Krustev
Telerik
Rank 1
Iron