KendoUI – ListView – 如何在编辑模板中在运行时显示动态控件

与此问题相关，我想在ListView中实现相同的行为而不是kendo Grid。 我的尝试就在这里 。 编辑模板根据编辑开始时模型中的值切换到不同的控件。 但问题是我找不到根据第一个字段中的用户选择切换第二个字段的方法。

此外，如果我将第一个字段更改为“自动完成”列表，我仍然可以遵循相同的模式吗？

我很感激任何帮助来解决这个问题。

码：

 
  
 Add new record 
 
  
 
    
 
 
Type
 
 #: typeTitle# 
 
Value
 
 # if (typeTitle === "DateTime") { # #: kendo.toString(name, "MM/dd/yyyy hh:mm")# #} else { # #:name # # } # 
 
 
   
 
   
 
 
Key
 
   
 
Value
 
 
 # if (typeTitle === "DateTime") { #  #} else { #  # } #  
 
 
 
  
 
  Diagnostics Data will be shown here. 
 
  _typeDataSource = new kendo.data.DataSource({ data: [{ id: 1, title: "String" }, { id: 2, title: "Number" }, { id: 3, title: "DateTime" }] }); _peopleDataSource = new kendo.data.DataSource({ data: [{ id: 1, name: "John", typeId: 1, typeTitle: "String" }, { id: 2, name: "12345", typeId: 2, typeTitle: "Number" }, { id: 3, name: "12/20/2013", typeId: 3, typeTitle: "DateTime" }], schema: { model: { id: "id", fields: { id: { editable: false, nullable: true }, name: { validation: { required: true } }, typeTitle: "typeTitle" } } } }); listView = $("#listView").kendoListView({ dataSource: _peopleDataSource, template: kendo.template($("#template").html()), editTemplate: kendo.template($("#editTemplate").html()) }).delegate(".k-edit-button", "click", function (e) { listView.edit($(this).closest(".product-view")); e.preventDefault(); }).delegate(".k-delete-button", "click", function (e) { listView.remove($(this).closest(".product-view")); e.preventDefault(); }).delegate(".k-update-button", "click", function (e) { listView.save(); e.preventDefault(); }).delegate(".k-cancel-button", "click", function (e) { listView.cancel(); e.preventDefault(); }).data("kendoListView"); $(".k-add-button").click(function (e) { listView.add(); e.preventDefault(); }); function dropdownlist_change(e) { var value = this.value(); // Use the value of the widget console.log(value); //if (value == 2) { // console.log('here'); // var secondColumn = $('#divInputType'); // secondColumn.empty(); // //var model = grid._modelForContainer(secondColumn); // $("").appendTo(secondColumn).kendoDateTimePicker(); // kendo.bind(secondColumn, model); //} }  

Answer 1

在您的下拉列表的更改处理程序中，您可以执行此操作以查找当前编辑的列表元素：

 var kEditItem = $(e.sender.element).closest(".k-edit-item"); 

所以如果你有这样的模板：

那么您可以在更改处理程序中创建您的编辑器，如下所示：

 window.dropdownlist_change = function (e) { var kEditItem = $(e.sender.element).closest(".k-edit-item"); var divInput = $(kEditItem).find(".divInputType"); // TODO remove existing widgets with .destroy() var template = kendo.template($("#dynamicTemplate").html()); divInput.html(template(e.sender.dataItem())); kendo.init(divInput); } 

在这里进行演示：当您点击“添加记录”并在下拉列表中选择“日期时间”时，您可以看到它添加了日期选择器。

请注意，还有其他一些不适合小提琴的东西，我没有修复它们。