如何按行 Kendo UI Grid 从数据源获取值 id

如何解决如何按行 Kendo UI Grid 从数据源获取值 id

帮我编写代码如何按行从dataSource获取值id并更改为当前值默认(1)

在线：var date = dataSource.get(1); console.log(date.ProductName)

我的完整来源：

<div id="grid"></div>

<script>
    $(document).ready(function () {
        var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",dataSource = new kendo.data.DataSource({
                transport: {
                    read:  {
                        url: crudServiceBaseUrl + "/Products",dataType: "jsonp"
                    },update: {
                        url: crudServiceBaseUrl + "/Products/Update",destroy: {
                        url: crudServiceBaseUrl + "/Products/Destroy",create: {
                        url: crudServiceBaseUrl + "/Products/Create",parameterMap: function(options,operation) {
                        if (operation !== "read" && options.models) {
                            return {models: kendo.stringify(options.models)};
                        }
                    }
                },batch: true,pageSize: 20,schema: {
                    model: {
                        id: "ProductID",fields: {
                            ProductID: { editable: false,nullable: true },ProductName: { validation: { required: true } },UnitPrice: { type: "number",validation: { required: true,min: 1} },discontinued: { type: "boolean" },UnitsInStock: { type: "number",validation: { min: 0,required: true } }
                        }
                    }
                }
            });
      
        $("#grid").kendoGrid({
            dataSource: dataSource,selectable: true,pageable: true,height: 550,toolbar: ["create"],columns: [
                "ProductName",{ field: "UnitPrice",title: "Unit Price",format: "{0:c}",width: "120px" },{ field: "UnitsInStock",title:"Units In Stock",{ field: "discontinued",width: "120px",editor: customBoolEditor },{ command: ["edit","destroy"],title: "&nbsp;",width: "250px" }],editable: "inline",edit: function () {

              var date = dataSource.get(1);
              console.log(date.ProductName)

            } 
        });
    });
</script>

现在，当点击编辑时，所有行只得到 id 1 的字段。我想要相应的 id 而不是默认的 id 1。

解决方法

编辑当用户编辑或创建数据项时触发。

事件处理函数上下文（通过 this 关键字获得）将设置为小部件实例。事件数据

e.container jQuery 编辑容器的 jQuery 对象元素，它包装了编辑 UI。根据网格编辑模式，容器不同：
“incell”编辑模式——容器元素是一个表格单元格
“内联”编辑模式 - 容器是表格行
“弹出”编辑模式 - 容器是一个 Kendo UI Window 元素，它提供了一种简单的方法来获取对 Window 小部件对象的引用，例如附加其他事件。
e.model kendo.data.Model 数据项将被编辑。使用其 isNew 方法检查数据项是否为新建（创建）或不新建（编辑）。
e.sender kendo.ui.Grid 触发事件的小部件实例。

$("#grid").kendoGrid({
  columns: [
    { field: "id" },{ field: "name" },{ field: "age" },{ command: "edit" }
  ],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"],edit: function(e) {
    console.log(e.model.id);
    console.log(e.model.name);
  }
});

工作示例：edit event

文档：grid edit event