Trigger event on clicking both on checkbox or row in kendo UI grid

0
votes

My kendo grid looks like:

enter image description here

I have change/dataBound methods used to both check the box and highlight selected row:

change: function (e) {
    $('tr').find('[type=checkbox]').prop('checked', false).removeAttr('aria-selected');
    $('tr.k-state-selected').find('[type=checkbox]').prop('checked', true);                 
},
dataBound: function (e) {
    $(".checkbox").bind("click", function (e) {
        $(e.target).closest("tr").toggleClass("k-state-selected");
    });
},

I need to get data when one row is selected, and I can do it in change method by extracting dataItem from selected row. Problem is, change method is triggered only when I click on whole row, but not when I click on checkbox. How can I trigger event on both clicking on checkbox or row?

1
angularjskendo-uikendo-gridmultiple-select

1 Answers

0
votes

If you just need to get the dataitem for the row when the checkbox is clicked you should be able use something like this: 

dataBound: function (e) {
    $(".checkbox").bind("click", function (e) {
        $(e.target).closest("tr").toggleClass("k-state-selected");
        var myItem = grid.dataItem($(this).closest("tr"));
    });
},

// might need to update the reference to grid for your grid instance

Very close to the method used to get the data item in a custom command http://demos.telerik.com/kendo-ui/grid/custom-command