Kendo ui 在剑道网格中单击鼠标右键获取选定行
我有一个剑道网格,我想检测右击和左击,所以基于这些,我做了两件不同的事情。我以前通过左键或右键单击从网格中获取ID,工作正常。但是为了解决IE11的点击问题,我必须将kendo.js更新到2013.2.716版本,之后它检测到左/右点击OK right But for right click无法获取所选行Id。以下是我检测左/右点击的代码,PlodId是我网格中的一列:Kendo ui 在剑道网格中单击鼠标右键获取选定行,kendo-ui,kendo-grid,Kendo Ui,Kendo Grid,我有一个剑道网格,我想检测右击和左击,所以基于这些,我做了两件不同的事情。我以前通过左键或右键单击从网格中获取ID,工作正常。但是为了解决IE11的点击问题,我必须将kendo.js更新到2013.2.716版本,之后它检测到左/右点击OK right But for right click无法获取所选行Id。以下是我检测左/右点击的代码,PlodId是我网格中的一列: function LoadMainShiftGrid() { //For Right Click --> Delete
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;
}
});
}
提前谢谢。我认为会发生这种情况,因为右键单击实际上并没有选择行。 您可以通过代码选择它,然后再尝试通过
var selectedRowData = gridData.dataItem($('.k-grid').find("tr.k-state-selected"));
您应该能够通过事件对象获得单击目标,并通过剑道在其上设置所选属性
var index = gridData.find(e.delegateTarget).index();
var dataItem = gridData.dataSource.view()[index];
dataItem.selected();
您可能需要将true传递给所选函数。我已将单击绑定函数更改为“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;
}
});
}
Use.Selective将在您将鼠标悬停在行上并单击任何特定行时亮起该行,示例代码:
@(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()
)
您也可以像这样获取所选行
$("#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));
}
});
在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);
}
}
});
如果您可以提供一个带有示例的JSFIDLE,我将再看一看。。谢谢你的帮助。。它在js中不起作用,它说,没有方法“查找”。。但根据你的想法,我想出了解决方案。好吧,用这个解决方案编辑你的问题,这样其他人可以从中学习;我可以知道什么是shiftReport吗?@UserA1195这是一个HTML id,你将在这里连接剑道网格。