与这个问题有关,我想在ListView中实现相同的行为,而不是剑道网格。 我的尝试在这里。 编辑模板在编辑开始时根据模型中的值切换到不同的控件。 但问题是我找不到根据第一个字段中的用户选择切换第二个字段的方法。
此外,如果我将第一个字段更改为"自动完成"列表,我还能遵循相同的模式吗?
我感谢任何解决这个问题的帮助。
法典:
<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>
在下拉列表的更改处理程序中,您可以执行此操作以查找当前编辑的列表元素:
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);
}
在这里演示:当您单击"添加记录"并在下拉列表中选择"日期时间"时,您可以看到它添加了日期选择器。
请注意,还有其他一些东西不适用于小提琴,我还没有修复这些。