Custom command does not automatically select row

[Dan]

I have an application where I use TreeList and Grid. On both of them we have used Selectable and we have a custom command. On the TreeList if you press the custom command the full row is selected. Now we want to have the same functionality on the Grid but can not find why on the TreeList it works and not on Grid.

After further investigation I have found that the reason is because the treelist generates buttons ("<button>") while the grid generates links("<a>").

I have around 30 pages with grids with variable number of custom commands on them, with the possibility for more pages to be developed. How can I make the row selection functionality automatically on any page with grids like the TreeList.

[Tsvetina]

Hi Dan,

In the Grid, selection is intentionally not performed on command (or custom button click), as more often than not, customers want selection to not be triggered on click of a button in the row. If you want a common solution that would require minimal changes in your current code, you can add an event handler to each page containing Grids, which listens for a click inside a command button. When such is performed, use generic code to find the parent row of the button and select it:

$(document).ready(function () {
  // attach the click event handler on a container that is a parent to all Grids in the page
  $("#example").on("click", ".k-command-cell", function(e){
    var row = $(e.target).closest("tr");
    var grid = row.closest(".k-grid").data("kendoGrid");
    grid.select(row);
  });
});

Here is a client-side example where you can test the result.
https://dojo.telerik.com/IyItuCAv

The same code will produce the same result in the MVC Grid.

Regards,
Tsvetina
Progress Telerik

[Dan]

Hi Tsvetina,

I already implemented a similar solution but not related with a specific grid but with any grid. So basically this is function as design.

Thank you for the response