detecting the click event of a button in a grid

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 contacting Infragistics!

I have done some looking into this matter and I recommend wiring up the click event in the input button itself, like the following:

<input type="button" id="btn1" value="Test 3" onclick="todoMethod(${ProductID})" />

function todoMethod(ID) {
//code
}

 

As you can see in my example you can even pass in values from row of the grid that the template input is from.

If you read my message you'll see that i had already tried that and it worked ok, but id prefer to use an event listener.  Why wont it work that way ?

Hello Mark,

Thank you for the update. The click event only attached to one element when you use “#” selector by id, as ids should be unique. Instead if you want to setup using the listener you should select the elements based on class, for example:

<input type=”button” class=”button” value=”Test”  />

$(“.button”).click(function(){
alert(“test”);
});

http://stackoverflow.com/questions/24446734/jquery-click-not-working-multiple-button

igGrid_Template

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 ?

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%");

Hello Mark,

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

 

your code snippet just doesnt work, the grid is fully rendered but iggridrenderd is never fired

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