Weird behaviour on dropdownlist.open()

9 posts, 1 answers
  1. Tayger
    Tayger avatar
    130 posts
    Member since:
    Jan 2015

    Posted 20 Oct Link to this post

    Hello

    There is a weird behaviour using Kendo.dropdownlist.open() function: In the fully working example below you see 3 defined Kendo DropdownList. As soon as a value is chosen from first dropdownlist it opens the second dropdownlist. Choosing an option of second dropdownlist opens the third dropdownlist. Try this to show you the weird effect:

    1. Choose "SUV" from first dropdownlist
    2. Choose "Normal" from second dropdownlist
    3. Choose "orange" from third dropdownlist.

    So far it works fine as it should. Now open the first dropdownlist again and choose "Convertible": The second AND the third dropdownlist will be opened. The third dropdownlist shouldn't be opened! The reason why the third dropdownlist will be opened is caused by resetting the datasource source3 in the change event of dropdownlist1 (took me a while to find that out).

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
     
     
     
     
     
    <script>
        // Define datasources for dropdownlists
        var source1 = new kendo.data.DataSource({
            data: [
                { id: -1, name: "Choose type..." },
                { id: 1, name: "SUV" },
                { id: 2, name: "Convertible" }
            ]});
     
        var source2 = new kendo.data.DataSource({
            data: [
                { id: -1, name: "Choose size..." },
                { id: 1, name: "Normal" },
                { id: 2, name: "Small" }
            ]});
     
        var source3 = new kendo.data.DataSource({
            data: [
                { id: -1, name: "Choose color..." },
                { id: 1, name: "green" },
                { id: 2, name: "blue" }
            ]});
     
        $(document).ready(function() {
     
            $("#dropdownlist1").kendoDropDownList({
                value: -1,
                dataSource: source1,
                dataTextField: "name",
                dataValueField: "id",
                change: function () {
                    // Change options of dropdownlist3
                    source3.data([
                        { id: -1, name: "Choose color..." },
                        { id: "Choose type...", name: "orange" },
                        { id: "Choose type...", name: "brown" }
                    ]);
     
                    $("#dropdownlist2").data("kendoDropDownList").open();
                }
            });
     
            $("#dropdownlist2").kendoDropDownList({
                value: -1,
                dataSource: source2,
                dataTextField: "name",
                dataValueField: "id",
                change: function () {
                    $("#dropdownlist3").data("kendoDropDownList").open();
                }
            });
     
            $("#dropdownlist3").kendoDropDownList({
                value: -1,
                dataSource: source3,
                dataTextField: "name",
                dataValueField: "id"
            });
        });
    </script>
     
    <div id="mydiv">
        <input id="dropdownlist1" style='width: 170px;' />
        <input id="dropdownlist2" style='width: 170px;' />
        <input id="dropdownlist3" style='width: 170px;' />
    </div>
     
    </body>
    </html>

    (I am aware of cascading dropdownlists but my project goes beyond that so I need to refill datasources by myself).

    What needs to be done to avoid the third dropdownlist get opened in such a case?

  2. Neli
    Admin
    Neli avatar
    59 posts

    Posted 24 Oct Link to this post

    Hello,

    The proper way to set dataSource to an existing DropDownList widget is to use setDataSource method. In the change event handler of the first DropDownList the new dataSource could be created. After that, it could be set to the reference of the third DropDownList. 
    source3 = new kendo.data.DataSource({
        data: [                            
            { id: 3, name: "orange" },
            { id: 4, name: "brown" }
        ]});  
                     
    var dropdownlist = $("#dropdownlist3").data("kendoDropDownList");              
    dropdownlist.setDataSource(source3);

    Through autoBind property it could be configured if the widget will be bound to the dataSource on initialization.
    $("#dropdownlist3").kendoDropDownList({           
    dataSource: source3,
    autoBind: false,

    Note, that the more suitable way for setting a default option text is by using optionLabel property.   

    Here is the modified Dojo example.

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Tayger
    Tayger avatar
    130 posts
    Member since:
    Jan 2015

    Posted 25 Oct in reply to Neli Link to this post

    Thank you, I see it working now - in the demo. I adapted it 1:1 to my project code and have still the same problem. Well, thats on my side now. Based on your example: I don't understand why I have to re-attach the dataSource after changing the content of that dataSource in order to make it work. The dataSource is initially attached to the dropdownList. Changing the dataSource elements in the background works fine. I just don't understand the cascading opening in that case.
  4. Tayger
    Tayger avatar
    130 posts
    Member since:
    Jan 2015

    Posted 25 Oct Link to this post

    Considering the LabelProperty option, that I'm aware of. In my case even that content could differ! So whether using the LabelProperty option instead of a "real" entry is no advantage (imho).
  5. Answer
    Neli
    Admin
    Neli avatar
    59 posts

    Posted 25 Oct Link to this post

    Hi Tayger,

    For standard scenarios the optionLabel property is the easier and more proper way for setting a default text in the DropDownList. Of course, if the scenario requires, it could be omitted from the settings.

    The content of the dataSource could be changed also by just setting a new array and the example will still work:
    source3 = [                               
    { id: 3, name: "orange" },
        { id: 4, name: "brown" }
    ];

    The important part is to use setDataSource method in order to rebind the new data after changing it.

    If the issue persist on your side, could you please modify the Dojo accordingly, so we could provide further assistance.

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Tayger
    Tayger avatar
    130 posts
    Member since:
    Jan 2015

    Posted 25 Oct in reply to Neli Link to this post

    Hi Neli

    Thanks again! I can confirm that the keypoint is to re-attach the dataSource to the dropdownlist. I can make it work then as well in my project code. I only want to refill the dataSource of the dropdownList in the background.

    I still can't see the reason why this solves the problem and sometimes the "open" behaviour work in my project and sometimes not. So there is something weird in the relation of a dropdownList and its attached dataSource causing this open behaviour. I treat your solution as work workaround in that case.

  7. Tayger
    Tayger avatar
    130 posts
    Member since:
    Jan 2015

    Posted 25 Oct in reply to Neli Link to this post

    I know now why you wanted me to use the optionLabel:My solution doesn't work anymore with autoBind: false, that is required to solve the open-problem. Wit autoBind: false you can't attach a dataSource and select a value (by default) anymore. So you are forced to use the optionLabel that works with autoBind: false.
  8. Neli
    Admin
    Neli avatar
    59 posts

    Posted 27 Oct Link to this post

    Hello Tayger,

    The setDataSource method sets the dataSource and rebinds the widget, thus tirggering change. Therefore, when the widget is rebound it gets opened, which is the expected behavior.In order to prevent the third DropDownList from opening when its dataSource is rebound, the autobind property set to false is mandatory.

    Also, the third DropDownList is empty before clicking on one of the DropDownLists, because its data is not retrieved yet. As the data is not fetched, the default value is unknown and the DropDownList initially is displayed empty. Using the optionLabel property is giving the possibility to have text in the DropDownList before retrieving the data.

    Please let us know in case any further question arise, so we could assist you accordingly.

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Tayger
    Tayger avatar
    130 posts
    Member since:
    Jan 2015

    Posted 27 Oct in reply to Neli Link to this post

    Hi Neli

    I understand that all and it works now as it should (autobind: false). I don't get the point why (previously) bound dropdownlists will open as well even if I want to open a very specific dropdownlist. Every dropdownlist has its own dataSource and should therefore be unrelated to any other dropdownlist/dataSource (even if bound) by opening one.

    We can leave that as it is. You could help me and it works, thanks!

Back to Top