Kendo UI Grid update event is not firing

Question

I have Kendo UI inline Grid. It read and populate the grid properly. but when i press edit and changes in any column and press update then update event is not firing. and it also not calling controller method.

Hope someone can help me point out what I am doing wrong here. following is my grid binding.

    dataSource = new kendo.data.DataSource({
        transport: {

            read: function (options) {
                $.ajax({
                    type: 'POST',
                    url: "./GetIngredients",
                    dataType: "json",
                    success: function (result) {
                        options.success(result);
                    }
                });
            },

            update: function (options) {
                $.ajax({
                    type: 'POST',
                    url: "./UpdateData",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8"
                });
            },
            parameterMap: function (options, operation) {
                alert('1');
                if (operation !== "read" && options.models) {
                    alert('2');
                    return { models: kendo.stringify(options.models) };
                }
            }
        },
        batch: true,
        pageSize: 20,
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { editable: false, nullable: true },
                    Division: { type: "string", editable: true, nullable: false },
                    GroupName: { type: "string", validation: { required: true } },
                    CategoryName: { type: "string" },
                    TypeName: { type: "string" },
                    ItemName: { type: "string" }
                }
            }
        }

    });

    var grid = $("#grid").kendoGrid(
   {
       dataSource: dataSource,
       height: 430,
       scrollable: true,
       pageable: true,
       navigatable: true,
       columns: [
       { field: "Division", title: "Division", width: "80px" },
       { field: "GroupName", title: "Group Name", width: "70px" },
       { field: "CategoryName", title: "Category Name", width: "110px" },
       { field: "TypeName", title: "Type Name", width: "100px" },
       { field: "ItemName", width: "140px" },
       { command: ["edit", "destroy"], title: " ", width: "170px" }],
       editable: "inline"
   }).data("kendoGrid");

following is the method in Homecontroller.

  [HttpPost]
    public JsonResult GetIngredients()
    {
        IngredientData ingredientData = new IngredientData();
        ingredientData.Id = 1;
        ingredientData.DivisionId = 1;
        ingredientData.Division = "Division Abc";
        ingredientData.GroupId = 2;
        ingredientData.GroupName = "Group -A";
        ingredientData.CategoryId = 3;
        ingredientData.CategoryName = "Category -D";
        ingredientData.FoodTypeId = 4;
        ingredientData.TypeName = "Type One";
        ingredientData.ItemId = 5;
        ingredientData.ItemName = "Item One";

        return Json( ingredientData , JsonRequestBehavior.AllowGet);
    }

 [HttpPost]
    public void UpdateData()
    {
        // logic for update data in database.
    }

Answer 1

I have faced same issue. But I have solved using this.

To fire create/delete/update we need to specify schema in dataSource( in schema we should mention atleast what is id field).

schema: { model: { id: "StudentID" } }

Code:

var dataSource = new kendo.data.DataSource({
       transport: {
            read: function (options) {
                alert("read");              
            },
            create: function (options) {                    
                                   alert("create");             
            },
            update: function (options) {                    
                                   alert("update");                },
            destroy: function (options) {                    
                                   alert("destroy");                }
        },
                    schema: {
            model: {
                id: "StudentID"
            }
        }

Answer 2

Did you realize that you have batch set to true? When in batch mode, you have to invoke sync on dataSource or saveChanges in Grid definition.

Try adding a toolbar command for invoking saveChanges as follow:

var grid = $("#grid").kendoGrid({
    dataSource: dataSource,
    height: 430,
    scrollable: true,
    pageable: true,
    navigatable: true,
    toolbar: [ "save" ],
    columns: [
        { field: "Division", title: "Division", width: "80px" },
        { field: "GroupName", title: "Group Name", width: "70px" },
        { field: "CategoryName", title: "Category Name", width: "110px" },
        { field: "TypeName", title: "Type Name", width: "100px" },
        { field: "ItemName", width: "140px" },
        { command: ["edit", "destroy"], title: " ", width: "170px" }],
    editable: "inline"
}).data("kendoGrid");

or simply remove batch mode.