Kendo Web Grid 编辑命令和本地数据答案

【问题标题】：Kendo Web Grid Edit Command and Local DataKendo Web Grid 编辑命令和本地数据
【发布时间】：2013-04-03 16:37:55
【问题描述】：

以下代码是 Kendo 文档中内置命令示例的扩展版本

<!DOCTYPE html5>
<html>
<head>
    <title>Untitled Page</title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.web.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#grid").kendoGrid({
                columns: [
                    { field: "name" },
                    { command: ["edit", "destroy"]} // displays the built-in "edit" and "destroy" commands
                ],
                editable: "inline",
                dataSource: new kendo.data.DataSource ({
                    data: [{ name: "Jane Doe" }, { name: "Joe Soap" }, { name: "Fred Blogs"}]
                })
            });
        });
     </script>
</head>
<body>
    <div id="grid"></div>

</body>
</html>

单击任何“编辑”按钮都可以正常工作。如果您现在单击另一个“编辑”按钮而不取消第一个按钮，则原始编辑行将被取消，但现在所有编辑按钮都无法在编辑模式下打开一行。当网格使用远程数据源时，不会显示此行为。

剑道知道这个问题吗？

有人知道解决方法吗？

【问题讨论】：

标签： web grid kendo-ui

【解决方案1】：

当模型中没有定义 id 时，这是一个常见的问题（这实际上不是 Kendo UI 的问题，可能是没有明确记录的行为）。

改用grid 定义：

$("#grid").kendoGrid({
    columns   : [
        { field: "name" },
        { command: ["edit", "destroy"]} // displays the built-in "edit" and "destroy" commands
    ],
    editable  : "inline",
    dataSource: new kendo.data.DataSource({
        data  : [
            { id: 1, name: "Jane Doe" },
            { id: 1, name: "Joe Soap" },
            { id: 2, name: "Fred Blogs"}
        ],
        schema: {
            model: {
                id: "id"
            }
        }
    })
});

我在每一行中添加了和id 字段，然后我定义schema.model.id 是id。看到它在运行here

【讨论】：

由于您是新来的，请不要忘记标记已接受的答案，这有助于解决问题。另见How does accepting an answer work?