获取 Kendo Grid 的 Edit 按钮单击的行信息答案

【问题标题】：Get row information of Edit button click of Kendo Grid获取 Kendo Grid 的 Edit 按钮单击的行信息
【发布时间】：2017-04-24 11:44:13
【问题描述】：

要获取当前选定行的行信息，我们可以这样做

 var current = e.sender.dataItem(e.sender.select());

但是当我点击编辑按钮时如何得到相同的结果？

我试过$("#grid").data("kendoGrid").dataItem($(e.sender).closest("tr")); 没用。

编辑

我尝试了以下答案中建议的方法，但它仍然给我null。在屏幕截图中，注释代码也不起作用

完整代码

<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!--<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>-->
    <!--<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>-->
    <script src="Scripts/KendoUI.js" type="text/javascript">
</head>
<body>
    <div id="grid">
    </div>
    <script>
        $("#grid").kendoGrid({
            columns: [
    { field: "id" },
    { field: "name" },
    { field: "age" },
    { command: "edit" },
    { command: "list" }
  ],
            dataSource: {
                data: [
      { id: 1, name: "Jane Doe", age: 30 },
      { id: 2, name: "John Doe", age: 33 }
    ],
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            "id": { type: "number" }
                        }
                    }
                }
            },
            editable: "popup",
            toolbar: ["create"],
            dataBound: function (e) {

                //<input name="age" class="k-input k-textbox" type="text" data-bind="value:age">
            },
            edit: function (e) {
                //This currentItem is null :( 
                var currentItem = $("#grid").data("kendoGrid").dataItem($(e.sender).closest("tr"));


                if (!e.model.isNew()) {
                    $('.k-window-title').text("Newton Sheikh");
                }
            }
        });
    </script>
</body>
</html>

【问题讨论】：

stackoverflow.com/questions/31618607/…
e.target 呢？

标签： kendo-ui kendo-grid

【解决方案1】：

如果您在网格中使用edit 函数，您可以使用以下方法访问处于编辑模式的数据项属性：

var grid = $("#yourGrid").kendoGrid({
    dataSource: yourGridDatasource,        
    ...                
    edit: function (e) {
        var attribute = e.sender.dataItem(e.container).attributeName;
        // or simply
        var attribute2 = e.model.attributeName;
    }
});

【讨论】：

您能否在问题中也包含您的网格定义？
我的例子可以正常工作（使用@Orilux 的编辑建议的e.model）？！

【解决方案2】：

您应该使用e.container 而不是e.sender，如下所示：

$("#grid").data("kendoGrid").dataItem($(e.container).closest("tr"))

更新以使其与弹出窗口一起使用

如果您使用的是弹出窗口编辑器，则容器将是弹出窗口本身，上述内容将不起作用。

在这种情况下，您可以使用行的 uid 在表中定位它：

var row = $("#grid").data("kendoGrid").tbody.find("tr[data-uid='" + e.model.uid + "']");

如果您不需要对实际行的引用，而只需要数据项，那么您可以简单地使用e.model。我已经用你的代码创建了一个道场，如果你在点击“编辑”后检查控制台，你会发现没有区别：http://dojo.telerik.com/iqAPO

【讨论】：

您应该包含与此网格相关的所有代码。截图不够。
天啊！！！解决了！太感谢了！挣扎了2天。它帮助我一次性解决了两个错误。 var current = $("#grid").data("kendoGrid").dataSource.get(e.model.id);这段代码做到了，:) 再次感谢一百万..
我很高兴它成功了，但就像我之前说的 - 你可以进一步简化它：var current = e.model;

【解决方案3】：

var gridDataById= $("#grid").data("kendoGrid");   
//Getting selected row
var selectedRow = gridDataById.dataItem(gridDataById.select());
console.log(selectedRow);

【讨论】：

请简要说明其工作原理以及为什么它是解决问题的好方法。这使得答案对 OP 和未来的访问者更有用。