Groupable disabling click event for button column

[Adam]

I have a grid where the first column is a "Use Selected" button. When the grid first opens, you can click the "Use Selected" button in any row to select a specific file. However, when Groupable is enabled, if you drag a column into the top row in order to re-sort or group the data, the "Use Selected" button column no longer responds to clicks. Does anyone know why this might happen?

The image shows the first column in the grouped format where it doesn't respond to clicks.

[Nikolay Rusev]

Hello Adam,

You might be attaching the event handler to this button to an element which is repainted/recreated when Grid is grouped. 

Can you show us how the click handler is attached?

Regards,
Nikolay Rusev
Telerik

 

 

[Adam]

I simplified a Kendo grid example to show what I want to accomplish. Here is the dojo: http://dojo.telerik.com/UkIW/6

Because I can't dynamically allocate unique ID's for each button that is repeated in the column, I created a CSS class which I appended to all buttons in that column, and bound the click event to that CSS class. When that CSS class recognized that event, it ran a few lines to determine what row was clicked. By rewriting the Kendo example to simulate my code, I found that by changing the way the click event is instantiated, my problem was solved. I changed this first block to the second block, and it worked:

$(".findWindowUseSelected").bind("click", function () {

    var grid = $("#findLinesKGrid").data("kendoGrid");
    var row = $(this).closest("tr"); //gets the row that corresponds to the cell that was clicked
    row.focus();
    var selectedItem = grid.dataItem(grid.select());
    var jsonSelectedRow = JSON.stringify(selectedItem);
    disableGrid();
    saveSgDocId(jsonSelectedRow);
});

Was changed to this:

$("body").bind("click", ".findWindowUseSelected", function () {

    var grid = $("#findLinesKGrid").data("kendoGrid");
    var row = $(this).closest("tr"); //gets the row that corresponds to the cell that was clicked
    row.focus();
    var selectedItem = grid.dataItem(grid.select());
    var jsonSelectedRow = JSON.stringify(selectedItem);
    disableGrid();
    saveSgDocId(jsonSelectedRow);
});

[Adam]

After more testing, that second fix I supplied didn't restrict the click event to the button, despite including the CSS class. Clicking anywhere in the grid fired the event.

This fix appears to work:

​

document.body.onclick = function (e) {
    e = window.event ? event.srcElement : e.target;
    if (e.className && e.className.indexOf('findWindowUseSelected') != -1) alert('hohoho');
};