[英]Selected kendo Dropdownlist value getting reset to previous selected value while performing batch operation in kendo ui grid
[英]Kendo Grid with Kendo Dropdownlist Selected value not updated
在我的Kendo网格中,每列都有kendodropdownlist。 所选项目应解析并显示模板文本
我一直在这里跟随示例http://jsfiddle.net/jddevight/Ms3nn/
UPDATE
我在这里http://jsfiddle.net/BlowMan/mf434/简化了我的问题
问题
当我在下拉列表中选择一个项目时,它不会返回所选项目的值。 而是返回null。
/// <reference path="../../jquery-1.8.2.js" />
/// <reference path="../../kendo.web.min.js" />
$(function () {
var menuModel = kendo.data.Model.define({
fields: {
"MenuId": { type: "number",editable:false },
"DisplayText":{type:"string"},
"MenuOrder": { type: "number" },
"MenuStatus": { type: "boolean" },
"HasKids": { type: "boolean" },
"ParentMenu": { type: "number" }
}
});
var menuDataSource = new kendo.data.DataSource({
data:[{"MenuId":1,
"DisplayText":"Home",
"MenuOrder":0,
"MenuStatus":true,
"HasKids":false,
"ParentMenu":null},
{"MenuId":2,
"DisplayText":"Finance",
"MenuOrder":1,
"MenuStatus":true,
"HasKids":false,
"ParentMenu":null}]
schema: {
model: menuModel
}
});
var vm = kendo.observable({
menus: menuDataSource,
parentItem: [{ Id: 2,
Name: "Finance" },
{ Id: 3,
Name: "Corp Services" }],
getMenuName: function (pMenu) {
var menuName = "";
$.each(this.parentItem, function (idx, menu) {
if (menu.Id == pMenu) {
menuName = menu.Name;
return false;
}
});
return menuName;
}
});
kendo.bind($("#menuItems"), vm);
var parentMenuEditor = function (container, options) {
$("<input name='" + options.field + "'/>")
.appendTo(container)
.kendoDropDownList({
dataSource: {
data:[{ Id: 2, Name: "Finance" }, { Id: 3, Name: "Corp Services" }],
},
dataTextField: "Name",
dataValueField: "Id"
});
};
var grid = $("div[data-role='grid']").data("kendoGrid");
$.each(grid.columns, function (idx, column) {
if (column.field == "ParentMenu") {
column.editor = parentMenuEditor;
return false;
}
});
});
下面的视图部分
@{
ViewBag.Title = "Menu System Index";
}
<h2>Menu System Index</h2>
<div id="menuItems">
<div class="k-toolbar k-grid-toolbar">
<a class="k-button k-button-icontext k-grid-add" href="#">
<span class="k-icon k-add"></span>
Add Person
</a>
</div>
<div data-role="grid"
data-bind="source: menus"
data-editable="true"
data-filterable="true"
data-columns='[{"field": "MenuId", "title": "MenuId"},
{"field": "DisplayText", "title": "DisplayText"},
{"field": "MenuOrder", "title": "MenuOrder"},
{"field": "MenuStatus", "title": "MenuStatus"},
{"field":"HasKids","title":"HasKids"},
{"field":"ParentMenu","title":"ParentMenu","template":"#= parent().parent().getMenuName(ParentMenu) #"},
{"command": "destroy", "title": " ", "width": "110px"}]'>
</div>
</div>
<script type="text/x-kendo-template" id="toolbar-template">
<a class="k-button k-button-icontext k-grid-add" href="\#"><span class="k-icon k-add"></span>Add new record</a>
</script>
@section scripts{
<script src="~/Scripts/Custom/MenuSystem/Index.js"></script>
}
任何帮助将不胜感激。 这个问题使我不知所措。
我已经更新了您的JsFiddle演示。 请检查并让我知道是否有任何问题。
var roleEditor = function(container, options) {
$("<input name='" + options.field + "' data-text-field='name' data-value-field='id' data-bind='value:" + options.field + "'/>")
.appendTo(container)
.kendoDropDownList({
dataSource: {
data: vm.roles
},
dataTextField: "name",
dataValueField: "id"
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.