与此question相关，我希望在ListView中实现相同的行为而不是kendo Grid。我的尝试是here。编辑模板根据编辑开始时模型中的值切换到不同的控件。但问题是我找不到根据第一个字段中的用户选择切换第二个字段的方法。
此外，如果我将第一个字段更改为“自动完成”列表，我仍然可以使用相同的模式吗？
我感谢任何帮助来解决这个问题。
代码：
<div class="row">
<div class="col-xs-6 col-md-4">
<!-- Inputs -->
<div class="demo-section">
<a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>
</div>
<div id="listView"></div>
<script type="text/x-kendo-tmpl" id="template">
<div class="product-view k-widget">
<div class="edit-buttons">
<a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"> </span></a>
</div>
<dl>
<dt>Type</dt>
<dd> #: typeTitle# </dd>
<dt>Value</dt>
<dd>
# if (typeTitle === "DateTime") { #
#: kendo.toString(name, "MM/dd/yyyy hh:mm")#
#} else { #
#:name #
# } #
</dd>
</dl>
</div>
</script>
<script type="text/x-kendo-tmpl" id="editTemplate">
<div class="product-view k-widget">
<div class="edit-buttons">
<a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
<a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
</div>
<dl>
<dt>Key</dt>
<dd>
<select data-role="dropdownlist"
data-text-field="title"
data-value-field="id"
data-source="_typeDataSource"
data-bind="value: typeTitle"
name="InputType"
data-change="dropdownlist_change"
required="required"
validationmessage="required"></select>
<span data-for="InputType" class="k-invalid-msg"></span>
</dd>
<dt>Value</dt>
<dd>
<div id="divInputType">
# if (typeTitle === "DateTime") { #
<input data-role="datetimepicker" type="text" data-bind="value: name" data-format="MM/dd/yyyy hh:mm" name="InputValue" required="required" validationmessage="required" />
#} else { #
<input type="text" data-bind="value: name" name="InputValue" required="required" validationmessage="required" />
# } #
<span data-for="name" class="k-invalid-msg"></span>
</div>
</dd>
</dl>
</div>
</script>
</div>
<div class="col-sm-6 col-md-8">
<!-- Data -->
Diagnostics Data will be shown here.
</div>
</div>
<script>
_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);
// $("<input data-bind='value: Value '/>").appendTo(secondColumn).kendoDateTimePicker();
// kendo.bind(secondColumn, model);
//}
}
</script>
答案 0 :(得分：0)
在您的下拉列表更改处理程序中，您可以执行此操作以查找当前编辑的列表元素：
var kEditItem = $(e.sender.element).closest(".k-edit-item");
所以如果你有这样的模板：
<script type="text/x-kendo-tmpl" id="dynamicTemplate">
# if (value === "DateTime") { #
<input data-role="datetimepicker" type="text" data-bind="value: name" data-format="MM/dd/yyyy hh:mm" name="InputValue" required="required" validationmessage="required" />
#} else { #
<input type="text" data-bind="value: name" name="InputValue" required="required" validationmessage="required" />
# } #
<span data-for="name" class="k-invalid-msg"></span>
</script>
然后你可以在改变处理程序中创建你的编辑器，如下所示：
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);
}
演示here：当您点击“添加记录”并在下拉列表中选择“日期时间”时，您可以看到它添加了日期选择器。
请注意，还有其他一些不适合小提琴的东西，我没有修复它们。