Get selected row on right mouse click in Kendo Grid - kendo-ui

Question

I have a Kendo Grid and I want to detect the right click and left click, so based on these I do two separate things. I used to get ID from the grid on either left or right click before and was working fine. But to fix an IE11 clicking problem I had to update the kendo.js to 2013.2.716 version and after that it detects left/right click all right but for "Right Click" can't get the selected row Id. The following is my code to detect left/right click and PlodId is a column in my grid:
function LoadMainShiftGrid() {
//For Right Click --> Delete Selected Shift
$("#shiftReport").delegate("tbody>tr", "contextmenu", function (e) {
if (e.which == 3) {
$("#plodDetails").hide();
var gridData = $('#shiftReport').data("kendoGrid");
var selectedRowData = gridData.dataItem($('.k-grid').find("tr.k-state-selected"));
// MY PROBLEM FOR RIGHT CLICK SELECTEDROWDATA COMES TO NULL <<<<
var SelectedPlodId = selectedRowData.PlodId;
}
});
//For Left Click --> Show Plod Detials
$("#shiftReport").delegate("tbody>tr", "click", function (e) {
if (e.which == 1) {
var gridData = $('#shiftReport').data("kendoGrid");
var selectedRowData = gridData.dataItem($('.k-grid').find("tr.k-state-selected"));
var SelectedPlodId = selectedRowData.PlodId;
}
});
}
Thank you in advance.

Answer 1

I've changed the click binding function to 'mousedown' and select the row manually (Thank you #drw85 for the idea) and after that it works fine.
function LoadMainShiftGrid() {
$('#shiftReport').data('kendoGrid').tbody.on('mousedown', function (e) {
//select the clicked row manually; this resolves all problem :D
$('#shiftReport').data("kendoGrid").select(e.target.parentElement);
if (e.which == 3) {
$("#plodDetails").hide();
var gridData = $('#shiftReport').data("kendoGrid");
var selectedRowData = gridData.dataItem($('.k-grid').find("tr.k-state-selected"));
var SelectedPlodId = selectedRowData.PlodId;
}
//For Left Click --> Show Plod Details
if (e.which == 1) {
var gridData = $('#shiftReport').data("kendoGrid");
var selectedRowData = gridData.dataItem($('.k-grid').find("tr.k-state-selected"));
var SelectedPlodId = selectedRowData.PlodId;
}
});
}

Answer 2

I think that happens, because the right click doesn't actually select the row.
You can select it through code, before you try to get it via
var selectedRowData = gridData.dataItem($('.k-grid').find("tr.k-state-selected"));
You should be able to get the click target through the event object and set the selected property on it via kendo.
var index = gridData.find(e.delegateTarget).index();
var dataItem = gridData.dataSource.view()[index];
dataItem.selected();
You might have to pass true to the selected function.

Answer 3

You can also get the selected row like this..
$("#shiftReport").on("mousedown", "tr[role='row']", function (e) {
if (e.which === 3) {
$(this).addClass("k-state-selected");
var gview= $('#shiftReport').data("kendoGrid");
var selectedRow = gview.dataItem($(this));
}
});

Answer 4

Use .Selectable() will high light the row when you hover over rows and click on any particular row, sample code:
#(Html.Kendo().Grid(Model)
.Name("Grid")
.DataSource(datasource => datasource
.Ajax()
.ServerOperation(false)
.PageSize(15)
)
.Sortable()
.Columns(columns =>
{
columns.Bound(model => model.NetworkID);
columns.Bound(model => model.FirstName);
columns.Bound(model => model.LastName);
})
.Filterable()
.Scrollable(s => s.Height(550))
.Pageable()
.Resizable(resize => resize.Columns(true))
.Selectable()
)

Answer 5

In IE 11 this will work
$("#grid").kendoGrid({
change: function(e) {
var selected = this.select();
var selectedDataItems = [];
for (var i = 0; i < selected.length; i++) {
var dataItem = this.dataItem($(selected[i]).closest("tr"));
selectedDataItems.push(dataItem);
}
}
});