Dropdownlist dissapears upon re-initialization?

8 posts, 0 answers
  1. Kjell
    Kjell avatar
    283 posts
    Member since:
    Jun 2010

    Posted 07 Mar 2012 Link to this post

    I have in my form an autocomplete box and a combobox.  I don't populate the comobox box until a selection is made in the autocomplete box.  This has been working fine, but I don't want the user to be able to type in the combobox so I am converting it to a dropdownlist.  After I made the change, my dropdownlist dissapears after the autocomplete box change event fires.  I stripped the code down so all it is doing is re-initializing the dropdownlist, and it still does the same thing.  Here is the code for my autocomplete box:

    $("#matterCombo").width(300).kendoAutoComplete({
            minLength: 0,
            autoBind: false,
            dataTextField: "text",
            dataSource: {
                serverPaging: true,
                serverFiltering: true,
                pageSize: 5,
                transport: {
                    read: {
                        url: "wsRest.svc/matters/",
                        data: {
                            client: function () {
                                return $("#clientCombo").val();
                            },
                            value: function () {
                                return $("#matterCombo").val();
                            }
                        } //data
                    } //read
                } //trans
            }, //ds
            change: function () {
                $("#custom1Combo").kendoDropDownList();
            }
        });

    The form loads fine, but when the change event fires, custom1Combo dissapears.

    When the page loads, the dropdownlist is initialized like this:

    $("#custom1Combo").width(300).kendoDropDownList();

    The initial initialization is working fine and I am even able to fill in a default value, but then when I try to update it later it just dissapears.

    Help please?

  2. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 08 Mar 2012 Link to this post

    Hi Kjell,

    Our widgets are not designed to be initialized twice - why would you need that?

    Generally, you can simply remove the display:none style of the DropDownList's wrapper element (which is copied from the #custom1Combo element that has been hidden during the first initialization), but I strongly recommend changing your implementation and avoiding duplicate initialization.

    All the best,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kjell
    Kjell avatar
    283 posts
    Member since:
    Jun 2010

    Posted 08 Mar 2012 Link to this post

    Ok let me take a step back and go back to what my final goal is.  This dropdownlist is not supposed to populate until a selection is made in an autocomplete, I'll refer to it as the parent.  The following code was working when my dropdownlist was a combobox:

    definition for parent combo....
     
    change: function () {
        $("#custom1Combo").kendoComboBox({
            dataSource: {
                        autoBind: false,
                        dataTextField: "text",                   
                        transport: {
                            read: {
                                url: "wsRest.svc/custom1/",
                                data: {
                                    user: function () {
                                        return userField.value;
                                    },
                                    client: function () {
                                        return $("#clientCombo").val();
                                    },
                                    matter: function () {
                                        return $("#matterCombo").val();
                                    }
                                }
                            }
                        }
                    },
     
     
    ... more definition for the parent combo box

    Again, this was working fine.. BUT the only problem was I did not want the user to be able to type text into the box. So per the documentation, I figured my next move is to convert this to a dropdownlist.  The first thing I tried was just changing "kendoComboBox" to "kendoDropDownList" in hopes that they had the exact same functionality.  That did not work, I assume I am doing something wrong here and just lucked out that it happened to work with the combobox. 
  4. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 09 Mar 2012 Link to this post

    Hi Kjell,

    The Kendo DropDownList copy the styles from its base element element and since it is hidden the second time, the widget disappears. You can check the Cascading DropDownList example from the Q1 2012 beta to see how to do something similar to your use case.

    Greetings,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Kjell
    Kjell avatar
    283 posts
    Member since:
    Jun 2010

    Posted 09 Mar 2012 Link to this post

    Thanks, I missed that example, I am getting closer.

    Is it possible to define the datasource inside the change event for the parent menu, something like this:

    change: function () {
                     //update the custom1 datasource
                     custom1List.dataSource = new kendo.data.DataSource({
                         transport: {
                             read: {
                                 url: "wsRest.svc/custom1/",
                                 data: {
                                     user: function () {
                                         return userField.value;
                                     },
                                     client: function () {
                                         return $("#clientCombo").val();
                                     },
                                     matter: function () {
                                         return $("#matterCombo").val();
                                     }
                                 }
                             }
                         }
                     });
                 }

    or is there something just really wrong about doing it that way?  I apologize for some of the weird questions I am probably asking, I'v been using your silverlight tools for the last ~18 months and don't have much JS experience.  I am like a fish out of water.

    You guys also may want to consider releasing some kind of intellisense add-on for visual studio, maybe part of "just code", that would be extremely helpful.
  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 12 Mar 2012 Link to this post

    Hello Kjell,

     
    The DropDownList widget internally wires "requestStart" and "change" event of the DataSource. The DropDownList will stop working once you override the dataSource property. I will recommend you to not reassign the dataSource on the fly. Could you please share why you need to recreate the DataSource on change event of the parent widget? What is the difference between the aforementioned example and your case?

    Kind regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Kjell
    Kjell avatar
    283 posts
    Member since:
    Jun 2010

    Posted 12 Mar 2012 Link to this post

    My webservice results are not structured the same way, basically the web service does the filtering and then it just returns key value pairs to populate the menus. 

    I tried doing this instead:

    var custom1DataSource = new kendo.data.DataSource({       
         type: "odata",       
         serverFiltering: true,       
         transport: {
             read: {
                 url: "wsRest.svc/custom1/",
                 data: {
                     user: function () {
                         return userField.value;
                     },
                     client: function () {
                         return $("#clientCombo").val();
                     },
                     matter: function () {
                         return $("#matterCombo").val();
                     }
                 }
             }
         }
     });
     
     var custom1List = $("#custom1Combo").kendoDropDownList({       
         dataTextField: "text",
         dataValueField: "value",
         serverFiltering: true,       
         dataSource: custom1DataSource
     }).data("kendoDropDownList");


    This almost works.  I put a breakpoint in the web service and I can tell that the filters are passed in properly and the data is being returned, however the dropdownlist just sits there and spins.




  8. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 posts

    Posted 14 Mar 2012 Link to this post

    Hello Kjell,

     
    The provided code snippet looks fine at first glance. In order to proceed with the investigation I will need a test project, which replicates the issue.

    Kind regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top