How to add JavaScript to MVC3 Grid?

Question

I have

@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 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 can i do this?

PS The ultimate goal is to show the YES / NO popup when we press the DELETE button.

Answer 1

If you add a class to a button, you can attach an event to it, for example:

WITH#

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