Kendo Grid not calling HttpDelete method in Web API

Question

When I click the delete button in the template column I get the built-in warning alert that says 'Are you sure you want to delete this record?' This lets me know that I am triggering the grid's built-in destroy functionality properly. By calling:

grid.removeRow(row);

But when I click OK in the alert window the deleted row is removed from the grid in the UI, but grid is not actually calling the Delete method in my Web API. I can't figure out why the Web API method is not being called.

The JavaScript:

<script type="text/javascript">
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    transport: {
                        read: {
                            url: "api/products",
                            dataType: "json"
                        },
                        destroy: {
                            url: "api/products",
                            type: "DELETE",
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                                id: "id",
                                fields: {
                                    id: { editable: false, nullable: false, type: "int" },
                                    name: { type: "string" }
                            }
                        }
                    },
                    pageSize: 10
                },
                editable: true,
                scrollable: false,
                sortable: true,
                pageable: {
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    field: "name",
                    title: "Name"
                }, {
                    template: "<div class='text-center'><a href='Products/Edit/#= id #' class='btn btn-default custom-btn'><i class='glyphicon glyphicon-pencil'></i></a> " +
                              "<button type='button' class='btn btn-default btn-circle js-delete' data-id='#= id #'><i class='glyphicon glyphicon-trash'></i></button></div>",
                    width: 100
                }]
            });

            $(document).on('click', '.js-delete', function () {
                var grid = $("#grid").data("kendoGrid");
                var row = $(e.target).closest('tr');
                grid.removeRow(row);
            });
        });
</script>

The Web API Controller (ASP.NET Core 1.0):

namespace MyApp.Controllers.Api
{
    [Produces("application/json")]
    [Route("api/Products")]
    public class ProductsController : Controller
    {    
        [HttpDelete("{Id}")]
        public IActionResult DeleteProduct(int id)
        {
            // Lookup product and delete it here
        }
    }
}

A few things that I have already tried:
1.Instead of trying to use the grid's built-in destroy command I replaced my JavaScript function with a manual Ajax call to the delete method and it worked fine.

2.I tried changing the destroy type to POST and the api method to HttpPost.

3.I tried changing the parameter id in the api method to be [FromBody] int Id incase the grid sends the param through the content body.

Answer 1

I'm not sure if that can help, but in my case, I had to remap the parameters like this

parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            var index = options.models.length - 1;
                            return kendo.stringify(options.models[index]);
                        }
                    }

I hope this it helps:

<script type="text/javascript">
    $(document).ready(function () {
        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: "api/products",
                        dataType: "json"
                    },
                    destroy: {
                        url: "api/products",
                        type: "DELETE"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            var index = options.models.length - 1;
                            return kendo.stringify(options.models[index]);
                        }
                    }
                },
                schema: {
                    model: {
                            id: "id",
                            fields: {
                                id: { editable: false, nullable: false, type: "int" },
                                name: { type: "string" }
                        }
                    }
                },
                pageSize: 10
            },
            editable: true,
            scrollable: false,
            sortable: true,
            pageable: {
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "name",
                title: "Name"
            }, {
                template: "<div class='text-center'><a href='Products/Edit/#= id #' class='btn btn-default custom-btn'><i class='glyphicon glyphicon-pencil'></i></a> " +
                          "<button type='button' class='btn btn-default btn-circle js-delete' data-id='#= id #'><i class='glyphicon glyphicon-trash'></i></button></div>",
                width: 100
            }]
        });

        $(document).on('click', '.js-delete', function () {
            var grid = $("#grid").data("kendoGrid");
            var row = $(e.target).closest('tr');
            grid.removeRow(row);
        });
    });
</script>