在剑道模板中创建剑道下拉列表

Posted 2023-05-07

【中文标题】在剑道模板中创建剑道下拉列表

【英文标题】：Creating a kendo dropdown list inside a kendo template

【发布时间】：2014-08-07 13:57:05

【问题描述】：

<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. 

那么 2 个问题：如何从模板中实例化一个剑道下拉菜单。

如果这不可能，如何为我的下拉列表“拥有”一个 dataSourceChanged 事件，以便我可以更新下拉列表中的数据。

【参考方案1】：

在您的模板中，包含 ToClientTemplate：

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

【参考方案2】：

我在尝试为网格创建自定义弹出编辑器时遇到了同样的问题。我发现在将模板附加到页面后会触发编辑命令，因此我能够使用编辑中的函数来初始化剑道放置。

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

<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/

【参考方案3】：

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

例子：

// 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/