How to refresh the KendoUi grid after a ajax post callback

Question

How to refresh the kendo ui grid after a ajax post is successful? Here is my grid ajax post:

 var newUser = {
                    UserId: 0,
                    UserLoginName: currentRecord.UserLoginName,
                    UserDisplayName: currentRecord.UserDisplayName
                };
                //insert selected rows using DataSource insert method
                destinationGrid.dataSource.insert(newRecord);
                //ajax post to server
                var url = '@Url.Action("CreateUser", "ManageUsers")';
                $.post(url, { loginid: currentRecord.UserLoginName, name: currentRecord.UserDisplayName, role: roleSelected }, function (result) {
                    if (result.Success) {
        **////grid is not refreshing as I want to refersh the grid again from database**
                        destinationGrid.dataSource.read();
                    }

                });
            }

see this http://stackoverflow.com/questions/18399805/reloading-refreshing-kendo-grid/18399994#18399994 — Jaimin, Feb 10 '14 at 12:19
if you see above in my grid I am already using it and I have tried both the options below. — Deepali, Feb 10 '14 at 13:37
the below option works every where and in every event , as I have used it many times, but in the $(post(url) call back I need to refersh the grid as soon as I completes my controller action. How do I do that? — Deepali, Feb 10 '14 at 13:39
You should use the transport configuration for this, have a create url. After you insert a new item in the datasource, just call sync() and let the magic happen. — Adrian Salazar, Feb 10 '14 at 14:40

Jaimin · Accepted Answer · 2014-02-10T14:36:18.577

This is just example

 $.ajax({
          url: '@Url.Action("NewGridView", "Test")',
          type: "Post",
          data: { sampleItem: sampleItem, sampleCode: sampleCode, sampledescription: sampledescription },
          dataType: 'json',
          success: function (result) {

     $('#gridName').data("kendoGrid").dataSource = new kendo.data.DataSource({ data: result });
     $('#gridName').data("kendoGrid").dataSource.read();
     $('#gridName').data("kendoGrid").refresh();
}
});

Controller

 public JsonResult NewGridView(string sampleItem, string sampleCode, string sampledescription)
        {

        List<SampleModel> sampleAddList = new List<SampleModel>();
        SampleModel sampleAdd = new SampleModel();
        sampleAdd.SampleCode = sampleCode;
        sampleAdd.SampleDescription = sampledescription;
        sampleAdd.SampleItems = sampleItem;

        sampleAddList.Add(sampleAdd);
        var result = sampleAddList;
       return Json(result, JsonRequestBehavior.AllowGet);
}

if you need to refresh your grid as soon as complate controller action do this,

$('#gridName').data("kendoGrid").dataSource = new kendo.data.DataSource({ data: result }); in your post success

Thanks It worked, but newly added rows are going to the bottom of table, how Can i make it at the first row? — Deepali, Feb 11 '14 at 06:01
@Deepali i thing you have to do order by created date desc in your controller. — Jaimin, Feb 11 '14 at 08:13
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top)) will make sure the new line is inserted at the top — MattParra, Oct 13 '15 at 20:11

score 5 · Answer 2 · answered Dec 06 '15 at 07:44

As far as I understand you need refresh your kendo grid after a successful update (equivalent to $.ajax success: callback) right?

In that case kendo grid doesn't have any success callback, instead they use a complete callback. Try the following in the transport;

dataSource: {
        transport: {
            read: {
                url: "/YourController/LoadYourGridData",
                type: "POST",
                contentType: "application/json",
                dataType: "json"
            },
            update: {
                url: "/YourController/UpdateYourGridData",
                contentType: "application/json; charset=utf-8",
                type: "POST",
                dataType: "json",
                complete: function (data) {

                    $("#Grid").data("kendoGrid").dataSource.read();

                }
            }
        }

score 2 · Answer 3 · answered Feb 10 '14 at 09:29

2

Try using

$("#gridName").data("kendoGrid").dataSource.read();

OR

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

answered Feb 10 '14 at 09:29

Vivek Parekh

1,075
9
25

How to refresh the KendoUi grid after a ajax post callback

3 Answers3

Linked