Tworzenie listy rozwijanej kendo wewnątrz szablonu kendo

Question

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

</script> 

To jest mój mały przykład kodu. Czy istnieje sposób utworzenia rozwijanej listy w znaczniku div, ponieważ ten element div nie jest obiektem DOM, a zatem nie mogę wybrać za pomocą selektora Jquery?

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

Nie szukam zrobić rozwijaną od HTML, ponieważ gdzieś w kodzie mam dane pobieranie dużej mojej listy rozwijanej, a na to potrzeba czasu, aby pobrać te dane. Dlatego chcę, aby być w stanie zrobić coś takiego

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

Więc 2 pytania: Jak mogę instancji kendo rozwijanej od szablonu.

Jeśli nie jest to możliwe, jak "mieć" zdarzenie dataSourceChanged dla mojej rozwijanej listy, dzięki czemu mogę zaktualizować dane na mojej liście rozwijanej.

Answer 1

I pobiegł do ten sam problem podczas próby utworzenia niestandardowego edytora podręcznego dla siatki. Zauważyłem, że polecenie edycji jest wyzwalane po dołączeniu szablonu do strony, więc udało mi się zainicjować spadek Kendo z funkcją w edycji.

Tak na przykład, jeśli szablon wygląda tak:

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

</script> 

Siatka będzie wyglądać tak:

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

}); 

Oto przykład roboczych: http://jsfiddle.net/ak6hsdo8/2/

Answer 2

W szablonie, to ToClientTemplate:

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

Answer 3

Zamierzam spróbować rozwiązać problem, mimo że nie zamierzam go odebrać. Mam na myśli, jeśli problem polega na tym, że dane czasami ładują się i nie chcesz pokazywać DropDownList, dopóki nie otrzymasz danych. Moja rekomendacja nie tworzy DropDownList, dopóki nie otrzymasz danych, a sposób wykonania tego wymaga użycia fetch na DataSource.

Przykład:

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

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

Dzięki temu nie trzeba szablon, Twój HTML jest:

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

Można go zobaczyć tutaj: http://jsfiddle.net/OnaBai/Ex8Kz/