How to get value id from dataSource by row Kendo UI Grid

Help me code How to get value id from dataSource by row and change to current value default (1)

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

My full source:

<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>

Now, when click edit, all rows only get fields of id 1. I want corresponding id instead of the default id 1.

Solution

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);
  }
});

Working example: edit event

Documentation: grid edit event