How can I refresh the grid after I edit the Kendo UI grid?

Question

I edit the grid using editable: \"popup\" as shown on Telerik\'s demo page. After I edit the grid, I want the grid to refresh. Does the grid have any event that is

Answer 1

You can call a function on you edit button click and inside that you can refresh the grid:

function EditRow(){
     var grid = $("#YourGridName").data("kendoGrid");
     grid.dataSource.read();              
}

Answer 2

In case someone else needs to know how to do this. You can include the "complete" function in your create as well as update bits.

transport: {
    read: {
        url: "http://myurl.json"
    },
    create: {
        url: "http://mycreate.json",
        type: "POST",
        complete: function(e) {
            $("#grid").data("kendoGrid").dataSource.read(); 
        }
    },

Answer 3

Use this if you want to refresh the grid.

$("#WorkOrderDetails").data("kendoGrid").refresh();

Answer 4

Add Events into DataSource

.DataSource(dataSource => dataSource.Ajax(

        .Events(e => e.RequestEnd("PowerPlantProduction.onRequestEnd"))**
)

Javascript:

onRequestEnd: function (e) {

        if (e.type == "update") {
            if (!e.response.Errors) {
               e.sender.read();
            }
        }
    },

Answer 5

The accepted answer can cause unexpected behaviour if you're using server side validation. The sync event triggers whenever an update is sent to the server regardless of whether the request was successful, so if the request triggers server side validation errors (or any other errors) the grid will still be updated and any changes lost. Still looking at the this but the best solution I've found is to use the data source's onRequestEnd() event and manually check for errors.

For example:

function onRequestEnd(e)
{
    var grid = $("#grid").data("kendoGrid");
    var data = grid.dataSource;
    if (e.type == "create" || e.type == "update") {
        if (!e.response.Errors) 
            data.read();
        else console.log("I had some issues");
    }
}