Recently I’ve been working more and more with the Kendo UI components.
For those that don’t know, Kendo UI is a collection of HTML 5 controls from the wizards at Telerik.
As with most controls, especially new ones like Kendo. You find the demos look great and everything seems awesome, but when using in the real world you hit hurdles that are just not covered.
And that is where I find myself. I have a grid, with a custom command button, I also have row selection enabled. I want to run separate commands on row select and the button, but Kendo UI will always execute the row select command (grid change event), even if you are hitting a command button. I’m sure in some cases that will be fine, but it’s not ideal for me.
So after a some poking around I found this answer on stackoverflow.
As mentioned in the above link, this is not supported by the control as yet, so the answer as per that post is to tweak around with the CSS and javascript. It’s not the most elegant of solutions, but this is javascript, anything is possible … elegance sometimes takes a back seat!
Command column definition:
Setting the class to actions being key here!
...
selectable: "row",
change: onRowSelect,
columns: [
{
command: [{
name: "Edit", click: function (e) {
console.log("edit clicked");
e.preventDefault();
var item = this.dataItem($(e.currentTarget).closest("tr"));
// Remove row selected class
$(e.currentTarget).closest("tr").removeClass("k-state-selected");
// Do something...
}
}], title: " ", width: "50px", attributes: { "class": "actions" }
},
...
Change event handler:
Taken from stackoverflow
function onRowSelect(arg) {
var eventTarget = (event.target) ? $(event.target) : $(event.srcElement);
var isAction = eventTarget.parent().hasClass('actions');
if (isAction) {
console.log("Command button hit");
return;
}
// Do what you want for row select
....