dropdown change event does not update the value

4 posts, 0 answers
  1. Claudia
    Claudia avatar
    33 posts
    Member since:
    Jun 2017

    Posted 15 Jan Link to this post

    I am using a dropdown list that based on the selected item a second dropdown need to be cleared. Selecting an item from the UX fires the change event of the first dropdown and the second one will be cleared only if I trigger the change event manually. If I do that the value of the first dropdown does not get updated. I used select(-1) and value ("-1") and same behavior. Here is my code, I will appreciate any hint on this.

    $("#ddl1").kendoDropDownList({
            dataSource: [
                { value: "1", text: "Option1", priority: 0 },
                { value: "2", text: "Option2", priority: 1 },
                { value: "3", text: "Option3", priority: 1 }
            ],
            dataTextField: "text",
            dataValueField: "value",
            optionLabel: { value: "", text: "-- Select one --" }       
        }).change(function (e) {
            var ddl2 = $("#ddl2").data("kendoDropDownList");
            if (this.value == "1") {
                ddl2.value("-1");
                //ddl2.select(-1);
                //ddl2.trigger('change'); //with this value of ddl2 is cleared ("-- Select one --") and value of ddl1 does not change
            }
            else {
                /**/
            }       
            validateSection(4);
            });
             
    $("#ddl2").kendoDropDownList({
            dataSource: [
                { value: "Y", text: "Yes" },
                { value: "N", text: "No" },
                { value: "NA", text: "Refused to answer" }
            ],
            dataTextField: "text",
            dataValueField: "value",
            optionLabel: { value: "", text: "-- Select one --" },
        }).change(function (e) {
            validateSection(4);
        });
  2. Petar
    Admin
    Petar avatar
    276 posts

    Posted 17 Jan Link to this post

    Hi Claudia,

    I've tried to reproduce the reported behavior in this Dojo example but without success. The values of the DropDownLists seem to be changing as expected. You can see in the console what are the values of each the DropDownLists once one of them changes its value. 

    What I've modified compared to the code you've shared is to comment on the execution of the "validateSection" function and add logging of the DropDownLists' values in the console. Based on my changes and the behavior in the linked above Dojo, I would assume that this function could be breaking the logic.

    If I am missing something and the linked Dojo doesn't represent the functionality you want to achieve, give more details about how the DropDownLists' values should be changing. 

    Regards,
    Petar
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Claudia
    Claudia avatar
    33 posts
    Member since:
    Jun 2017

    Posted 17 Jan in reply to Petar Link to this post

    Hi

    Thank you for your assistance. I found that the problem was the binding. Both dropdowns value are part of  an observable obj . So it was getting updated 2 times keeping the original value. I just updated it in the observable datasource in the change event of each dropdown and is working.

    Thank you

  4. Petar
    Admin
    Petar avatar
    276 posts

    Posted 20 Jan Link to this post

    Hi Claudia,

    I am happy to hear that you've managed to resolve the issue! Thank you for sharing what was the case in your scenario.

    For sure, this information will be useful for someone else in the future. 

    Regards,
    Petar
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top