如何按行 Kendo UI 网格从数据源获取值 ID

Question

帮我编写代码如何按行从数据源中获取值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",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: crudServiceBaseUrl + "/Products/Destroy",
                        dataType: "jsonp"
                    },
                    create: {
                        url: crudServiceBaseUrl + "/Products/Create",
                        dataType: "jsonp"
                    },
                    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", width: "120px" },
                { 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。

Answer 1

edit Fired when the user edits or creates a data item.

The event handler function context (available via the this keyword) will be set to the widget instance. EVENT DATA

• e.container jQuery The jQuery object of the edit container element, which wraps the editing UI. Depending on the Grid edit mode, the container is different:

• "incell" edit mode - the container element is a table cell

• "inline" edit mode - the container is a table row

• "popup" edit mode - the container is a Kendo UI Window element, which provides an easy way to obtain a reference to the Window widget object, e.g. to attach additional events.

• e.model kendo.data.Model The data item which is going to be edited. Use its isNew method to check if the data item is new (created) or not (edited).

• e.sender kendo.ui.Grid The widget instance which fired the event.

$("#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