Grid delete confirmation using Kendo Dialog

[Mike]

I have managed to get my Kendo Dialog working properly with the grid however I cannot figure out the proper JQuery code to have it delete the record on confirmation.

 

Here is the my grid and dialog:

@(Html.Kendo().Grid<OrderStatusModel>()

              .Name("grd_OrderStatus")

              .Columns(columns =>

              {

                  columns.Command(command =>

                  {

                      command.Edit()

                          .Text(" ")

                          .HtmlAttributes(new {style = "width:40%"});

                      command.Custom("Destroy")

                          .IconClass("k-icon k-i-close")

                          .Click("showDeleteConfirmation")

                          .Text(" ")

                          .HtmlAttributes(new {style = "width:40%"});

                  }).Width("15%");

                  columns.Bound(p => p.OrderStatusId).Hidden(controller.IsLoggedInUserRootAdmin != true).Width("15%").Title("ID");

                  columns.Bound(p => p.Description).Width("70%");

              })

              .ToolBar(toolbar => toolbar.ClientTemplateId("GridToolbarTemplate"))

              .Editable(editable => editable.DisplayDeleteConfirmation(false)

                  .Mode(GridEditMode.PopUp))

              .HtmlAttributes(new {style = "height: 100%;"})

              .Scrollable()

              .Sortable()

              .Pageable(pageable => pageable

                  .Refresh(true)

                  .PageSizes(true)

                  .ButtonCount(5))

              .AutoBind(controller.IsLoggedInUserRootAdmin != true)

              .DataSource(dataSource => dataSource

                  .Ajax()

                  .Read(read => read.Action("OrderStatus_Read", "OrderStatus", new {area = "OrderPad"}).Data("GetSelectedClientID"))

                  .Create(update => update.Action("OrderStatus_Create", "OrderStatus", new {area = "OrderPad"}).Data("GetSelectedClientID"))

                  .Update(update => update.Action("OrderStatus_Update", "OrderStatus", new {area = "OrderPad"}).Data("GetSelectedClientID"))

                  .Destroy(update => update.Action("OrderStatus_Destroy", "OrderStatus", new {area = "OrderPad"}))

                  .Events(events => events.Error("error_handler"))

                  .Model(model => model.Id(p => p.OrderStatusId))

 

              ))

 

@(Html.Kendo()

      .Dialog()

      .Name("dlg_DeleteConfirmation")

      .Modal(true)

      .Title("Confirm Delete")

      .Content("Are you sure you want to delete this Order Status?")

      .Visible(false)

      .Actions(a =>

      {

          a.Add().Text("No").Action("cancelDelete");

          a.Add().Text("Yes").Action("confirmDelete").Primary(true);

      })

      )

 

And here is my confirmDelete script, this is one of a dozen different pieces of code I have found scattered across the internet related to this topic however none of them work.

 

function confirmDelete(e) {
    var grid = $("#grd_OrderStatus").data("kendoGrid");
    var tr = $(e.currentTarget).closest("tr");
    var data = grid.dataItem(tr);
    grid.dataSource.remove(data);  //prepare a "destroy" request
    grid.dataSource.sync();
    $('#dlg_DeleteConfirmation').data("kendoDialog").close();
}

 

Any suggestions on how to get this to work?

 

Thanks

M

 

[Mike]

Submitted Support Ticket

[Georgi]

Hi Mike,

Since I have answered the query in the support ticket, I will paste the answer here as well in case someone else finds it helpful.

================================

Currently the item is not deleted as the event parameter of the confirm button action does not contain a currentTarget property and thus the $(e.currentTarget).closest("tr") will return no elements. The event parameter has only one property, sender - a reference to the dialog widget instance.

I can suggest you to save a reference to the edited model in a global variable when the delete command is clicked and then use the global variable within the confirm action.

e.g.

var modelToDelete;

function showDeleteConfirmation(e){
   var grid = $("#grd_OrderStatus").data("kendoGrid");
   modelToDelete = grid.dataItem($(e.target).parents('tr'));
   dialog.open();

  ...
}

function confirmDelete(e) {
    var grid = $("#grd_OrderStatus").data("kendoGrid");
    var tr = $(e.currentTarget).closest("tr");
    grid.dataSource.remove(modelToDelete );  //prepare a "destroy" request
    grid.dataSource.sync();
    $('#dlg_DeleteConfirmation').data("kendoDialog").close();
}

Regards,
Georgi
Progress Telerik