mouseover or mouseenter or onhover event for Kendo Grid custom button?

Question

The following image shows a small button with a custom edit button on each row of Kendo Grid, I implemented the button using the below code.

command: [{
 name: "MyEdit",
 click: myFunction,
 template: "<a id= 'myEdit' class='k-grid-MyEdit k-button'><span class='k-icon k-i-edit'></span></a>"
         }]


function myFunction(e) {
       var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
}

The custom button click event works fine but my requirement is - "onmouseover" , "mouseenter" or "onhover" event for this button. I tried googling and found no other events apart from click event. I need inbuilt command button event only, like "click" is this example.

please suggest me a solution or correct me if something's wrong in my implementation.

Answer 1

Kendo doesn't provides any other event type but click. You need to bind it yourself. That is easy, just bind the events to the grid's element filtering by the button class:

$(grid.element).on("mouseover mouseenter", ".k-grid-MyEdit", function(e) {
    console.log("Button event type: ", e.type);
    $(this).click();
});

Demo.