Using the products example, I have a 5 column grid. Columns 1 and 2 are frozen​, 3 and 4 are editable, and 5 is not editable.
I have used the onkeypress event to modify the tab behavior so it will only tab in columns 3 and 4, but it will also wrap from the last item in column 4 to the first one in column 3.
What I need to figure out is how to also change the selected cell based on using the arrow keys. The first one I am working on is the UP keypress. While I can detect the UP press, and I'm not sure the best way to get the previous row for the same column.
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/frozen-columns">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function() {
var crudServiceBaseUrl = "http://demos.kendoui.com/service";
var dataSource = new kendo.data.DataSource({
transport: {
read: { url: crudServiceBaseUrl + "/Products", dataType: "jsonp" },
update: { url: crudServiceBaseUrl + "/Products/Update", dataType: "jsonp" },
destroy: { url: crudServiceBaseUrl + "/Products/Destroy", dataType: "jsonp" },
create: { url: crudServiceBaseUrl + "/Products/Create", dataType: "jsonp" },
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 30,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false},
ProductName: { editable: false },
UnitPrice: { editable: true},
UnitsInStock: {editable: true},
Discontinued: { editable: false, type: "boolean" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
editable: true,
scrollable: true,
navigatable: true,
height: 500,
columns: [
{ field: "ProductID", title: "ProductID", locked: true, lockable: false, width:110 },
{ field: "ProductName", title: "Product Name", locked: true, lockable: false, width: 510 },
{ field: "UnitPrice", title: "Unit Price", width: 510, attributes: {class: "editable-cell" } },
{ field: "UnitsInStock", title: "Units In Stock", width: 510, attributes: {class: "editable-cell" } },
{ field: "Discontinued", title: "Discontinued", width: 510 }
]
}).find("table").on("keydown", onGridKeydown);
});
function onGridKeydown(e){
if (e.keyCode === kendo.keys.TAB) {
//Only want tabs to cycle through items specified with editable-cell
//Tabbing in last item in grid will wrap to first editable-cell.
var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
var current = grid.current();
var nextCell, nextRow;
if (!current.hasClass("editable-cell")) {
nextCell = current.nextAll(".editable-cell");
if (!nextCell[0]) {
//search the next row
nextRow = current.parent().next();
nextCell = current.parent().next().children(".editable-cell:first");
}
nextRow = current.parent().next();
if(!nextRow.length && !nextCell.length){
nextCell = grid.tbody.find(".editable-cell:first");
}
grid.current(nextCell);
grid.editCell(nextCell[0])
}
} else if (e.keyCode === kendo.keys.UP) {
var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
var current = grid.current();
console.log("up");
//Need to move 'up' one row but maintain same column.
//If UP pressed in first row in grid, wrap to last row.
} else if (e.keyCode === kendo.keys.RIGHT || e.keyCode === kendo.keys.LEFT) {
console.log("sideways");
//If right, go nextCell (like a tab)
//if left, see if possible to get previous cell.
}
};
</script>
</body>
</html>
1 Answer, 1 is accepted
0
Hi Bob,
The behavior you are trying to achieve is not supported and requires a custom solution. While implementing such solution is beyond the scope of our support, I would suggest checking this forum thread, where a proof of concept example for a similar scenario is provided.
Regards,
Alexander Popov
Telerik
The behavior you are trying to achieve is not supported and requires a custom solution. While implementing such solution is beyond the scope of our support, I would suggest checking this forum thread, where a proof of concept example for a similar scenario is provided.
Regards,
Alexander Popov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!