How to handle a Kendo UI Grid row double-click event

Question

I have a selectable KendoUI grid in my MVC app. I want to do something when the user double-clicks on the grid.

I don't see a double-click event for the grid.

How may I handle the double-click event when there is none exposed?

Dewberry

Answer 1

Use the standard double click event. The first click will select the grid row, adding a .k-state-selected class to it, and the second click will trigger the double click event.

$("#yourgridname").on("dblclick", "tr.k-state-selected", function () {
    // insert code here
});

Vitus

I am sure that's the way as I googled it a lot, but it doesn't work for me. I don't know what it is I am doing that is wrong. – Dewberry

That's weird, I use that exact same method on a particular project and it works for me. What do you want to do when the user double-clicks the grid? – Vitus

I want to get the data of the row he double-clicked on. It is a selectable grid. I have now removed the double-click event handler and put a Select button there. Please help me by answering this question: #20859263 – Dewberry

Answer 2

You can also use dataBound

dataBound: function (e) {
   var grid = this;
   grid.tbody.find("tr").dblclick(function (e) {
      var dataItem = grid.dataItem(this);
      ...
    });
}

from http://www.telerik.com/forums/double-click-on-grid-row-with-angular

Kennel

This is by far the simplest and cleanest solution I found on the web. Maybe add that dataBound is a Kendo UI grid config. – Jesusitajet

To get this to work I needed to change the second line to const grid = e.sender;. – Estienne

This approach adds an event handler to every tr element. So if you have a thousand rows, you'll end up with a thousand event handlers. Better use a delegated event handler instead of a directly bound event handler. – Garwood

Answer 3

With kendoHelpers you can get the dataItem of the row. https://github.com/salarcode/kendoHelpers

kendoHelpers.grid.eventRowDoubleClick (theGrid, 
    function(dataItem){
        // do stuff with dataItem
    });

It also has eventCellDoubleClick which works on cells.

Pneumoconiosis

Answer 4

Here's another way to handle it:

var grid = $('#myGrid').kendoGrid({
    columnMenu: true,
    filterable: true,
    selectable: true,
    // and many more configuration stuff...
}).data('kendoGrid');

grid.tbody.delegate('tr', 'dblclick', function() {
    var dataItem = grid.dataItem($(this));
    // do whatever you like with the row data...
});

Since v3.0, delegate has been deprecated. You can use on, like so:

grid.tbody.on('dblclick', 'tr', function() {
    var dataItem = grid.dataItem($(this));
    // do whatever you like with the row data...
});

Garwood

This approach worked better for me - the dblclick(function (e) {...}); event handler failed after a row was edited (inline). – Estienne