kendo grid delete command not working

Question

i have developed a web application using kendo ui tools and theres a kendo grid with batch edit mode..

but when i press the delete button for any record in kendo grid it will erase from the list in grid but actually not in the data source.when i reload the page or grid the deleted item will still exist..

here is the code of my grid

<div id="grid">
        </div>
        <script type="text/javascript">

            $("#submitMarketUser").click(function () {
                var grid = $("#grid").data("kendoGrid");
                var dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "WholeSaleTrade/GetTradeProductDetail",
                            dataType: "json",
                            data: {
                                test: $("#Names").val()
                            }
                        },
                        destroy: {
                            url: "WholeSaleTrade/DeletePro",
                            type: "POST",
                            dataType: "jsonp",
                            data: {
                                DAKy: $("#Names").val(),
                                DIKy: $("#btntxt").val()
                            }
                        },
                        create: {
                            url: "WholeSaleTrade/CreateProduct",
                            type: "POST",
                            dataType: "jsonp",
                            data: {
                                AKy: $("#Names").val(),
                                IKy: $("#btntxt").val()
                            }
                        }
                    },
                    pageSize: 5,
                    schema: {
                        model: {
                            id: "ProductKey",
                            fields: {
                                ProductKey: { editable: false, nullable: true },
                                ProductName: { validation: { required: true} }
                            }
                        }
                    }
                });
                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    editable: true,
                    toolbar: ["create", "save"],
                    autobind: true,
                    pageable: true,
                    columns: [
                        { field: "ProductName", title: "Product Name",
                            editor: function (container, options) {
                                var model = options.model;
                                $('<input id="btntxt" name="' + options.field + '"/>').appendTo(container).kendoComboBox({
                                    dataSource: {
                                        type: "POST",
                                        transport: {
                                            read: {
                                                url: "MarketInformation/PopulateProducts",
                                                success: function (data) {
                                                    var prod = data[0];
                                                    model.set("ProductName", prod.ItmNm);
                                                    model.set("ItmKy", prod.ItmKy);
                                                    model.set("UserKey", $("#Names").val());
                                                }
                                            }
                                        }
                                    },

                                    dataValueField: "ItmKy",
                                    dataTextField: "ItmNm"
                                });
                            }
                        },
                        { command: ["destroy"], title: "&nbsp;" }
                    ]
                });
            });

        </script>

can not identify that where is the fault going and can somebody please help me to solve this matter.

Answer 1

There are three common reasons delete won't work:

1. Not setting editable of grid to inline or popup. The deleted items will be automatically processed through transport destroy only for "inline"/"popup" edit modes. Ex:

editable: {
   mode: "inline",
}
//or
editable: "inline"

2. If on your datasource, you have the batch flag set to true, this means the datasource will make the call only after you tell it to, e.g calling sync(). Ex:

var dataSource = new kendo.data.DataSource({
    batch: true,
    //.....
});
//... in some where e.g in a save button click event call the following line:
dataSource.sync();

3. You should define id to your primary key of database field name inside model of datasource. Ex:

   model: {
        id: "ProductID",
        fields: {
            ProductID: { editable: false, nullable: true },
        }
    }

---

So the problem with your code is first one, i.e you did not set editable to inline or popup

Answer 2

If you choose not to include editable.mode in order to utilize the in-cell editing, you can set the toolbar of the grid to include the option save:

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            ....
        },
        schema: {
            ....
        }
    },                        
    toolbar: ["create", "save", "cancel"],
    columns: [
        ....
    ],
    editable: true
});

This will create a save button at the toolbar of the grid. After deleting any records by clicking the destroy command button, click on the save button to have the grid to make an Ajax call to the server to delete the record.

If you would rather delete the record automatically without including the save button, you could add a change event handler to the datasource of the grid:

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            ....
        },
        schema: {
            ....
        },
        change: function(e) {
            if (e.action === "remove") {
                this.sync();
            }
        }
    },                        
    columns: [
        ....
    ],
    editable: true
});

This will automatically sync the changes you made to the grid with the server when there's a data change.

Answer 3

Hmm try not including type: "POST", and see if it now works since as far as I can see that bit isn't included on the demo's and I don't think I included it when I last did inline edits/deletes.

Answer 4

I had put an arbitray name for an int on the server Delete Method.

    [HttpPost]
    public ActionResult DeleteRandomTest(Int32 randomTestId)
    {
         ...
    }

The default modelbinder was probably looking for a property called Id (same as the primary key of my type according to the configuration of the model).

 .Model(config => config.Id(p => p.Id))

In fact, I proved this by changing the signature to the following:

    [HttpPost]
    public ActionResult DeleteRandomTest(Int32 Id)
    {
        ...
    }

My break point was hit after that.

Ultimately, I used the full type as the parameter as shown in the Kendo examples because I didn't want to have poorly named parameter names (not camel case) in the action. Shown as follows:

    [HttpPost]
    public ActionResult DeleteRandomTest([DataSourceRequest]
         DataSourceRequest request, RandomDrugTest randomDrugTest)
    {
       ...
    }

This seems to the be the reason it wasn't working.

Answer 5

I had the same issue. My issue was caused by having a data property in the kendo model. Example:

{id: 1, data: ""}