Kendo Grid Key回车键事件处理
Kendo Grid Key enter key press event handling
我有一个 Kendo grid.I 想要处理回车键 event.If 用户在 Kendo cell.it 内按下回车键必须聚焦并且将下一个单元格置于编辑模式。(光标应移动到下一个网格单元格)。
我试过这段代码
$("#list").on("focus", "td", function (e) {
$("input").on("keydown", function (event) {
if (event.keyCode == 13) {
setTimeout(function () {
var curCell = $("#list").find(".k-state-selected")
var eCell = $("#list").find(".k-edit-cell")
curCell.removeClass("k-state-selected");
curCell.removeClass("k-state-focused");
curCell.removeAttr("data-role");
curCell.next().addClass("k-state-selected");
curCell.next().addClass("k-state-focused");
try { $('#list').data('kendoGrid').closeCell(eCell);
} catch (ex) {
}
$('#list').data('kendoGrid').select();
$('#list').data('kendoGrid').editCell(curCell.next());
}, 50);
}
});
});
}
或者有什么方法可以用 enter 键覆盖 tab 键功能(因为 tab 键可以正常工作)
请尝试使用以下代码片段。
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" />
<script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
<div id="list"></div>
<script>
$(document).ready(function () {
function onDataBound(e) {
$("#list").on("focus", "td", function (e) {
$("input").on("keydown", function (event) {
if (event.keyCode == 13) {
setTimeout(function () {
var curCell = $("#list").find(".k-state-selected")
var eCell = $("#list").find(".k-edit-cell")
curCell.removeClass("k-state-selected");
curCell.removeClass("k-state-focused");
curCell.removeAttr("data-role");
curCell.next().addClass("k-state-selected");
curCell.next().addClass("k-state-focused");
try {
$('#list').data('kendoGrid').closeCell(eCell);
} catch (ex) {
}
$('#list').data('kendoGrid').select(); $('#list').data('kendoGrid').editCell(curCell.next());
if ($(curCell.next()).find('select')) {
$($(curCell.next()).find('select')).data("kendoDropDownList").open()
}
}, 50);
}
});
});
}
var savings = [{
month: "January",
saving: "0",
kind: 1
}, {
month: "March",
saving: "0",
kind: 1
}, {
month: "March sdjhf as dfjh;as",
saving: "0",
kind: 1
}, {
month: "March",
saving: "0",
kind: 1
}, {
month: "March",
saving: "000",
kind: 1
}, {
month: "December",
saving: "0",
kind: 1
}, {
month: "March",
saving: "0",
kind: 1
}, {
month: "March",
saving: "0",
kind: 2
}, {
month: "March",
saving: "0",
kind: 3
}, {
month: "March",
saving: "0",
kind: 1
}];
var savingsDataSource = new kendo.data.DataSource({
data: savings
});
var grid = $("#list").kendoGrid({
dataSource: savingsDataSource,
navigatable: true,
pageable: true,
height: 400,
selectable: "cell",
toolbar: ["create", "save", "cancel"],
columns: [{
field: "month",
title: "Month"
}, {
field: "saving"
}, {
field: "saving"
}, {
field: "kind",
values: [{
value: 1,
text: "Kind1"
}, {
value: 2,
text: "Kind2"
}, {
value: 3,
text: "Kind3"
}]
}],
editable: true,
dataBound: onDataBound,
}).data("kendoGrid");
var specialKeys = [kendo.keys.UP, kendo.keys.DOWN];
function edit(e) {
//$("#list").find(".k-state-selected").focus();
//e.container.find("td:eq(1) input").focus();
}
});
</script>
</body>
</html>
如有任何疑问,请告诉我。
$("#GridID").keypress(function (e) {
if (e.keyCode === 13) {
e.preventDefault();
}
});
参考运行代码:
https://www.telerik.com/forums/how-to-prevent-kendo-validation-on-pressing-enter-key
我有一个 Kendo grid.I 想要处理回车键 event.If 用户在 Kendo cell.it 内按下回车键必须聚焦并且将下一个单元格置于编辑模式。(光标应移动到下一个网格单元格)。 我试过这段代码
$("#list").on("focus", "td", function (e) {
$("input").on("keydown", function (event) {
if (event.keyCode == 13) {
setTimeout(function () {
var curCell = $("#list").find(".k-state-selected")
var eCell = $("#list").find(".k-edit-cell")
curCell.removeClass("k-state-selected");
curCell.removeClass("k-state-focused");
curCell.removeAttr("data-role");
curCell.next().addClass("k-state-selected");
curCell.next().addClass("k-state-focused");
try { $('#list').data('kendoGrid').closeCell(eCell);
} catch (ex) {
}
$('#list').data('kendoGrid').select();
$('#list').data('kendoGrid').editCell(curCell.next());
}, 50);
}
});
});
}
或者有什么方法可以用 enter 键覆盖 tab 键功能(因为 tab 键可以正常工作)
请尝试使用以下代码片段。
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.902/styles/kendo.bootstrap.min.css" />
<script src="https://kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
<div id="list"></div>
<script>
$(document).ready(function () {
function onDataBound(e) {
$("#list").on("focus", "td", function (e) {
$("input").on("keydown", function (event) {
if (event.keyCode == 13) {
setTimeout(function () {
var curCell = $("#list").find(".k-state-selected")
var eCell = $("#list").find(".k-edit-cell")
curCell.removeClass("k-state-selected");
curCell.removeClass("k-state-focused");
curCell.removeAttr("data-role");
curCell.next().addClass("k-state-selected");
curCell.next().addClass("k-state-focused");
try {
$('#list').data('kendoGrid').closeCell(eCell);
} catch (ex) {
}
$('#list').data('kendoGrid').select(); $('#list').data('kendoGrid').editCell(curCell.next());
if ($(curCell.next()).find('select')) {
$($(curCell.next()).find('select')).data("kendoDropDownList").open()
}
}, 50);
}
});
});
}
var savings = [{
month: "January",
saving: "0",
kind: 1
}, {
month: "March",
saving: "0",
kind: 1
}, {
month: "March sdjhf as dfjh;as",
saving: "0",
kind: 1
}, {
month: "March",
saving: "0",
kind: 1
}, {
month: "March",
saving: "000",
kind: 1
}, {
month: "December",
saving: "0",
kind: 1
}, {
month: "March",
saving: "0",
kind: 1
}, {
month: "March",
saving: "0",
kind: 2
}, {
month: "March",
saving: "0",
kind: 3
}, {
month: "March",
saving: "0",
kind: 1
}];
var savingsDataSource = new kendo.data.DataSource({
data: savings
});
var grid = $("#list").kendoGrid({
dataSource: savingsDataSource,
navigatable: true,
pageable: true,
height: 400,
selectable: "cell",
toolbar: ["create", "save", "cancel"],
columns: [{
field: "month",
title: "Month"
}, {
field: "saving"
}, {
field: "saving"
}, {
field: "kind",
values: [{
value: 1,
text: "Kind1"
}, {
value: 2,
text: "Kind2"
}, {
value: 3,
text: "Kind3"
}]
}],
editable: true,
dataBound: onDataBound,
}).data("kendoGrid");
var specialKeys = [kendo.keys.UP, kendo.keys.DOWN];
function edit(e) {
//$("#list").find(".k-state-selected").focus();
//e.container.find("td:eq(1) input").focus();
}
});
</script>
</body>
</html>
如有任何疑问,请告诉我。
$("#GridID").keypress(function (e) {
if (e.keyCode === 13) {
e.preventDefault();
}
});
参考运行代码:
https://www.telerik.com/forums/how-to-prevent-kendo-validation-on-pressing-enter-key