Is there a any way to capture update event which dynamically generate in inline edit mode. I tried with edit and cancel mands and it worked successfully. I went through this example and it worked with cancel mand. Any help would be greatly appreciated.

Is there a any way to capture update event which dynamically generate in inline edit mode. I tried with edit and cancel mands and it worked successfully. I went through this example and it worked with cancel mand. Any help would be greatly appreciated.

• javascript
• jquery
• kendo-ui
• kendo-grid

1 Answer 1

Depending on when exactly you want to intercept the event.

I would remend you using save event. This event is fired when you a record is going to be saved and before exiting inline edition mode.

The definition would be something like (note that Save is defined in the Events section of the Grid definition):

@(Html.Kendo().Grid(Model).DataSource(dataSource => ...)
                          .Columns(columns => ...)
                          .Editable(editing => ...)
                          .Events(events => events.DataBound("onGridDataBound")
                                                  .Save("onGridSave")
                                                  .Edit("onGridEdit")
                                                  .Change("onGridChange")
                          )
            )

The following code snippet shows the save event (using JavaScript)

$(document).ready(function () {
  var crudServiceBaseUrl = "http://demos.telerik./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,
    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" },
      { mand: ["edit", "destroy"], title: " ", width: "250px" }],
    editable: "inline",
    save: function(e) {
      alert("Saving");
    }
  });
});

<link rel="stylesheet" href="http://cdn.kendostatic./2014.3.1119/styles/kendo.mon.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic./2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic./2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic./2014.3.1119/js/kendo.all.min.js"></script>

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