KendoUI-ListView-如何在运行时在编辑模板中显示动态控件 [英] KendoUI - ListView - How to show dynamic controls at runtime in edit template
问题描述
与此>问题，我想在ListView而不是kendo Grid中实现相同的行为.我的尝试是此处.编辑模板根据编辑开始时模型中的值切换到不同的控件.但是问题在于，我无法根据第一个字段中的用户选择来切换第二个字段.
Related to this question, I want to achieve the same behavior inside ListView instead of a kendo Grid. My attempt is here. The edit template switches to different controls based on the value in the model at the beginning of the edit. But the problem is that I can't find a way to switch the 2nd field based on the user selection in the first field.
如果我将第一个字段更改为自动完成"列表，我仍然可以遵循相同的模式吗?
Also if I change the first field to an 'AutoComplete' list, can I still follow the same pattern?
感谢您为解决此问题提供的帮助.
I appreciate any help to solve this.
代码:
<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>
推荐答案
在下拉菜单的更改处理程序中，您可以执行以下操作以找到当前编辑的列表元素:
In your dropdown's change handler, you can do this to find the currently edited list element:
var kEditItem = $(e.sender.element).closest(".k-edit-item");
因此，如果您有这样的模板:
So if you have a template like this:
<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>
然后您可以像这样在变更处理程序中创建编辑器:
then you might create your editor in the change handler like this:
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);
}
演示此处:当您单击添加记录"并在下拉菜单中选择日期时间" ，您会看到它添加了日期选择器.
Demo here: when you click on "Add record" and select "DateTime" in the dropdown, you can see that it adds the datepicker.
请注意，还有其他一些东西无法与小提琴配合使用，而我还没有解决这些问题.
Note that there are other things that aren't working with the fiddle and I haven't fixed those.
这篇关于KendoUI-ListView-如何在运行时在编辑模板中显示动态控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
