Kendo Grid 使用内联编辑和自定义编辑器下拉控件 [英] Kendo Grid using inline editing and custom editor dropdown control
问题描述
我正在尝试为网格上的列实现自定义编辑器.编辑器使用 DropdownList 控件.
我可以在添加/编辑时显示下拉菜单，但是在进行选择并发布后，发送的 json 包含默认值，而不是选择的值.
我的实现如下，它是 Razor 页面的摘录.
你能帮我弄清楚我在这里做错了什么吗?
<脚本>$(document).ready(function () {var dsGroupForm = new kendo.data.DataSource({运输: {读: {url: '@Url.Action("GroupForm_Read", "设置")',数据类型:json"},更新: {url: '@Url.Action("GroupForm_Update", "设置")',数据类型:json"},破坏: {url: '@Url.Action("GroupForm_Destroy", "设置")',数据类型:json"},创建: {url: '@Url.Action("GroupForm_Create", "设置")',数据类型:json"}},批次:假，页面大小:5，架构:{数据:数据"，总计:总计"，错误:错误"，模型: {id: "GroupFormId",字段:{GroupFormId: { editable: false, nullable: false },AdGroupId: { required: false },AdGroupDisplayName: { 验证: { required: true } },FormKey: { 验证: { 要求: true } },序数:{ 验证:{ 要求:真} }，表单类型:{ 验证:{ 要求:假}}，FormTypeDisplay: { defaultValue: { FormTypeName: "Form1", FormTypeId: "1" } },FormProjectionId: { 验证: { required: false } }}}}});$("#divGrid").kendoGrid({自动绑定:真，数据源:dsGroupForm，可分页:真实，高度:430，工具栏:[{名称:创建"，文本:添加"}]，列: [{field: "AdGroupDisplayName", title: "Group" },{ field: "FormKey", title: "Key" },{ field: "Ordinal", title: "Ordinal", format: "{0:d}", width: "100px" },{ field: "FormTypeDisplay", title: "Type", width: "150px", editor: formTypeDropDownEditor, template: "#=FormTypeDisplay.FormTypeName#" },{字段:FormProjectionId"，标题:ProjectionId"}，{ command: [{ name: "edit", text: "Edit" }, { name: "destroy", text: "Remove" }], title: " ", width: "172px" }],可内联"});});var formTypeData = new kendo.data.DataSource({数据: [{ FormTypeName: "Form1", FormTypeId: "1" },{ FormTypeName: "Form2", FormTypeId: "2" },{ FormTypeName: "Form3", FormTypeId: "3" }]});函数 formTypeDropDownEditor(容器，选项){$('<input name="FormTypeDisplay" required data-text-field="FormTypeName" data-value-field="FormTypeId" data-bind="value:' + options.field + '"/>').appendTo(容器).kendoDropDownList({自动绑定:真，dataTextField: "FormTypeName",dataValueField: "FormTypeId",数据源:formTypeData});}
我能够使用 MVC 包装器并通过以下帖子使其工作:
http://www.sitereq.com/post/kendo-mvc-dropdown-lists-inside-inline-kendo-mvc-grids
关键是由于已知的 Kendo 网格错误而添加了保存事件 - 在我看来，Kendo 文档应该提到这个问题.
我尝试使用 javascript 实现来实现相同的逻辑，但无法使其正常工作.
I am trying to implement a custom editor for a column on a grid. The editor uses a DropdownList control.
I am able to get the Dropdown to show upon add/edit, however after making a selection and posting the json that is sent contains the default value, not the value that was selected.
My implementation is below it is an excerpt from a Razor page.
Can you help me figure out what I've done wrong here?
<div id="divGrid"></div>
<script>
$(document).ready(function () {
var dsGroupForm = new kendo.data.DataSource({
transport: {
read: {
url: '@Url.Action("GroupForm_Read", "Settings")',
dataType: "json"
},
update: {
url: '@Url.Action("GroupForm_Update", "Settings")',
dataType: "json"
},
destroy: {
url: '@Url.Action("GroupForm_Destroy", "Settings")',
dataType: "json"
},
create: {
url: '@Url.Action("GroupForm_Create", "Settings")',
dataType: "json"
}
},
batch: false,
pageSize: 5,
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "GroupFormId",
fields: {
GroupFormId: { editable: false, nullable: false },
AdGroupId: { required: false },
AdGroupDisplayName: { validation: { required: true } },
FormKey: { validation: { required: true } },
Ordinal: { validation: { required: true } },
FormType: { validation: { required: false } },
FormTypeDisplay: { defaultValue: { FormTypeName: "Form1", FormTypeId: "1" } },
FormProjectionId: { validation: { required: false } }
}
}
}
});
$("#divGrid").kendoGrid({
autobind: true,
dataSource: dsGroupForm,
pageable: true,
height: 430,
toolbar: [{ name: "create", text: "Add"}],
columns: [
{field: "AdGroupDisplayName", title: "Group" },
{ field: "FormKey", title: "Key" },
{ field: "Ordinal", title: "Ordinal", format: "{0:d}", width: "100px" },
{ field: "FormTypeDisplay", title: "Type", width: "150px", editor: formTypeDropDownEditor, template: "#=FormTypeDisplay.FormTypeName#" },
{ field: "FormProjectionId", title: "ProjectionId" },
{ command: [{ name: "edit", text: "Edit" }, { name: "destroy", text: "Remove" }], title: " ", width: "172px" }
],
editable: "inline"
});
});
var formTypeData = new kendo.data.DataSource({
data: [
{ FormTypeName: "Form1", FormTypeId: "1" },
{ FormTypeName: "Form2", FormTypeId: "2" },
{ FormTypeName: "Form3", FormTypeId: "3" }
]
});
function formTypeDropDownEditor(container, options) {
$('<input name="FormTypeDisplay" required data-text-field="FormTypeName" data-value-field="FormTypeId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataTextField: "FormTypeName",
dataValueField: "FormTypeId",
dataSource: formTypeData
});
}
</script>
I was able to get it working using a MVC wrapper and by following this post:
http://www.sitereq.com/post/kendo-mvc-dropdown-lists-inside-inline-kendo-mvc-grids
The key was adding the save event due to a known Kendo grid bug - seems to me the Kendo docs should have some mention of this issue.
I tried implementing the same logic using the javascript implementation but could not get it working.
这篇关于Kendo Grid 使用内联编辑和自定义编辑器下拉控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
