Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to override default update event in KendoGrid inline edit mode

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

enter image description here

enter image description here

like image 921
Damith Avatar asked Dec 10 '14 10:12

Damith


1 Answers

Depending on when exactly you want to intercept the event.

I would recommend 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.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,
    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" },
      { command: ["edit", "destroy"], title: " ", width: "250px" }],
    editable: "inline",
    save: function(e) {
      alert("Saving");
    }
  });
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<div id="grid"></div>
like image 182
OnaBai Avatar answered Oct 05 '22 16:10

OnaBai