Kendo-grid change event not firing on row button click

Question

In following code snippet, selectable property is although set, the change event not firing on the kendo-grid.

Even tried with selectable: "row"

function initializeGrid(gridData) {
            $("#kendo-list").empty();
            $("#kendo-list").kendoGrid({
                columns: [
                   { field: "Id", title: ' ', hidden: true },
                   { field: 'Name', title: 'Name' },
                   { field: 'Location', title: 'Location', },
                   {
                       field: '', title: '', template: "<input type='image' class='editButton' src='#='Images/Edit.png'# ' />" +
                                                                      " <input type='image' class='deleteButton' src='#='Images/Delete.png'# ' />"
                   }
                ],
                sortable: true,
                dataSource: vm.setupGridDataSource(gridData.currentPage, gridData.currentPageSize),
                detailTemplate: kendo.template($("#detail-template").html()),
                dataBound: function (e) {
                    $('#kendo-list .editButton').click(function (item) {
                        var id = item.currentTarget.parentElement.parentElement.cells[1].textContent;
                        if (_.isNotNullo(id)) {
                            vm.edit(id);
                        }
                    });

                    $('#kendo-list .deleteButton').click(function (item) {
                        var id = item.currentTarget.parentElement.parentElement.cells[1].textContent;

                        if (_.isNotNullo(id)) {
                            vm.delete(id);
                        }
                    });
                },
                change: function (e) {
                    var selectedItem = getGrid().dataItem(this.select());
                    vm.select(selectedItem);
                },
                detailExpand: function (e) {
                    e.masterRow.addClass('k-state-selected');
                },
                selectable: true,
                pageable: {
                    pageSizes: [10, 20, 50],
                    messages: {
                        itemsPerPage: "",
                        empty: "",
                        display: ""
                    }
                },
            });
        }

On selecting delete icon, the row need to be selected by firing change function. Any idea to fix this?

Kanishka Kanishka · Accepted Answer · 2019-05-11T20:07:54

Issue occurred because of delete icon being added as an . Somehow on input click events kendo-grid change function is not fired.

After changing it to following, it worked.

<img class='deleteButton' src='#='Images/Delete.png'# ' />

Kendo-grid change event not firing on row button click

1 Answers