Question

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

</script>

这是我的一个代码示例。有没有办法在div标签上创建一个下拉列表，因为该div实际上不是一个DOM对象，因此我不能用Jquery选择器进行选择？

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

我不打算从HTML下载，因为我的代码中的某个地方有我的下拉列表获取数据，并且获取该数据需要时间。这就是为什么我希望能够做类似

的事情

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

所以有两个问题：我如何从模板中实例化一个剑道下拉。

如果那是不可能的，如何为我的下拉列表“拥有”dataSourceChanged事件，这样我就可以在我的下拉列表中更新数据。

Answer 1

在模板中，包含ToClientTemplate：

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

Answer 2

我在尝试为网格创建自定义弹出编辑器时遇到了同样的问题。我发现在将模板附加到页面后触发了edit命令，因此我可以在编辑中使用函数初始化Kendo drop。

例如，如果您的模板如下所示：

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

</script>

网格看起来像这样：

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

});

以下是一个工作示例：http://jsfiddle.net/ak6hsdo8/2/

Answer 3

尽管我不打算回答问题，但我会尽力解决你的问题。我的意思是，如果问题是数据需要一些时间才能加载，并且在获得数据之前你不想显示DropDownList。我建议您不要创建DropDownList，直到您无法获取数据，并且这样做的方法是使用fetch上的DataSource。

示例：

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

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

有了这个，你不需要模板，你的HTML是：

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

您可以在此处查看：http://jsfiddle.net/OnaBai/Ex8Kz/

在kendo模板中创建一个kendo下拉列表

3 个答案: