I'm trying to get the click event for a Kendo Grid so I can bind stuff to shift and ctrl clicking. I can't use the inherent multiselect Kendo provides because it doesn't support drag and drop. When I create a function after the dataBound event, my function gets called on clicking, but it's not the typical click event.

var onDataBound = function () {
    selectItem.apply(this);
}

grid.dataBound = onDataBound;

var selectItem.apply = function (e) {
    console.log(e);
}

Any thoughts? Thanks in advance.

I'm trying to get the click event for a Kendo Grid so I can bind stuff to shift and ctrl clicking. I can't use the inherent multiselect Kendo provides because it doesn't support drag and drop. When I create a function after the dataBound event, my function gets called on clicking, but it's not the typical click event.

var onDataBound = function () {
    selectItem.apply(this);
}

grid.dataBound = onDataBound;

var selectItem.apply = function (e) {
    console.log(e);
}

Any thoughts? Thanks in advance.

• javascript
• html
• jquery
• kendo-ui
• kendo-grid

4 Answers 4

After initializing the Grid you should bind a handler to the click event.

Example:

$("#grid").on("click", "table", function(e) {
    console.log("clicked", e.ctrlKey, e.altKey, e.shiftKey);
});

You can use:

• e.ctrlKey for detecting if ctrl is pressed.
• e.altKey for detecting if alt is pressed.
• e.shiftKey for detecting if shift is pressed.

If you want to detect click only in the body of the table, you can replace "table" by "tbody" or even "td".

Jsfiddle example.

Use dataBound event when declaring the grid:

grid = $("#grid").kendoGrid({
    ...
    ,dataBound=onDataBound
});

var onDataBound = function(e)
{
    $("#grid").find("tr").click(selectItem.apply);
};

var selectItem.apply = function (e) {
    var dataItem = $("#grid").data("kendoGrid").dataItem(this);
    if(e.ctrlKey)
       alert('Ctrl + click on ' + dataItem.column1);
}

dataItem is your bound data item that you can pass around.

I know this is quite old but I believe none of the solutions covered the fact that the event is being applied on the table headers as well. If you have table filters (order by ascending / descending) for example, this might cause problems. The correct way of adding the click event is targetting the table body, as so:

$("#grid tbody").find("tr").click(addYourFunctionHere);

If you want just stop propagation just call event.stopPropagation() or event.stopImmediatePropagation();

function onRowDelete(dataItem) {
           
    event.stopImmediatePropagation();

    showConfirmation(dataItem);        
}