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.

Disciple

Answer 1

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/

Blackpool

Answer 2

In your template, include ToClientTemplate:

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

Mesopause

Answer 3

I'm going to try to solve your problem despite I'm not going to answer it. I mean, if the problem is that the data takes sometime to get loaded and you don't want to show the DropDownList until you get the data. My recommendation is not creating the DropDownList until you don't get the data and the way of doing it is using fetch on the DataSource.

Example:

// Define the DataSource
var ds = new kendo.data.DataSource({
    ...
});

// Trigger a read and wait for finishing it
ds.fetch(function() {
    $("#myDropDown").kendoDropDownList({
        dataSource: ds,
        ...
    });
});

With this, you don't need the template, your HTML is:

<div id="myDropDown"></div>

You can see it here: http://jsfiddle.net/OnaBai/Ex8Kz/

Allure