Kendo UI sync() not firing when datasource._destroyed is populated (dirty)

Question

Here is slimmed down version of code:

gridDataSource = new kendo.data.DataSource({
        batch: true,
        transport: {
            read: {
                url: 'Equipment'
            },
            destroy: {
                url: 'Equipment',
                contentType: "application/json",
                dataType: 'json',
                type: "DELETE"
            },
            parameterMap: function (options, operation) {
                if (operation == "read") {
                    return "this=works-fine";
                } else {
                    alert('not reading');
                    return kendo.stringify(options.models);
                }
            }
        },
        schema: {
            id: "EquipmentId",
            fields: {
                Value: { type: "number" }
            }
        }
    });

kendoGrid = gridObj.kendoGrid({
        dataSource: gridDataSource,
        selectable: 'row',
        navigatable: true,
        change: rowSelect,
        sortable: true,
        pageable: false,
        columns: [
            { field: "Value" },
        ]
    }).data('kendoGrid');

And the read works just fine, I remove a row (or many) with this (selectedRow is populated correctly, just skipped for brevity):

    $('#footer-remove').off().on('click', function () {
        kendoGrid.removeRow('table tr[data-uid="' + selectedRow.uid + '"]');
        console.log(gridDataSource._destroyed);
    });

And its shows up in gridDataSource._destroyed, all my tests all show that the gridDataSource is dirty.

When I call sync, nothing happens if I am just deleting. What am I missing? Thank you.

Answer 1

You need to set editable to true in the initialization of the grid.

kendoGrid = gridObj.kendoGrid({
    dataSource: gridDataSource,
    selectable: 'row',
    navigatable: true,
    change: rowSelect,
    sortable: true,
    pageable: false,
    editable: true,
    columns: [
        { field: "Value" },
    ]
}).data('kendoGrid');

If you don't want the cell to be updatable (just being removed) then you should set editable as follow:

editable: {
    destroy: true,
    update: false
},

Also, setting editable.confirmation to false disable a popup prompting for confirmation when deleting.

EDIT:

The reason why destroy is not being executed is that there is an error in the Datasource definition, schema should contain model element and then the definition (you missed model).

schema: {
    model: {
        id: "EquipmentId",
        fields: {
            Value: { type: "number" }
        }
    }
}

You can see it running here: http://jsfiddle.net/OnaBai/dq6jh3yp/4/