In my Grid ToolBar, I need the Delete Button

[David]

     So, in my grid I need the Delete column button to be moved too the Toolbar area where my "Add New record", "Save Changes", and "Cancel Changes" buttons are as well as add check boxes to the grid so we can delete multiple records at once. Can I get any leads to do this please? 

[Alex Hajigeorgieva]

Hello, David,

One way you can achieve the desired outcome is by providing a custom toolbar button and then using a custom function handler to remove the selected rows.

You can take advantage of the grid select() method to get hold of the currently selected rows, loop them and use the grid removeRow() method to destroy them:

https://dojo.telerik.com/@bubblemaster/AYeyOmOG/2

.ToolBar(t =>
{
     t.Custom().Text("Delete").Name("batchDestroy").IconClass("k-icon k-i-close");
})

<script>
    $(document).ready(function () {
        $(".k-grid-batchDestroy").on("click", function(e){
             e.preventDefault();
             var grid = $("#grid").data("kendoGrid");
             var selectedRows = grid.select();
             $.each(selectedRows, function(i,row){
                   grid.removeRow(row);
             });
         });
   });
</script>

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/removerow

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/select

Finally, I suppose, you would like to remove the destroy confirmation which would be triggered for each row. You can do that by calling the DisplayDeleteConfirmation() method with false as a parameter in the Editable configuration:

.Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[David]

Thank you! Does it matter that I am using MVC ASP.NET and Data Source as opposed to KENDO UI? I added the Delete button with no problem, but the script doesn't seem to be running as I have tried it, and it doesn't work. But I am on the right track! I also have the columns.Select(); on my application for my check boxes. Do I need to add anything to that line of code? 

 

As for the Confirmation, I would like to keep 1 confirmation and not have it for each record. 

[David]

I just realized I never put down any original code. 

 

This was my original line of code in my toolbar. 

toolbar.Custom().Text("Delete").HtmlAttributes(new { onclick = "command.Destroy" });

[David]

Hi Alex,

I am kinda having a slow moment. I entirely miss represented the question and I shall ask it again in a new post. I'm so sorry. 

[Alex Hajigeorgieva]

Hi, David,

Thank you for the snippet provided in the forum post here, I am linking it in case anyone else would like to find the answer:

https://www.telerik.com/forums/i-need-my-custom-delete-button-to-delete-records-associated-with-my-check-box-while-batch-editing-is-enabled

I believe you explained the scenario well, the only thing that was missing is that you would like to add a single warning and that the changes should be synced immediately instead of by pressing the save changes button. Is that correct?

So here is what I tested and it works as explained above:

• the custom button name is used to create a button with a class k-grid-[Command.Name]. In your case this is "k-grid-Destroy". Attach a click handler in the document ready handler to the button using the class
• get the grid instance using the Name() of the widget
• get the selected items using the select() method
• warn the user they are about to delete all or some rows
• on confirm, loop the rows and remove them
• sync the data source so they are deleted from the data base

   .ToolBar(toolbar =>
   {     /* other buttons here  */
          toolbar.Custom().Text("Delete").Name("Destroy").IconClass("k-icon k-i-close");
      })
<script>
    $(document).ready(function () {
        $(".k-grid-Destroy").on("click", function (e) {
            e.preventDefault();
            var grid = $("#Grid").data("kendoGrid");
            var selectedRows = grid.select();
            kendo.confirm(kendo.format("Are you sure you wish to delete {0} records?", selectedRows.length))
                .done(function () {
                    $.each(selectedRows, function (i, row) {
                        grid.removeRow(row);
                    })
                    grid.saveChanges();
                });
        });
   });
</script>

Give this a try and let me know in case you need further assistance.

Regards,
Alex Hajigeorgieva
Progress Telerik

[David]

Yup! This is exactly what I was looking for! I was looking at my question and thought "Crap!", I needed check boxes, not selectable! I thought I would haft to remake the question so as to not clutter with this. I realize, every time I would also have new code from trying to get the button to work. Thank you for this! It's exactly what I needed!

[Lenny]

Great post however when I implement this exact method the grid is posting duplicate records to the controllers action method. In essence if the user selects more than one row the grid will post additional records. User selects two rows the grid executes three posts. The first one with the first record. The second post will contain the first record and the second record the third post will include the first two and the third record. Any ideas what I am doing wrong?

[Viktor Tachev]

Hello Lenny,

 

The behavior could be due to the DataSource configuration. Please ensure that the Batch() option for the Grid DataSource is enabled. With this setting the DataSouce can send multiple records for delete, update, create to the server.

Another thing that could cause unexpected behavior is having IDs for the items that are zero. Please make sure that there are no items with such IDs and see how the behavior changes. 

 

In case the issue persists, would you send us a runnable sample where the behavior can be replicated? This will enable us to examine it locally and look for its cause.

 

Regards,
Viktor Tachev
Progress Telerik