Add jQuery click event to button in KendoUI grid column template

Question

So, I have something working for this, but unfortunately it requires onclick in the column template to handle that specific row in my KendoUI grid. I'd like to replace this with a jQuery click event for maintainability purposes. One of the tricky thing is that this event requires the Id of the row where the button was clicked, but right now I'm more interested in getting to that event's code.

Here's a sample of what I have so far:

Column Template

// columns is a Kendo.Mvc.UI.Fluent.GridColumnFactory of
// the type of the object I'm mapping to it

columns.Bound(p => p.SomeField).ClientTemplate(
    "<button type='button' class='btn btn-somefield'" + 
          "onclick='javascript:SomeAction(this, #=Id#);>" +
          "Some Button" +
    "</button>"
);

JavaScript Function

function SomeAction(el, id){
    var reqUrl = 'someUrl' + '?id=' + id;

    $.ajax({
        type: 'GET',
        url: reqUrl,
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (content) {
            console.log('request successful for id: ' + id);
        }
    });
}

What I have for the jQuery implementation:

Column Template

columns.Bound(p => p.SomeField).ClientTemplate(
    "<button type='button' class='btn btn-somefield'>" +
          "Some Button" +
    "</button>"
);

jQuery Function

$('.btn-somefield').on('click', function(){
    // Here I have some unfinished code to get the Id and everything.
    // I'm not too concerned about figuring this out in this question, 
    // but suggestions are welcome

    // Otherwise it's the same body as the plain JS function
});

To sum it up: right now that jQuery event just isn't getting hit when the button is clicked. I have tried numerous different iterations along the lines of things like this: $(selector).on('click', function(){}); and $(selector).click(function(){}); but with no success.

I am concerned about how to pull out that row's Id once I actually get to the event handler, but right now I just need to hit the event after clicking the button.

(Also, the overall project is an asp.net mvc application if that makes any difference to anybody.)

When is your jQuery function being called? If it is happening before your column contents are rendered then it won't find the buttons to attach to. — J. Schmale, Nov 15 '19 at 18:32
@J.Schmale It's defined inside a `$(document).ready(function(){ });` block. Otherwise it's just a regular click event. — Dortimer, Nov 15 '19 at 18:37
Maybe attach your onclick event in the databound event of the grid. This article shows an example of that: https://stackoverflow.com/questions/58881754/cell-click-event-only-happens-once-in-kendo-ui-grid — J. Schmale, Nov 15 '19 at 19:09
Add a data-id attribute to your template: https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute — Steve Greene, Nov 15 '19 at 20:40

score 4 · Accepted Answer · answered Nov 15 '19 at 21:58

Try using jQuery event delegation. This allows you to create the event handler before the grid buttons are generated. Then to get the ID, you can get the dataItem for the grid row using the dataItem() method:

$(document).on('click', '.btn-somefield', function(e){
  var grid = $("#grid").data("kendoGrid");
  var dataItem = grid.dataItem($(this).closest('tr'));
  var ID = dataItem.Id;
});

Add jQuery click event to button in KendoUI grid column template

1 Answers1