getting the click event in a kendo grid

Question

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.

Solution 1

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.

Solution 2

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.

Comments

[t1nr2y]

Thanks so much for this! It was what I needed for my project, and it is clear and readable for future developers.