KendoUI - 使用底层模型从网格单元中读取编辑后的数据

Question

下面我有一个从服务器获取数据的 kendoUI 网格。然后用户可以编辑网格中的两列。我有一个单独的按钮，它将 post 数据返回到服务器，我不为此使用 kendo 网格的更新传输。我遇到的问题是，如果我从网格中获取数据，它不会反映用户输入。例如，要获取网格的基础数据，我执行以下操作：

products= $("#Grid").data("kendoGrid").dataSource.data()

但是当我遍历产品并检查 NewPrice 或 Comment 属性时，它总是空白的。以下是网格数据源的定义方式：

dataSource: {
  transport: {
    read: function (options) {
      $.ajax({
        url: "/Portal/API/GetProductPrices?id=" + pId,
        dataType: "json",
        success: function (data) {
          localModel.userId = data.userId;
          localModel.products = data.Products;
          return options.success(model.products);
        },
      });
    }
  },
},
scrollable: false,
selectable: true,
schema: {
  model: {
    id: 'Id',
    fields: {
      Item: { type: 'string', editable: false },
      Price: { type: 'number', editable: false },
      NewPrice: { type: 'number', editable: true },
      Comment: { type: 'string', editable: true, validation: { required: true } },
    }
  }
},
columns: [
  { field: "Price", title:"Price"},
  {
    field: "NewPrice", title: "<span class='editMode'>Proposed Value</span>", format: "{0:p}", attributes: { style: "text-align:center;" }, headerAttributes: { style: "text-align:center;" }, width: "50px",
    template: "#=NewValueTemplate(data)#",
  },
  { field: "Comment", title: "<span class='editMode viewWorkflowMode'>Notes</span>", width: "210px", template: "#=NotesTemplate(data)#" },
]

任何解决问题的建议都将不胜感激

Answer 1

您尚未指定您正在使用的编辑类型。
您使用的是哪种类型：内联、批处理或弹出 ?

只有这个数据源吗？我没有看到更新功能。
我建议你看看三个演示。
Batch
Inline
Popup

最糟糕的是你没有指定属性 editable 的值。
默认情况下，它是 false，这意味着 kendoGrid 不可编辑，
即使您在模型字段上指定了 editable: true。

Shortcut to "Editable" configuration

更新 #2 :

已经说过here

If the data source is bound to a remote service (via the transport option) the data method will return the service response.

因此，当您在网格上使用 dataSource.data() 方法时，如果您没有正确更新数据源，您应该会收到所有 "old" 数据。（我发现奇怪的是你在这些属性上得到了空白值，可能是缓存问题）

正如我已经说过的，您的数据源不提供更新功能。

Here你是kendodataSource中更新功能的配置示例，请求远程服务。

建议您查看两个示例：

示例 - 将更新指定为字符串 和 示例 - 将更新指定为函数

Answer 2

请实现以下示例中的逻辑：

var _roleDataSource = new kendo.data.DataSource({
    data: [
        { id: 1, title: "Software Engineer" },
        { id: 2, title: "Quality Assurance Engineer" },
        { id: 3, title: "Team Lead" },
        { id: 4, title: "Manager" }
    ]
});

var _peopleDataSource = new kendo.data.DataSource({
    data: [
        { id: 1, name: "John", roleId: 1, roleTitle: "Software Engineer" },
        { id: 2, name: "Dave", roleId: 2, roleTitle: "Quality Assurance Engineer" },
        { id: 3, name: "Aaron", roleId: 3, roleTitle: "Team Lead" },
                { id: 4, name: "Russell", roleId: 4, roleTitle: "Manager" }
    ]
});

var _grid = $("#grid").kendoGrid({
    dataSource: _peopleDataSource,
    columns: [
        {
            field: "name",
            title: "Name"
        },{
            field: "roleTitle",
            title: "Role",
            editor: function(container, options) {
                $("<input data-bind='value:roleTitle' />")
                    .attr("id", "ddl_roleTitle")
                    .appendTo(container)
                    .kendoDropDownList({
                        dataSource: _roleDataSource,
                        dataTextField: "title",
                        dataValueField: "title",
                        template: "<span data-id='${data.id}'>${data.title}</span>",
                        select: function(e) {
                            var id = e.item.find("span").attr("data-id");
                            var person =_grid.dataItem($(e.sender.element).closest("tr"));
                            person.roleId = id;
                            
                            setTimeout(function() {
                                $("#log")
                                    .prepend($("<div/>")
                                        .text(
                                            JSON.stringify(_grid.dataSource.data().toJSON())
                                         ).append("<br/><br/>")
                                    );
                                });
                        }
                    });
            }
        }
    ],
    editable: true
}).data("kendoGrid");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grid"></div>
<br/>
<div id="log"></div>

您可以在此处查看演示：http://jsfiddle.net/khNsE/175/

Answer 3

在这种情况下，我需要允许一些基于数据规则的行同时进入'edit mode'，所以指定内联、弹出等不是一个选项。我所做的是在定义网格列时使用自定义模板函数。自定义模板函数返回 html，但在 html 中，我使用数据绑定属性绑定到我的模型。最后在网格的 DataBound 事件上，我将我的模型绑定到行。

field: "NewPrice", title: "New", format: "{0:p}", template: "#=newValueTemplate(d)#",

....
....
function newValueTemplate(d){
     if (d.IsEditable)
         return "<input type='number' data-bind='value:NewPrice' />"
     else 
         return "<span />"
}

function gridDataBound(e){
    var items = this.dataSource.view();
    var gridRows = this.tbody.children();
    for (var i = 0; i < items.length; i++)
                kendo.bind(gridRows[i], items[i]);
}

KendoUI - 使用底层模型从网格单元中读取编辑后的数据

KendoUI - Read edited data from grid cells using underlying model

javascript

kendo-ui