Question

我有一个Kendo Grid，我想检测右键单击和左键单击，所以基于这些我做了两件事。我曾经在左边或右边点击从网格获取ID并且工作正常。但是要修复IE11点击问题，我必须将kendo.js更新为2013.2.716版本，之后它会检测到左/右点击，但“右键单击”无法获得所选行ID。以下是我检测左/右点击的代码，PlodId是我网格中的一列：

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

提前谢谢。

Answer 1

我已将点击装订功能更改为'mousedown'并手动选择行（感谢@ drw85的想法），然后就可以了。

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

我认为会发生这种情况，因为右击实际上并没有选择行。您可以通过代码选择它，然后再尝试通过

获取它

var selectedRowData = gridData.dataItem($('.k-grid').find("tr.k-state-selected"));

您应该能够通过事件对象获取点击目标，并通过kendo在其上设置所选属性。

var index = gridData.find(e.delegateTarget).index(); 
var dataItem = gridData.dataSource.view()[index]; 
dataItem.selected();

您可能必须将true传递给所选的函数。

Answer 3

您也可以像这样获得所选行。

$("#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

当您将鼠标悬停在行上并单击任何特定行时，使用.Selectable（）将高亮显示该行，示例代码：

    @(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

在IE 11中，这将起作用

$("#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);
}
}
});

在Kendo Grid中右键单击选中的行

5 个答案: