CODEWITHSUNDEEP
kendo-uikendo-gridkendo-asp.net-mvc
Deepali
Deepali

Reputation: 97

How to refresh the KendoUi grid after a ajax post callback

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();
                    }

                });
            }

Upvotes: 3

Views: 16921

Answers (3)

Mahib
Mahib

Reputation: 4063

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();

                }
            }
        }

Upvotes: 5

Jaimin
Jaimin

Reputation: 8020

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

Upvotes: 12

Vivek Parekh
Vivek Parekh

Reputation: 1085

Try using

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

OR

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

Upvotes: 2

Related Questions