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 wele

    // 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 mvc application if that makes any difference to anybody.)

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 wele

    // 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 mvc application if that makes any difference to anybody.)

• javascript
• jquery
• html
• asp-mvc
• kendo-ui

• 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 Commented Nov 15, 2019 at 18:32
• @J.Schmale It's defined inside a $(document).ready(function(){ }); block. Otherwise it's just a regular click event. – Dortimer Commented Nov 15, 2019 at 18:37
• Can you create a dojo of your implementation and share? – Manprit Singh Sahota Commented Nov 15, 2019 at 18:48
• Maybe attach your onclick event in the databound event of the grid. This article shows an example of that: stackoverflow./questions/58881754/… – J. Schmale Commented Nov 15, 2019 at 19:09
• Add a data-id attribute to your template: stackoverflow./questions/5309926/… – Steve Greene Commented Nov 15, 2019 at 20:40

1 Answer 1

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