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?

Are you returning the newly created row in add? Otherwise check the value of Id column. It might be still 0. When you refresh the page, the Id is correctly fetched. — Jose Tuttu
@Jose, you nailed it! I wasn't returning the newly created object and that was the problem. Could you provide your answer below so I can mark it as accepted and upvote it? Thanks for your help. — notlkk

Jose Tuttu Jose Tuttu · Accepted Answer · 2016-03-10T06:05:07

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.

Kendo Grid Inline Edit New Row Disappears After Add

1 Answers