Editable grid JS widgets not resetting after update/insert

[PrimePay]

I have an editable kendo grid that submits to my API just fine.  The update is using a popup control.  When I click the update button, the update occurs and the API returns a status 200 with a location header and no content.

However, the popup control never goes away.  I can X out of the popup and then refresh the grid and it refreshes with the updated data.

I am using a RESTful API that submits updates using the PUT verb. I tried in multiple browsers and with multiple forms of editable grid (popup, inline) with similar results.

Please advise.

Below is my razor grid definition

 

<script>
    $(document).ready(function () {
        var controller = "ServicePrototypes/"
        var crudServiceBaseUrl = "http://localhost:3499/api/",
            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: crudServiceBaseUrl + controller,
                        dataType: "json"
                    },
                    update: {
                        url: function (e) {
                            return crudServiceBaseUrl + controller + e.ServicePrototypeID
                        },
                        contentType:"application/json",
                        dataType: "json",
                        type: "PUT"
                    },
                    //destroy: {
                    //    url: crudServiceBaseUrl + controller + "/Destroy",
                    //    dataType: "json"
                    //},
                    create: {
                        url: function (e) {
                            return crudServiceBaseUrl + controller
                        },
                        dataType: "json",
                        contentType: "application/json",                        
                        type: "PUT"
                    },                    
                    parameterMap: function (options) {
                        return JSON.stringify(options);
                    }
                },
                pageSize: 20,
                schema: {
                    model: {
                        id: "ServicePrototypeID",
                        fields: {
                            ServicePrototypeID: { type :"string" },
                            ServiceID: { validation: { required: true } },
                            Service: { validation: { required: true } }                            
                        }
                    }
                }
            });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 550,
            toolbar: ["create"],
            columns: [                
                "Service",
                { field: "ServiceID", title: "Service ID" },                
                { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
            editable: "popup",
            sortable: true
        });
    });
</script>

[Alex Hajigeorgieva]

Hi,

I can not see any issues with the Kendo UI Grid initialization and the symptoms lead me to believe that the controller is most likely not returning a valid JSON response (specific to a jQuery 1.9 breaking change) as outlined at:

http://www.telerik.com/forums/update-destroy-operations-trigger-the-error-event-of-the-datasource-after-updating-to-q1-2013-(v-2013-1-319)

You may compare the controller with the popup editable Kendo UI Grid in our official demo site at:

http://demos.telerik.com/aspnet-mvc/grid/editing-popup

If you cannot fix the issue with the aforementioned changes in place, please provide the controller action, so I can investigate further.

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress

[PrimePay]

Thank you for responding.

 

Reviewing the demo got me going.  Thank you for your help.