Kendo UI 网格（内联编辑）更新和取消不起作用答案

【问题标题】：Kendo UI grid (inline edit) update and cancel not workingKendo UI 网格（内联编辑）更新和取消不起作用
【发布时间】：2014-02-27 03:06:52
【问题描述】：

我通过 javascript 使用数据创建网格。当我第一次在任何行上单击编辑按钮并单击更新按钮时。第一行中的值为空，然后我编辑无法更新或取消的其他行，两个按钮都不起作用。当我刷新然后单击编辑然后单击取消该行已删除我不知道为什么？发生了什么？怎么修？

数据

var detail = new Array();

for (var i = 1; i < 6; i++) {
     detail.push({
        Score: i,
        Condition: 0,
        ValueStart: 0,
        ValueEnd: 0,
      });
}

网格

for (var i = 0; i < 3; i++) {
$("#GridScoreRangeContent").append("<div id='scoreRangeGrid_"+i+"'></div>");



$("#scoreRangeGrid_"+i).kendoGrid({
     dataSource: {
         data: detail,
         batch: true,
         schema: {
            model: {
              fields: {
                 Score: { editable: false },
                 Condition: { defaultValue: { Value: 1, Text: "Less than" }, validation: { required: true } },
                 ValueStart: { type: "number", validation: { required: true, min: 1 } },
                 ValueEnd: { type: "number", validation: { required: true, min: 1 } },
               }
            }
         }
      },
columns: [{ field: "Score", title: "Score" }},
         { field: "Condition", title: "Condition", editor: ScoreRangeDropDownList, template: "#=Condition#" },
         { field: "ValueStart", title: "Start" },
         { field: "ValueEnd", title: "End" },
         { command: ["edit", "destroy"], title: "&nbsp;", width: "180px" }
        ],
        editable: "inline"
 });
}

加载下拉列表

function ScoreRangeDropDownList(container, options) {
    $.ajax({
        url: GetUrl("Admin/Appr/LoadDropdownlist"),
        type: 'post',
        dataType: 'json',
        contentType: 'application/json',
        traditional: true,
        cache: false,
        success: function (data) {
            $('<input required data-text-field="Text" data-value-field="Value" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataSource: data,
                    dataTextField: "Text",
                    dataValueField: "Value",
                });
        }
    });
}

【问题讨论】：

解决这个问题。

标签： kendo-ui kendo-grid

【解决方案1】：

剑道在保存/更新时似乎依赖模型 ID。所以在你的dataSource中，你必须指定一个id：

model: {
    id: "Id",
    fields: {
        Id: { type: "number" },
        Score: { editable: false },
        Condition: { defaultValue: { Value: 1, Text: "Less than" }, validation: { required: true } },
        ValueStart: { type: "number", validation: { required: true, min: 1 } },
        ValueEnd: { type: "number", validation: { required: true, min: 1 } },
  }
}

【讨论】：

【解决方案2】：

dmathisen 的建议绝对重要，但另外重要的是，您创建的具有与列名称相等的 name 属性。您可以再次使用 options.field 的值，就像剑道演示页面示例中的代码一样：

// create an input element
var input = $("<input/>");
// set its 'name' to the field to which the column is bound
input.attr("name", options.field);
// append it to the container
input.appendTo(container);
// initialize a Kendo UI Widget
input.kendoDropDownList({
.
.

【讨论】：