如何编辑 Kendo Grid 数据源对象？答案

【问题标题】：How do I edit a Kendo Grid DataSource Object?如何编辑 Kendo Grid 数据源对象？
【发布时间】：2015-07-09 18:53:01
【问题描述】：

我的视图中有以下内容：

 columns.Bound(o => o.line.ApprovalBy.UserDisplayName)
 columns.Bound(o => o.line.ItemNumber)

使用 JQuery，我可以使用以下内容编辑项目编号行：

('#grid').data('kendoGrid').dataSource.at(0).line.ItemNumber = 155

但是，当我尝试编辑默认设置为 null 的 Approval By 时：

('#grid').data('kendoGrid').dataSource.at(0).line.ApprovalBy = {UserID: 50}

由于某种原因，它在网格中返回一个“未定义”。当我尝试编辑之前已初始化的对象时，它将能够工作：

columns.Bound(o => o.line.Vehicle.Color);

('#grid').data('kendoGrid').dataSource.at(0).line.Vehicle.Color = "red";

我错过了什么？

【问题讨论】：

标签： jquery razor model-view-controller kendo-ui

【解决方案1】：

也许这个例子会对你有所帮助

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<script>
 $("#grid").kendoGrid({
	selectable: "multiple cell",
	allowCopy: true,
	columns: [{
		field: "productName"
	}, {
		field: "category"
	}, {
		field: "a.id"
	}, {
		field: "a.name"
	}],
	dataSource: [{
		productName: "Tea",
		category: "Beverages",
		a: {
			id: 1,
			name: "1"
		}
	}, {
		productName: "Coffee",
		category: "Beverages",
		a: {
			id: 2,
			name: "2"
		}
	}, {
		productName: "Ham",
		category: "Food",
		a: {
			id: 3,
			name: "3"
		}
	}, {
		productName: "Bread",
		category: "Food",
		a: {}
	}]
});

$(document).ready(function() {
	var grid = $("#grid").data("kendoGrid");
	var dataSource = grid.dataSource;
	dataSource.at(0).productName = "Tet";
	dataSource.at(3).a = {
		id: 4,
		name: "4"
  };
	grid.setDataSource(dataSource);
});
  
</script>
</body>
</html>

【讨论】：