Refresh grid after insert/update

[Raja]

Hi,

I have a grid that will create multiple records in the database on Create/Update of any record in the grid. I would like to refresh the grid once the create/insert is complete so that all the newly created records will be visible to the user. How can I do that?

[Dimiter Topalov]

Hi Raja,

You can listen for the save or saveChanges event of the Grid (depending on the edit mode you are using) and attach a dataBound handler to the Grid, which will be executed only once. Refresh the Grid dataSource in this dataBound handler with the .read() method of the DataSource. This will get the current records from the database and re-render the Grid using the latest data:

function onGridSave(e) {
  e.sender.one("dataBound", function() {
    e.sender.dataSource.read();
  });
});

Regards,
Dimiter Topalov
Telerik

[Dan]

In case anyone else is wondering what working code, based on the above comment, looks like. Here is what is working for me:

This code works for both the Create and Update Grid events.

function onGridEdit(e) {

    e.sender.one("dataBound", function (e) {

        e.sender.dataSource.read();

    });

}

 

function bindDataAndRefresh(e) {

    var grid = $("#upcoming-grid").data("kendoGrid");

    grid.bind("dataBound", onGridEdit(e));

}

 

$(document).ready(function () {

    var grid = $("#upcoming-grid").data("kendoGrid");

    grid.bind("save", bindDataAndRefresh);

});


[Petar]

Hi Dan,

Thank you for sharing the code that worked on your end with the community! Your post will surely help someone in the future. 

Regards,
Petar
Progress Telerik

[Pascal]

> Your post will surely help someone in the future.

It did. Thanks Dan!

[Manoj]

Thanks Dan for sharing this post, It helped me a lot. thanks.