Charles Wiebe
Top achievements
Rank 1
Rank 1
Charles Wiebe
asked on 09 Apr 2012, 05:17 PM
Using a listview with templating.
The template has a DropDownList in it that the user can change by clicking the Save button.
When the form is first displayed, the dropdownlist looks good.
But when the results from the save button are returned, the DropDownList disappears.
Looking at FireBug, the html code for the dropdownlist is: (difference between visible and invisible is the first 'style="display: none;"'). I cannot figure how the display is set to none.
<span tabindex="0" style="display: none;" unselectable="on" class="k-widget k-dropdown k-header"><span class="k-dropdown-wrap k-state-default" unselectable="on"><span class="k-input" unselectable="on">C</span><span class="k-select"><span class="k-icon k-arrow-down">select</span></span></span><input value="d8368ccc-7974-4353-8462-e414d48164b3" id="ddlOwner" data-role="dropdownlist" style="display: none;"></span>
The template has a DropDownList in it that the user can change by clicking the Save button.
When the form is first displayed, the dropdownlist looks good.
But when the results from the save button are returned, the DropDownList disappears.
<div id="listView"></div><script type="text/x-kendo-tmpl" id="dataSource-template"><div class="product-view"><fieldset><legend>Owner</legend><input id="ddlOwner" value="#= Owner #" /></fieldset><a id="Save" class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a></div></script>$(document).ready(function() { var dataSource = new kendo.data.DataSource ({<-- snip -->change: function() {template = kendo.template($("#dataSource-template").html());$("#listview").html(kendo.render(template, this.view())); $("#ddlOwner").kendoDropDownList({ dataTextField: "Text", dataValueField: "Value", dataSource:
[{ Text:"A", Value:"d8368ccc-7974-4353-8462-e414d48164b3" },{ Text:"B",
Value:"4eb5cb10-75ad-46ff-9186-4fb5d1a18c63" },{ Text:"C",
Value:"14467467-587c-4cc1-bc0c-082bd16d11d7" }] });<-- snip -->var listView = $("#listView").kendoListView({ dataSource: workflowSource, template: kendo.template($("#dataSource-template").html()) }).delegate("#Save", "click", function(e) { e.preventDefault(); SaveForm(); // this method sends an ajax post to server and gets update });Looking at FireBug, the html code for the dropdownlist is: (difference between visible and invisible is the first 'style="display: none;"'). I cannot figure how the display is set to none.
<span tabindex="0" style="display: none;" unselectable="on" class="k-widget k-dropdown k-header"><span class="k-dropdown-wrap k-state-default" unselectable="on"><span class="k-input" unselectable="on">C</span><span class="k-select"><span class="k-icon k-arrow-down">select</span></span></span><input value="d8368ccc-7974-4353-8462-e414d48164b3" id="ddlOwner" data-role="dropdownlist" style="display: none;"></span>
10 Answers, 1 is accepted
0
Charles Wiebe
Top achievements
Rank 1
Rank 1
answered on 09 Apr 2012, 06:14 PM
I added this to the
The dropdownlist is visible. (Is there an elegant solution?)
$("#ddlOwner").kendoDropDownList({ code in the change event.The dropdownlist is visible. (Is there an elegant solution?)
$(".k-dropdown").css("display", "block");
0
Hello Charles,
The problem is caused by the fact that the DropDownList is initialized multiple times - in each datasource's change event. This is not needed and the widget has not been designed to work that way. I suggest you to initilize it only once. If required, you can rebind it only.
By design, the DropDownList wrapper element assumes the styles of the input/select element, from which it is created. After the first creating, this element is hidden, hence the whole widget is hidden the second time it is initialized.
Greetings,
Dimo
the Telerik team
The problem is caused by the fact that the DropDownList is initialized multiple times - in each datasource's change event. This is not needed and the widget has not been designed to work that way. I suggest you to initilize it only once. If required, you can rebind it only.
By design, the DropDownList wrapper element assumes the styles of the input/select element, from which it is created. After the first creating, this element is hidden, hence the whole widget is hidden the second time it is initialized.
Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Aleksander
Top achievements
Rank 1
Rank 1
answered on 24 May 2012, 04:24 PM
How do you call a rebind on this? the documentation doesn't have a rebind method.
0
Hello Aleksander,
Use the refresh method, which is linked in my previous reply.
Regards,
Dimo
the Telerik team
Use the refresh method, which is linked in my previous reply.
Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chanaka
Top achievements
Rank 2
Rank 2
answered on 26 Aug 2012, 08:55 AM
Hi,
$("titles").data("kendoDropDownList").refresh();
this does not refresh the kendoDropDownList ???
$("titles").data("kendoDropDownList").refresh();
this does not refresh the kendoDropDownList ???
0
Hello,
The refresh method rerenders the items in the dropdownlist. In order to fetch the items again from the datasource, please use
$("titles").data("kendoDropDownList").dataSource.read();
Sorry about the confusion.
Regards,
Dimo
the Telerik team
The refresh method rerenders the items in the dropdownlist. In order to fetch the items again from the datasource, please use
$("titles").data("kendoDropDownList").dataSource.read();
Sorry about the confusion.
Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chanaka
Top achievements
Rank 2
Rank 2
answered on 27 Aug 2012, 03:10 PM
Hi,
Ya after that i used dataSource.read(); but the DropDownList Shows it Loading but the same Data is Shown No change ??
Any reason Why?
Thanks.
Ya after that i used dataSource.read(); but the DropDownList Shows it Loading but the same Data is Shown No change ??
Any reason Why?
Thanks.
0
Hello Chanaka,
Did you inspect the HTTP request to make sure the returned data is different? If yes, please open a support ticket and provide a demo, which exhibits the issue.
Kind regards,
Dimo
the Telerik team
Did you inspect the HTTP request to make sure the returned data is different? If yes, please open a support ticket and provide a demo, which exhibits the issue.
Kind regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
zhang
Top achievements
Rank 1
Rank 1
answered on 25 Oct 2012, 02:40 PM
$("titles").data("kendoDropDownList").dataSource.read()
$("titles").data("kendoDropDownList").refresh();
it can't work, the returned data has changed, but the dropdownlist data does't change, is it a bug?
$("titles").data("kendoDropDownList").refresh();
it can't work, the returned data has changed, but the dropdownlist data does't change, is it a bug?
0
Faisal
Top achievements
Rank 1
Rank 1
answered on 12 Dec 2012, 07:33 AM
Hi I had a similar problem today. I guess the following could help someone.
I am using a template in a KendoUI listview. The template contains a "select" HTML element.
I click on some button on the page, a new record is added to the listview's associated datasource and as a result (using that template) a new "select" element is also created.
Now the problem occurring with me was that, when in javascript I then initialized the "select" element for KendoUI's dropdownlist (using the new id of the new "select" element), the first dropdown created looks ok and fine but as soon as I repeat the above process the second time, the second dropdownlist is also created but the previous dropdownlist is stripped off from all of its KendoUI css formatting, leaving me just with plain old "select" element.
After searching for many hours on internet and finding nothing, I tried it myself and came with this solution:
Here is what I did. On click of button after adding an entry to listview's dataDource, I add the following statement:
$('select[id^=duration_]').kendoDropDownList({ change: OnDurationChanged });
Note: My "select" elements ids are like "duration_1", "duration_2", "duration_3" and so on...
Hope that helps someone :)
I am using a template in a KendoUI listview. The template contains a "select" HTML element.
I click on some button on the page, a new record is added to the listview's associated datasource and as a result (using that template) a new "select" element is also created.
Now the problem occurring with me was that, when in javascript I then initialized the "select" element for KendoUI's dropdownlist (using the new id of the new "select" element), the first dropdown created looks ok and fine but as soon as I repeat the above process the second time, the second dropdownlist is also created but the previous dropdownlist is stripped off from all of its KendoUI css formatting, leaving me just with plain old "select" element.
After searching for many hours on internet and finding nothing, I tried it myself and came with this solution:
Here is what I did. On click of button after adding an entry to listview's dataDource, I add the following statement:
$('select[id^=duration_]').kendoDropDownList({ change: OnDurationChanged });
Note: My "select" elements ids are like "duration_1", "duration_2", "duration_3" and so on...
Hope that helps someone :)