Kendo Grid Inline Edit New Row Disappears After Add

Question

I have a grid with Angular and remote data binding. Its configuration is like this:

    $scope.myGridOptions = {
        dataSource: new kendo.data.DataSource({
                type: "json",
                transport: {
                    create: function(operation) {
                        //calls an Angular service to add
                        DataService.add(operation).success(function(data) {
                            operation.success(data);
                        });
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return { models: kendo.stringify(options.models) };
                        }
                    }
                },
                pageSize: 10,
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                           ...
                        }
        }),
        toolbar: [ { name: "create", text: "Add New Book" } ],
        autobind: false,
        groupable: false,
        editable: {
            mode: "inline"
        },
        columns: [
            {
                field: "Name",
                title: "Name"
            },
            {
                field: "Description",
                title: "Description"
            },
            {
                command: [
                    { name: "edit", title: "Action" }
                ]
            }
        ]
};

When I click on the "Add New Book" button, the first row in the grid turns into a blank row and allows me to enter data. When finish entering, I click on "Update" to save the data and the first row turns into a regular, read-only row and I verify the new row has been added to the remote database. So far so good. However, when I click on the "Edit" button on the new row followed by clicking on the "Cancel" button my new row disappears until I refresh the page.

What am I missing?

Answer 1

In order for kendo dataSource to sync data after save, you need to return the newly created row back to the dataSource from the server. This is valid for update also.