Creazione di un elenco a discesa di kendo all'interno di un modello di kendo

Question

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

</script> 

Questo è il mio piccolo esempio di codice. C'è un modo per creare un elenco a discesa sul tag div, dal momento che quel div non è in realtà un oggetto DOM, e quindi non posso selezionare con un selettore di Jquery?

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

non sto cercando di fare una discesa da HTML, perché da qualche parte nel mio codice ho dati che vanno a prendere per la mia discesa, e ci vuole tempo per recuperare i dati. Ecco perché voglio essere in grado di fare qualcosa di simile

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

Quindi 2 domande: Come posso creare un'istanza di un kendo discesa dal modello.

Se ciò non è possibile, come "avere" un evento dataSourceChanged per il mio elenco a discesa, così posso aggiornare i dati nel mio elenco a discesa.

Answer 1

mi sono imbattuto nel stesso problema durante il tentativo di creare un editor popup personalizzato per una griglia. Ho scoperto che il comando di modifica viene attivato dopo che il modello è stato allegato alla pagina, quindi sono stato in grado di inizializzare la caduta di Kendo con una funzione nella modifica.

Così, per esempio, se il modello è simile al seguente:

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

</script> 

La griglia avrebbe sembra qualcosa di simile:

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

}); 

Ecco un esempio di lavoro: http://jsfiddle.net/ak6hsdo8/2/

Answer 2

Nel modello, includono ToClientTemplate:

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

Answer 3

ho intenzione di cercare di risolvere il problema, nonostante io non ho intenzione di rispondere. Voglio dire, se il problema è che i dati impiegano tempo per essere caricati e non vuoi mostrare DropDownList finché non ottieni i dati. La mia raccomandazione non è creare DropDownList fino a quando non si ottengono i dati e il modo di farlo è utilizzando fetch su DataSource.

Esempio:

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

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

Con questo, non è necessario il modello, il codice HTML è:

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

si può vedere qui: http://jsfiddle.net/OnaBai/Ex8Kz/