如何编辑 Kendo 网格数据源对象？

Question

我的视图中有以下内容：

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

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

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

但是，当我尝试编辑 Approval By 时，它默认设置为 null，具有以下内容：

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

它 returns 由于某种原因在网格中 "undefined"。当我尝试编辑之前已初始化的对象时，它可以工作：

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

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

我错过了什么？

Answer 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>

如何编辑 Kendo 网格数据源对象？

How do I edit a Kendo Grid DataSource Object?

model-view-controller

jquery

razor

kendo-ui