Delete Row in deleteRow(e) event

[Robert Madrian]

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.   }

[Kostadin]

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

[Robert Madrian]

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

                }
            });
    }

[Kostadin]

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

[Robert Madrian]

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

                }
            });
    }

[Robert Madrian]

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

[Kostadin]

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