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.

Kirill Bestemyanov · Accepted Answer · 2013-05-21 20:26:22Z

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.

This solution removed the error, but the grid still doesn't rebind and I need to refresh the page to see the item gone. Do I have to set the data-binding to ajax and supply a method in the grid's razor code?
how do you do that? can you provide an example? I pasted my entire grid's code there.
Thank you. Thank you. Thank you. I was missing the "return Json(new { result = false });" line I needed to do custom filtering. I've been tearing my hair out all day over this.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related