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

I've been trying to figure out how to refresh the grid after creating a new item. Scenario is: Create an item in the client, send request to server, receive response and update client. (Alternatively, I wouldn't mind figuring out why the grid isn't using the item I'm returning it in the server-side create function)

This post mentions the requestEnd event, but it's not exposed in razor. This event seems to fire after a request is finished, that is, after the server processes the event, so new objects created on the client will already be sent to the server for processing; then the client can request the latest information without losing data. Since the grid datasource object was undefined on page load, I ended up using the .Change event to hook the requestEnd event.

@(Html.Kendo().Grid
.Name("user-grid")
...
.Pageable(pageable => pageable
    ...
    .Events( e => e.Remove("grid_remove").Change("hook_request_end"))
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Model(m =>
    {
        m.Id(vm => vm.DocumentId);
        m.Field<DateTime>("LastModified").Editable(false);
    })
    .Read(a => a.Action("KList", "Controller"))
    .Create(a => a.Action("KCreate", "Controller"))
    .Update(a => a.Action("KUpdate", "Controller"))
)

and then the javascript:

var requestEndHooked = false;
function hook_request_end()
{
    if (requestEndHooked == true)
    {
        return;
    }

    requestEndHooked = true;
    $("#user-grid").data("kendoGrid").dataSource.bind("requestEnd", dataSource_requestEnd);
}

function dataSource_requestEnd(e)
{
    try
    {
        if (e.type == "create")
        {
            $("#user-grid").data("kendoGrid").dataSource.read();
        }

    }
    catch (e)
    {
    }
}

If there's a better way, I'd love to know.

To answer your question, there are events other than "create": "read", "update"

Answer 2

This will refresh the Grid

 var grid = $("#Name").data("kendoGrid");
     grid.dataSource.page(1);

if .page(1) doesn't work try .read, but it should

Answer 3

.sync: function (e) {
this.read();
},

Answer 4

You can subscribe to the Sync event of the grid's data source and call the read method of its data source.

.Events(events => events.Error("error_handler").Sync("sync_handler"))

function sync_handler(e) {
   this.read();
}

Answer 5

I agree this is very old question, but unfortunately I was also a victim of this error few days back. My scenario was

1. First time i was able to insert new record in database using popup method
2. If I add another record in same grid without refresh, grid is sending both the records to server, and unfortunately leads in duplicate value error.

Finally I think I got a solution for my problem, I was not setting primary key value to my record when I insert it into database and returning that object.

Below is my kendo grid code

@(Html.Kendo().Grid<TeamMemberViewModel>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.abcd);
            columns.Bound(p => p.abcd_id).Hidden();
            columns.Bound(p => p.abcd12_id).Hidden();
            columns.Command(command =>
            {
                command.Edit();
                command.Destroy();
            });
        })
        .ToolBar(toolbar =>
        {
            if (ViewBag.IsAddAllowed)
            {
                toolbar.Create().Text("Add new");
            }

            //  toolbar.Save().SaveText("Save Changes");

        })
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ABCD")
        )
        .Pageable()
        .Navigatable()
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Ajax()                
            .PageSize(20)
            .ServerOperation(false)
            .Events(events =>
            {
                events.Error("error_handler");
                events.RequestEnd("request_end");
            }
)
        .Model(model =>
        {
            model.Id(p => p.primarykey_id);
            model.Field(p => p.abcd);
        })
        .Create("ABCD_Create", "TeamMember", new { id = Model.abcd_id})
        .Read("ABCD_Read", "TeamMember", new { id = Model.abcd_id })
        .Update("ABCD_Update", "TeamMember", new { id = Model.abcd_id })
        .Destroy("TeamMember_Destroy", "TeamMember", new { id = Model.hackathon_id })
    )
)

Below is error handling code

  function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            $(".errorMessage").text(message);
            alert(message);
        }
    }



    function request_end(e) {
        switch (e.type) {
            case "create":
                if (e.Errors == undefined && e.response.Total > 0) {
                    //  alert("Saved Successfully");
                    $(".errorMessage").text("Saved Successfully");
                }
                break;

            case "update":
                if (e.Errors == undefined && e.response.Total > 0) {
                    // alert("Updated Successfully");
                    $(".errorMessage").text("Updated Successfully");
                }
                break;

            case "destroy":
                if (e.Errors == undefined && e.response.Total > 0) {
                    // alert("Deleted Successfully");
                    $(".errorMessage").text("Deleted Successfully");
                }
                break;

            default:
                $(".errorMessage").text("");
                break;
        }

        return true;
    }

Server Code

 [AcceptVerbs(HttpVerbs.Post)]
public ActionResult ABCD_Create([DataSourceRequest] DataSourceRequest request, MyViewModel my, short abcd_id)
{
    if (my != null && ModelState.IsValid)
    {

        MY tm = Mapper.Map<MyViewModel>(my);
        tm.abcd_id = abcd_id;

        try
        {
            repo.Create(tm);
            my.primarykey_id = tm.primarykey_id;   ///This is most important                           
        }
        catch (Exception ex)
        {
            ModelState.AddModelError("Duplicate Value Found", string.Format("error: {0} already exists", my.abcd));
        }
    }
    else
    {
        ModelState.AddModelError("Error", "Not valid please send data again");
    }

    return Json(new[] { my }.ToDataSourceResult(request, ModelState));
}

Hope this might help someone

Answer 6

using AutoSync(true) in ajax mvc kendo grid having pop up edit mode causes the pop up to not show up at all.

So I use this

function onRequestEnd(e) {
        if(e.type == "create" || e.type == "destroy" || e.type == "update") {
            setTimeout(function myfunction() {
                $("#mygrid").data("kendoGrid").dataSource.read();
            }, 1000);
        }
    }

The time out is to make sure you dont over lap the crud operation.