asp.net mvc - Telerik MVC Grid, rebind after ajax delete from custom command? -

i've got telerik mvc grid , trying have grid rebind after deleting item.

here 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 sure want delete 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 method 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, item deleted, grid not refresh, after manually reloading page deleted item gone. in console when click delete button following error:

uncaught referenceerror: xhr not defined telerik.grid.min.js:1 

what doing wrong?

edit: using kirill's method below removes error, grid still doesn't refresh, javascript sucessfully being called , getting rebind() command though.

you should not return viewresult method. 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 works ajax binding.

@(html.telerik().grid<itemtype>.name("items")             .sortable().scrollable(x => x.height(400))             .filterable().pageable(x => x.pagesize(20)) //you should add 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 sure want delete 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 should add action data grid:

[gridaction] public jsonresult getchangehistory(guid stockcompanyid) {     ienumerable<itemtype> items = ... //code items.     return json(new gridmodel<itemtype>(items)); } 

i assume element of items collection of type itemtype.