how do you detect the click event of a button in a grid row ?
I have this
column.Unbound("Delete").Width("4%").Template("<button id='deleteSite' type='button' class='btn btn-danger btn-xs' title='Delete'><i class='fa fa-remove'></i></button>").HeaderText("");
then this (just as a test)
$(document).ready(function () { $("#deleteSite").click( function() { alert('delete button clicked'); } ); });
but the code is never executed, If I specifiy an onclick in the buton definition, it works, but id prefer to detect it with an event listener
Hello Mark,
Thank you for the update. It sounds like you are not wrapping your event in a $(function () { }); so they fire at the proper time. I am attaching a sample demonstrating this behavior. Note that the CSS and JavaScript references are in the Views/Shared/_Layout.cshtml if you need to change them. You can also instead use the AddClientEvent MVC helper to add the client side rendered event to the grid if you prefer:
https://www.igniteui.com/help/defining-events-with-aspnet-helper
your code snippet just doesnt work, the grid is fully rendered but iggridrenderd is never fired
Thank you for the update. The reason that code isn’t working for you is because when you are running it the grid hasn’t finished rendering yet so those buttons don’t exist. I recommend you setup the click event of the button in the rendered event of the igGrid:
https://www.igniteui.com/help/api/2016.2/ui.iggrid#events:rendered
http://api.jquery.com/on/
$("#grid1").on("iggridrendered", function () { var buttons = $(".btn"); $(".btn").on("click", function () { alert("test"); }); });
Or
$("#grid1").on("iggridrendered", function () { var buttons = $(".btn"); $(".btn").click( function () { alert("test"); }); });
this is how Ive defined it in the grid using the mvc helper
column.Unbound("Meters").Width("5%").Template("<button id='meters' type='button' class='btn btn-primary btn-xs' title='Contract Meters'><i class='fa fa-gears'></i></button>").HeaderText("").Width("5%");
as usual your suggestion just doesnt work, If I put this button in the grid, the onclick event isnt fired, If I place it outside the grid, it does. heres my button
<button id='meters' type='button' class='btn btn-primary btn-xs' title='Contract Meters'><i class='fa fa-gears'></i></button>
and my event listener
$(".btn").click(function (e) { e.preventDefault(); alert(this.id); });
so why wont this actually work when its placed inside your grid control ?