Delete Row in deleteRow(e) event

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

    Posted 16 Jun 2016 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
    1733 posts

    Posted 20 Jun 2016 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. Robert Madrian
    Robert Madrian avatar
    155 posts
    Member since:
    Apr 2003

    Posted 20 Jun 2016 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);
     
                    }                  
                });
        }

  4. Kostadin
    Admin
    Kostadin avatar
    1733 posts

    Posted 22 Jun 2016 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
  5. Robert Madrian
    Robert Madrian avatar
    155 posts
    Member since:
    Apr 2003

    Posted 22 Jun 2016 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);
     
                    }                  
                });
        }

  6. Robert Madrian
    Robert Madrian avatar
    155 posts
    Member since:
    Apr 2003

    Posted 22 Jun 2016 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"))
    )
  7. Answer
    Kostadin
    Admin
    Kostadin avatar
    1733 posts

    Posted 24 Jun 2016 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