Bug: Change event fails on kendoui dropdownlist

3 posts, 0 answers
  1. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 20 Feb Link to this post

    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>
     
     
     
    </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:

    1. Choose "A" from first dropdownlist (dropdownfirst)
    2. Choose "4" from second dropdownlist (dropdownlistsecond)
      -> The change event of second dropdownlist fires and show message
    3. Choose "Choose option..." from first dropdownlist
      -> The second dropdownlist will be emptied and will be set back to "Choose option..."
    4. 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. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 24 Feb Link to this post

    Hello Tayger,

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 15 Mar in reply to Georgi Krustev Link to this post

    Excellent and thank you for the demo. Works fine now also on my side with your help.
Back to Top