How to add a delete button to editor template Grid Popup?

[Sean]

Hello all,

I have a kendo window delete confirmation box I created.  The delete gets called on the click event of a button.   I want to add this button beside the usual buttons that come up in the editor template grid popup automatically  such as update cancel etc?   I tried adding the following to the template itself:


<a class="k-button k-button-icontext k-grid-update" href="\\#"><span class="k-icon k-update"></span>Update</a>
<a class="k-button k-button-icontext k-grid-delete" href="\\#"><span class="k-icon k-delete"></span>Delete</a>
<a class="k-button k-button-icontext k-grid-cancel" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>

But the other buttons still show up above these when I do that.   In the grid I have:

.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("CustomerTemplate").Window(w => w.Title("Customer Detail").Name("editWindow").Width(850).Height(565)))

[Iliana Dyankova]

Hi Sean,

In order to add a Delete button in the Grid's PopUp window you could hook up to the Edit event and insertAfter() the cancel button. As an example: 

@(Html.Kendo().Grid//....
  //....
 .Events(ev=>ev.Edit("addDeleteButton"))
)

function addDeleteButton() {
    $('<a class="k-button k-button-icontext k-grid-delete" href="\\#"><span class="k-icon k-delete"></span>Delete</a>').insertAfter(".k-grid-cancel");
}

Let me know if this fits your requirements.

Regards,

Iliana Nikolova
the Telerik team

[Sean]

Perfect thank you..

[Sean]

Iliana if I can just follow up with one more question.  So this works and adds the delete button for me.  So what I want to do is call a jquery click event on the click of that button.  In the main view I have the following below.  So when the editor template is called how do I all that delete button as what I have now does not get into the click for the alert.  There may be a better way then calling the form submit but this is what I do now for a few other delete buttons.  Essentially I want to call a action result passing the editor template model id field.    I have this:

$('<a class="delete-button k-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>').insertAfter(".k-grid-update");

$(".delete-button").click(function(e) {
e.preventDefault();
alert('got this');
var kendoWindow = $("<div />").kendoWindow({
title: "Confirm",
resizable: false,
modal: true
});

kendoWindow.data("kendoWindow")
.content($("#delete-confirmation").html())
.center().open();

kendoWindow
.find(".delete-confirm,.delete-cancel")
.click(function() {
if ($(this).hasClass("delete-confirm")) {
$('<input />').attr('type', 'hidden')
.attr('name', 'cmdName')
.attr('value', 'Delete')
.appendTo('#LoanForm');

$("#LoanForm").submit();
}

kendoWindow.data("kendoWindow").close();
})
.end();
});

[Sean]

I added what you have and added the destroy event but it's not working.  I get jquery errors etc.  I did the following:

On the grid:

Added:
.Destroy(destroy => destroy.Action("Collateral_Destroy", "Loan"))

Then I added in the edit event JQuery:
$('<a class="k-button k-button-icontext k-grid-delete" href="\\#"><span class="k-icon k-delete"></span>Delete</a>').insertAfter(".k-grid-update");

The Collateral_Destroy action in the controller never gets hit.

[Iliana Dyankova]

Hi Sean,

In order to achieve the desired behavior you could use the Grid's removeRow() method. As an example: 

function addDeleteButton(e) {
   var grid = e.sender;
   var table = grid.table;
   var uid = e.model.uid;
   $('<a class="k-button k-button-icontext k-grid-delete custom" href="\\#"><span class="k-icon k-delete"></span>Delete</a>').insertAfter(".k-grid-update");
   $(".custom").click(function ( e) {
       e.preventDefault();
       var elem = $(table).find("tr[data-uid='" + uid + "']");
       grid.removeRow(elem);
   });
}

Regards,

Iliana Nikolova
the Telerik team