How to inject JavaScript in MVC3 Grid?

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.

Rory McCrossan · Accepted Answer · 2012-02-04 15:01:52Z

2

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

edited Feb 4, 2012 at 15:01

answered Feb 4, 2012 at 14:23

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Terminador Over a year ago

Your approach looks good... But I got the following thing: <a href="/Customer/Delete/e633fd53-00b5-4552-9040-1b0fac0d49bd?class=delete-button">Delete</a> Could you please say exactly about @class?

Rory McCrossan Over a year ago

Sorry, my mistake, I put the style attribute in the route value params. I've edited the answer.

Terminador Over a year ago

Hmmm you know the event $(".delete-button"). doesn't fire... Do you know where I have to implement it?

Rory McCrossan Over a year ago

If you're not using jQuery 1.7+ you'll need to use $(".delete-button").click(function() ...

Collectives™ on Stack Overflow

How to inject JavaScript in MVC3 Grid?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related