DropDownList performace problems for creating DIV elements permanently

[leboart]

I have a web page with 2 templates. Initialy , I render the first template by this way:

1.var page1 = kendo.template($("#page1").html());
2./*...*/
3.$("#page-content").html(page1(viewModel));
4.kendo.bind($("#container"), viewModel);

The second template has a DropDownList. When the user click a button , I replace the html content with the second template, in a way  similar like the code above. The second template goes like this:

01.<script id="marked-components-detail-template" type="text/x-kendo-template">
02.       <span>
03.       <h3> #: text #</h3>
04.        <h4 > #: description  #</h3>
05.       <select data-role="combobox"
06.             data-text-field="text"
07.             data-value-field="text"
08.             data-bind="source: markedComponents, value: comboBoxValue">
09.         </select>
10.         </span>
11.
12.     </script>

I have another button that allows me to go from template 1 to template 2 and the other way. The problem is that the first time I render the tempalte 2 , also appears a div elements  , (one per dropdownlist, It seems ,It's related with the options box), each time I render template 2, or change  its model , It inserts more div elements until the application freezes. How Can I stop this?. 

[Georgi Krustev]

Hello leboart,

Before replacing a template in the page content, you will need to destroy all kendo widgets in it. Thus widgets are prepared for safe removal. Check the kendo.destroy method, which will help you to destroy all widgets in a container:

kendo.destroy($("#container").children());

Kind regards,
Georgi Krustev
the Telerik team