Kendo grid row disapeared when editing after adding a row

Question

I defined a kendo grid like that, and somehow after adding a row, the first edit click I do (before sending to the server) the row I just added is disappearing, and after refreshing its still there. any suggestions why its happening?

$("#actionGrid").kendoGrid({          
    scrollable: true,
    height: "200px",
    toolbar: [{name: "create", text: "Add"}],
    editable: {
        mode: "inline",
        confirmation: false
    },
    columns: [
        { field: "order", title: "Order", width: 80 },
        { field: "action", title: "Action name"},           
        { command: ["edit", "destroy"], width: 100 }                       
    ],
    dataSource: {
        schema: {
            model: {
                id:"taskId",
                    fields: {
                        taskId: { type:"number" },
                        order: { type: "number", validation: { min: 0 } },                          
                        action: {}
                    }
                }
            },
         transport: {
                read: {
                    dataType: "json",
                    type: "GET",
                    contentType: "application/json",
                    url: "action/readByPId?pId=" + pId
                },
                destroy: {
                    dataType:"json",
                    type:"POST",
                    contentType:"application/json",
                    url: "action/delete"
                },
                update: {
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json",
                    url: "action/update"
                },
                create: {
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json",
                    url: "action/update"
                },                                     
                parameterMap:function parameterMap(options,type) { 
                    if(type !== "read"){        
                        return JSON.stringify(options);
                    }
                }
            },
         sort: { field: "order", dir: "asc" }
        }
    });

Answer 1

Kendo Grid have straight rules .Like whenever create new record ,have to return updated list to client side call . please make sure whether that updated record is returning or not.

IF you doing online offline feature of kendo UI . then follow this following demo. https://demos.telerik.com/kendo-ui/grid/offline

you have not mentioned the data communication method . but if you are doing purly custom way then you have to update datasoure after doing any operation .Please put following code to get update with new data .

$('#GridName').data('kendoGrid').dataSource.read(); <!--  first reload data source -->

$('#GridName').data('kendoGrid').refresh(); <!--  refresh current UI -->