Telerik MVC Grid, rebind after ajax delete from custom command?

Question

I've got a Telerik MVC Grid and I am trying to have the grid rebind after deleting an item.

here is my grid:

@(Html.Telerik().Grid(Model.Item).Name("Items").Sortable().Scrollable(x => x.Height(400)).Filterable().Pageable(x => x.PageSize(20))
.Pageable()

.Columns(columns =>
{
    columns.Bound(x => x.Equipment.Location.Building.Name).Title("Building");
    columns.Bound(x => x.Equipment.Location.Room).Width(150);
    columns.Bound(x => x.Number).Title("Number").Width(150);
             columns.Command(commands =>
             {
                 if (Model.CanViewHistory)
                 {
                     commands
                     .Custom("ViewHistory")
                     .Text("History")
                     .ButtonType(GridButtonType.Text)
                     .SendState(false)
                     .DataRouteValues(x => x.Add(y => y.Id).RouteKey("id"))
                     .Action("Index", "ItemHistory");
                 }

                 if (Model.CanEdit)
                 {
                     commands
                    .Custom("Edit")
                    .Text("Edit")
                    .ButtonType(GridButtonType.Image).ImageHtmlAttributes(new { @class = "t-icon t-edit t-test" })
                    .DataRouteValues(x => x.Add(y => y.Id).RouteKey("id"))
                    .SendState(false)
                    .Action("Save", "Items");

                     commands
                    .Custom("Delete").HtmlAttributes(new { onclick = "return confirm('Are you sure you want to delete this item?')" })
                    .Text("Delete").Ajax(true)
                    .ButtonType(GridButtonType.Image).ImageHtmlAttributes(new { @class = "t-icon t-delete t-test" })
                    .DataRouteValues(x => x.Add(y => y.Id).RouteKey("id"))
                    .SendState(false)
                    .Action("Delete", "Items", new { Area = "Apps" });
                 }

             }).Title("Actions");
}).ClientEvents(events => events.OnComplete("onComplete")))

And my method to call after delete executes is:

<script type="text/javascript">
    function onComplete() {
        $("#Items").data("tGrid").rebind();
    }
</script> 

Action:

public ActionResult Delete(Guid id)
    {
        Item item = _itemService.GetOne(x => x.Id == id);

        _itemService.Delete(item);

        return RedirectToAction("Index");
    }

The action works, the item does actually get deleted, but the grid does not refresh, only after manually reloading the page will the deleted item be gone. In my console when I click the delete button I get the following error:

Uncaught ReferenceError: xhr is not defined telerik.grid.min.js:1

What am I doing wrong?

Edit: Using Kirill's method below removes my error, but the grid still doesn't refresh, the javascript is sucessfully being called and getting to the rebind() command though.

Answer 1

You should not return ViewResult from this method. You should return JsonResult.

public JsonResult Delete(Guid id)
{
    try
    {
        Item item = _itemService.GetOne(x => x.Id == id);

        _itemService.Delete(item);        

        return Json(new { result = true });
    }
    catch
    {
        return Json(new { result = false });
    }
}

And onComplete should be:

function onComplete(e) {
   if (e.name == "Delete") {
        var result = e.response.result;
        if(result==true)
            $("#Items").data("tGrid").rebind();
        else{
            alert("Error on deleting")
        }
   } 
}

UPDATE This works with Ajax binding.

@(Html.Telerik().Grid<ItemType>.Name("Items")
            .Sortable().Scrollable(x => x.Height(400))
            .Filterable().Pageable(x => x.PageSize(20))
//you should add this line:
            .DataBinding(dataBinding => dataBinding.Ajax().Select("Select", "Items"))
            .Columns(columns =>
            {
                columns.Bound(x => x.Equipment.Location.Building.Name).Title("Building");
                columns.Bound(x => x.Equipment.Location.Room).Width(150);
                columns.Bound(x => x.Number).Title("Number").Width(150);
                columns.Command(commands =>
                {
                    if (Model.CanViewHistory)
                    {
                         commands.Custom("ViewHistory")
                                 .Text("History")
                                 .ButtonType(GridButtonType.Text)
                                 .SendState(false)
                                 .DataRouteValues(x => x.Add(y => y.Id).RouteKey("id"))
                                 .Action("Index", "ItemHistory");
                    }

                    if (Model.CanEdit)
                    {
                         commands.Custom("Edit")
                                 .Text("Edit")
                                 .ButtonType(GridButtonType.Image)
                                 .ImageHtmlAttributes(new { @class = "t-icon t-edit t-test" })
                                 .DataRouteValues(x => x.Add(y => y.Id).RouteKey("id"))
                                 .SendState(false)
                                 .Action("Save", "Items");

                         commands.Custom("Delete")
                                 .HtmlAttributes(new { onclick = "return confirm('Are you sure you want to delete this item?')" })
                                 .Text("Delete")
                                 .Ajax(true)
                                 .ButtonType(GridButtonType.Image)
                                 .ImageHtmlAttributes(new { @class = "t-icon t-delete t-test" })
                                 .DataRouteValues(x => x.Add(y => y.Id).RouteKey("id"))
                                 .SendState(false)
                                 .Action("Delete", "Items", new { Area = "Apps" });
                     }

                  }).Title("Actions");
              })
     .ClientEvents(events => events.OnComplete("onComplete")))

and you should add action to get data to grid:

[GridAction]
public JsonResult GetChangeHistory(Guid stockCompanyId)
{
    IEnumerable<ItemType> items = ... //code to get items.
    return Json(new GridModel<ItemType>(items));
}

I assume that element of items collection is of type ItemType.