Delete Row in deleteRow(e) event

7 posts, 1 answers
  1. Robert Madrian
    Robert Madrian avatar
    96 posts
    Member since:
    Apr 2003

    Posted 16 Jun Link to this post

    Hello,

    I have the following grid with a deleteRow event where I want to use my own conformation (sweetalert). In the event I first cancel the delete operation and then ask the user if he will delete the row or not.

    Which code is necessary to delete the current row with Javascript/jQuery (line 19. in the code)?

    01.function deleteRow(e) {
    02. 
    03.       $("#grid").data("kendoGrid").cancelChanges();
    04. 
    05.       swal({
    06.           title: "Löschen",
    07.           text: "Sind Sie sich sicher, dass Sie den aktuellen Datensatz löschen wollen?",
    08.           type: "warning",
    09.           showCancelButton: true,
    10.           confirmButtonColor: "#DD6B55",
    11.           confirmButtonText: "OK",
    12.           cancelButtonText: "Abbrechen",
    13.           closeOnConfirm: true,
    14.           closeOnCancel: true
    15.       },
    16.           function (isConfirm) {
    17.               if (isConfirm) {
    18.                   
    19. 
    20. 
    21.               }                  
    22.           });
    23.   }

  2. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 20 Jun Link to this post

    Hi Robert,

    You can remove a grid row by using removeRow method of the grid and pass a jQuery object or a DOM element that represent the table row.

    Regards,
    Kostadin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Robert Madrian
    Robert Madrian avatar
    96 posts
    Member since:
    Apr 2003

    Posted 20 Jun in reply to Kostadin Link to this post

    I use the following code but it does'nt work - what I'm doing wrong?

    function deleteRow(e) {
     
            $("#grid").data("kendoGrid").cancelChanges();
     
            swal({
                title: "Löschen",
                text: "Sind Sie sich sicher, dass Sie den aktuellen Datensatz löschen wollen?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "OK",
                cancelButtonText: "Abbrechen",
                closeOnConfirm: true,
                closeOnCancel: true
            },
                function (isConfirm) {
                    if (isConfirm) {
                        
                        var tr = $(e.target).closest("tr"); //get the row for deletion
                        var data = $("#grid").data("kendoGrid").dataItem(tr);
                        var grid = $("#grid").data("kendoGrid");
                        grid.removeRow(data);
     
                    }                  
                });
        }

  5. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 22 Jun Link to this post

    Hello Robert,

    Thank you for contacting us.

    Please note that you need to pass a jQuery object or a DOM element and not the DataItem. Please try using the following approach.
    var tr = $(e.target).closest("tr");
    grid.removeRow(tr);

    I hope this information helps.


    Regards,
    Kostadin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Robert Madrian
    Robert Madrian avatar
    96 posts
    Member since:
    Apr 2003

    Posted 22 Jun in reply to Kostadin Link to this post

    Hi,

    it doesn't work because it seems that using "cancelChanges()" in the deleteRow event prevents a delete (see code below)

    what I want to do is cancel the delete of a row in the deleteRow(e) event and use my own confirmation dialog (sweetalert). if the user
    clicks "OK" I want to delete the current row - isn't this possible?

    why does cancelChanges prevent me from deleting the current row?

    function deleteRow(e) {
     
            $("#grid").data("kendoGrid").cancelChanges();
     
            swal({
                title: "Löschen",
                text: "Sind Sie sich sicher, dass Sie den aktuellen Datensatz löschen wollen?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "OK",
                cancelButtonText: "Abbrechen",
                closeOnConfirm: true,
                closeOnCancel: true
            },
                function (isConfirm) {
                    if (isConfirm) {                  
      
                        var grid = $("#grid").data("kendoGrid");
                        var tr = $(e.target).closest("tr");
                        grid.removeRow(tr);
     
                    }                  
                });
        }

  7. Robert Madrian
    Robert Madrian avatar
    96 posts
    Member since:
    Apr 2003

    Posted 22 Jun in reply to Robert Madrian Link to this post

    here is my Grid
    @(Html.Kendo().Grid<GPDBTest.Models.SELECT_Anrede>()
                              .Name("grid")
                              .Columns(columns =>
                              {
                                  columns.Command(command => { command.Edit().Text(" ").CancelText("Abbrechen").UpdateText("Speichern"); }).Width(95);
                                  columns.Command(command => { command.Custom("cmdloeschen").Click("loeschen").Text("Löschen"); }).Width(85);
                                  columns.Bound(p => p.Anrede_ID).Filterable(false).Width(100);
                                  columns.Bound(p => p.Anrede);
                                  columns.Bound(p => p.angelegt).Format("{0:dd.MM.yyyy}").Width(110);
                                  columns.Bound(p => p.geändert).Format("{0:dd.MM.yyyy}").Width(110);
                                  columns.Bound(p => p.Benutzer).Width(100);
                                  columns.Command(command => { command.Destroy().Text(" "); }).Width(45);
                              })
                              .ToolBar(toolbar => toolbar.Create())
                              .Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation(false))
                              .Sortable()
                              .Resizable(resize => resize.Columns(true))
                              .Scrollable(s => s.Height("100%"))
                              .DataSource(dataSource => dataSource
                                  .Ajax()
                                  .PageSize(0)
                                  .Model(model => model.Id(p => p.RowVersion))
                                  .Create(create => create.Action("Anrede_Create", "Anrede"))
                                  .Read(read => read.Action("Anrede_Read", "Anrede"))
                                  .Update(update => update.Action("Anrede_Update", "Anrede"))
                                  .Destroy(update => update.Action("Anrede_Destroy", "Anrede"))
                              )
                              .Events(e => e.Remove("deleteRow"))
    )
  8. Answer
    Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 24 Jun Link to this post

    Hello Robert,

    In order to achieve your requirement I would recommend you to use a Custom command to delete the record. I prepared a small runnable sample where you can see how to implement a custom delete.

    Regards,
    Kostadin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready