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?
10 Answers, 1 is accepted
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
Rank 1
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 boxAgain, 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.
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
Rank 1
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.
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?
Georgi Krustev
the Telerik team
Rank 1
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.
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.
Georgi Krustev
the Telerik team
Rank 2
Bronze
Bronze
Bronze
Hello Lee,
It is possible that not properly removing previous instances of the DropDownLists are causing the described behavior. Consider destroying the widgets nested in the modal in its close event handler. For more details on how to destroy widgets, refer to this documentation article.
Give this a try and let us know whether it resolves the issue.
Regards,
Ivan Danchev
Progress Telerik
Rank 2
Bronze
Bronze
Bronze