In my Grid ToolBar, I need the Delete Button

7 posts, 1 answers
  1. David
    David avatar
    26 posts
    Member since:
    Oct 2019

    Posted 31 Jan 2020 Link to this post

         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? 
  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1081 posts

    Posted 04 Feb 2020 Link to this post

    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.
  3. David
    David avatar
    26 posts
    Member since:
    Oct 2019

    Posted 04 Feb 2020 in reply to Alex Hajigeorgieva Link to this post

    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. 

  4. David
    David avatar
    26 posts
    Member since:
    Oct 2019

    Posted 04 Feb 2020 in reply to David Link to this post

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

  5. David
    David avatar
    26 posts
    Member since:
    Oct 2019

    Posted 05 Feb 2020 in reply to Alex Hajigeorgieva Link to this post

    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. 

  6. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1081 posts

    Posted 06 Feb 2020 Link to this post

    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.
  7. David
    David avatar
    26 posts
    Member since:
    Oct 2019

    Posted 06 Feb 2020 in reply to Alex Hajigeorgieva Link to this post

    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!
Back to Top