Kendo UI DataSource Destroy function calls more than one time for multiple records

Question

I have a strange problem in Kendo UI - which I dont understand.

This is my code.

$(document).ready(function() {
    var kendo_dataSource = new kendo.data.DataSource({
        autoSync: true,
        batch: true,
        transport: {
            read: {
                url: "<?php echo BASE_URL . 'kendo/kendo_grid_read' ?>",
                dataType: "json"
            },
            destroy: {
                url: "<?php echo BASE_URL . 'kendo/kendo_grid_destroy' ?>",
                dataType: "json",
                type: "POST"
            },
            parameterMap: function(data, type) {
                if (type == "destroy") {
                    return {models: data.models}
                }
            }
        },
        serverFiltering: true,
        serverGrouping: true,
        serverPaging: true,
        page: 1,
        pageSize: 5,
        schema: {
            data: "results",
            total: "total",
            model: {
                id: "field1"
            }
        }
    });

    $("#kendo_grid2").kendoGrid({
        dataSource: kendo_dataSource,
        height: 300,
        filterable: true,
        sortable: true,
        pageable: true,
        selectable: "multiple row",
        columns: [
            {
                field: "field1"
            },
            {
                field: "field2"
            },
            {
                field: "field3"
            }
        ]
    });

    $("#test_button").on("click", function() {
        var selectedRows = $("#kendo_grid2").data("kendoGrid").select();
        if (selectedRows.length > 0) {
            for (var i = 0; i < selectedRows.length; i++) {
                var dataItem = $("#kendo_grid2").data("kendoGrid").dataItem(selectedRows[i]);
                console.log(dataItem);
                kendo_dataSource.remove(dataItem);
            }
        }
    });

});

Here goes the situation.

When the $("#test_button").on("click", function() is fired, it checks for the selected rows in the grid - and delete the rows.

If I select 2 rows, it deletes 2 rows. And the 2 rows are disappeared from the Grid.

But, I see something strange -

whhen 2 rows are deleted, there is 2 POST request - which is fine.

But the first POST request's parameters are

models[0][field1]   3
models[0][field2]   poioioi
models[0][field3]   oiuoiuuigbhkjh
models[0][field4]   kjh kjhkjhyt

And the second POST request's parameters are

models[0][field1]   3
models[0][field2]   poioioi
models[0][field3]   oiuoiuuigbhkjh
models[0][field4]   kjh kjhkjhyt
models[1][field1]   4
models[1][field2]   kjhk hkiui
models[1][field3]   khkj
models[1][field4]   mkhkhkhkjhghgfgdf

And I understand that, I can access the data in the server like this

foreach ($_POST['models'] as $model) {
            echo $model['field1'];           
}

I was wondering if its possible to send only one request - possibly the second POST request only, as I can delete the 2 rows in one request.

Or sending 2 separate request but with only one model at a time?

Is it possible?

Any help would be greatly appreciated.

Answer 1

This is caused by the autoSync setting. When you set it to true the data source calls the sync method after every change. Setting autoSync to false and manually calling the sync() method would cause the data source to make only one request with all deleted data items.