getting the click event in a kendo grid

问题:

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.

回答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.

回答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.

回答3:

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);