Question

I have got

@grid.GetHtml(
   tableStyle: "grid",
   headerStyle: "head",
   alternatingRowStyle: "alt",
   rowStyle: "row",
   selectedRowStyle: "selected-row",
   columns: grid.Columns(
   grid.Column("StartDate", "Start Date", style: "column"),
   grid.Column("EndDate", "Endt Date", style: "column"),
   grid.Column("Title", "Title", style: "column"),
   grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.ID }), style: "column-action"),
   grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", new { id = item.ID }), style: "column-action"))

What I want to do is to replace grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", new { id = item.ID }), style: "column-action") with

<button onclick="$.prompt('Delete',{ buttons: { Ok: true, Cancel: false } })" title="Delete">Delete</button>

How I can do it?

P.S. The final goal is to show popup window YES/NO when we click the DELETE button.

Answer 1

If you add a class to the button you can attach an event to it, like this:

C#

grid.Column(format: (item) => Html.ActionLink("Delete", "Delete", new { id = item.ID }, new { @class = "delete-button" }), style: "column-action"))

jQuery 1.7+

$(".delete-button").on('click', function() {
    $.prompt('Delete',{ buttons: { Ok: true, Cancel: false } })
});

< jQuery 1.7

$(".delete-button").click(function() {
    $.prompt('Delete',{ buttons: { Ok: true, Cancel: false } })
});