KendoUI Grid Custom Toolbar Action to delete selected items

Question

I'm trying to add a new Custom Toolbar Action to my Kendo UI Grid but am lost on how to get the desired behaviour.

I need a button that I can click that will invoke an action method and pass in the collection of selected items in the grid so I can do a bulk delete (or some other action against all of the records)

Can anyone help ?

Currently I have: -

.ToolBar(toolbar =>
{
    toolbar.Custom().Action("Users_DeleteSelected", "Users").Text("Delete Selected");
})

This invokes my method thus: -

public ActionResult Users_DeleteSelected([DataSourceRequest] DataSourceRequest request)
{
    // We need the list of selected UI items *here* so we can delete them - but how
    ...???

    // Just redirect for now, we need to test getting the list of selected items here...
    RedirectToAction("Index");
}

So if I have several items "selected" in the grid, I somehow want to invoke a method like the one above (Users_DeleteSelected) and have it get passed in the list of items to delete, then redirect to the Index once the delete is complete.

** This may not just be linked to deleting - there may in future be several other functions that will be required that fit the same method - i.e. "Mark As Complete" on a list of jobs for example.

I'm guessing maybe the DataSourceRequest isn't the way to go and that maybe I need to add some client side code to somehow assemble the list of selected items.

KendoUI is great but I need more examples.

Answer 1

Thanks for your kind replies. We've figured it out with a bit of searching and the like.

Firstly "kudos" to "this post" on the kendoui site as it pointed me in the right direction.

It turns out that this is what we need: -

1. In the. cshtml file for the grid...

   // .... Other grid stuff
   .ToolBar(toolbar =>
   {
       toolbar.Custom().Text("Test Button").Url("#").HtmlAttributes(new { @class = "test-button" });
   })
   
   // And then also...
   $(document).ready(function () {
       $(".test-button").click(testFunction)
   })
   
   // And finally
   function testFunction(e) {
       kendoConsole.log("Items Selected");
   
       e.preventDefault();
       var grid = $("#Grid").data("kendoGrid");
       var selection = [];
   
       grid.select().each(
           function () {
               var dataItem = grid.dataItem($(this));
               selection.push(dataItem);
           }
       );
   
       $.ajax({
           type: "POST",
           url: "Users/Users_DeleteSelected",
           data: JSON.stringify({ items: selection }),
           dataType: "html",
           contentType: "application/json; charset=utf-8",
           success: function (form) {
               document.open();
               document.write(form);
               document.close();
           }
       });
   };
   

2. Then in the controller we simply have: -

   [HttpPost]
   public ActionResult Users_DeleteSelected(List<UserViewModel> items)
   {
       // Stub to redirect for now
       return RedirectToAction("Index");
   }
   

And that's it. All of the items currently selected in the grid will be posted back to the correct action method and the jobs done.

Thanks.

Answer 2

Sounds like you are looking for batch editing capability. Take a look at this Kendo batch editing example. You can control whether to batch or not on the DataSource.