Creating a kendo dropdown list inside a kendo template

Question

<script id="myTmpl" type="text/x-kendo-tmpl">
 <div id="myDropDown">
 </div>  

</script>

That's my small example of a code. Is there a way to create a drop down list on the div tag, since that div is not actually a DOM object, and therefore I cannot select with a Jquery selector ?

$('#myDropDown').kendoDropDownList // invalid, item doesn't exist.

I am not looking to make a drop down from HTML, because somewhere in my code I have data fetching for my dropdown, and it takes time to fetch that data. That's why I want to be able to do something like

$('#myDropDown').setDataSource //or however the correct syntax is. 

So 2 questions: How can I instantiate a kendo drop down from the template.

If that's not possible, how to 'have' a dataSourceChanged event for my dropdown list, so I can update the data on my dropdown list.

Answer 1

In your template, include ToClientTemplate:

<script id="templateId" type="text/x-kendo-template">
   <div>
      @(Html.Kendo().DropDownList()
         ...
         .ToClientTemplate()
      )
   </div>
</script>

Answer 2

I ran into the same problem while attempting to create a custom popup editor for a grid. I found that the edit command is triggered after the template is attached to the page, so I was able to initialize the Kendo drop with a function in the edit.

So for example if your template looks like this:

<script id="myTmpl" type="text/x-kendo-tmpl">
     <div id="myDropDown">
     </div>  

</script>

The grid would looks something like this:

$("#grid").kendoGrid({
    ...
    editable: {
        mode: "popup",
        template: kendo.template($("#myTmpl").html())
    },
    edit: function (e) {
        $("#myDropDown").kendoDropDownList({
              ...
        });
    }

});

Here is a working example: http://jsfiddle.net/ak6hsdo8/2/