This is a migrated thread and some comments may be shown as answers.

In my Grid ToolBar, I need the Delete Button

8 Answers 246 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
Veteran
David asked on 31 Jan 2020, 05:11 PM
     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? 

8 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 04 Feb 2020, 01:52 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
David
Top achievements
Rank 1
Veteran
answered on 04 Feb 2020, 02:36 PM

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. 

0
David
Top achievements
Rank 1
Veteran
answered on 04 Feb 2020, 02:54 PM

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" });

0
David
Top achievements
Rank 1
Veteran
answered on 05 Feb 2020, 07:02 PM

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. 

0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 06 Feb 2020, 02:23 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
David
Top achievements
Rank 1
Veteran
answered on 06 Feb 2020, 03:03 PM
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!
0
Lenny
Top achievements
Rank 1
answered on 15 Mar 2021, 08:27 PM
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?
0
Viktor Tachev
Telerik team
answered on 17 Mar 2021, 03:16 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
David
Top achievements
Rank 1
Veteran
Answers by
Alex Hajigeorgieva
Telerik team
David
Top achievements
Rank 1
Veteran
Lenny
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or