Vertically Tab Cells in an Editable Grid
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
Description
How can I vertically navigate down through the columns when I use the Tab key in the Kendo UI Grid?
Solution
To achieve the desired scenario:
- Handle the
keydowntable event. - If the key is
Tab, prevent the default behavior. - Calculate the next cell based on the current position.
- Use the
editCellmethod of the Grid to change the cell.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [{
field: "name"
},
{
field: "gender"
},
{
field: "city"
}
],
dataSource: {
data: [{
id: 1,
name: "Jane Doe",
gender: "female",
city: "Sofia"
},
{
id: 2,
name: "John Smith",
gender: "male",
city: "London"
},
{
id: 3,
name: "James Jones",
gender: "male",
city: "New York"
},
{
id: 4,
name: "Mary Johnson",
gender: "female",
city: "Paris"
},
{
id: 5,
name: "Robert Lee",
gender: "male",
city: "Berlin"
}
],
schema: {
model: {
id: "id",
}
}
},
editable: {
mode: "incell"
}
});
var grid = $('#grid').data('kendoGrid');
grid.table.on('keydown', function(e) {
if (e.keyCode === kendo.keys.TAB && $($(e.target).closest('.k-edit-cell'))[0]) {
e.preventDefault();
var currentNumberOfItems = grid.dataSource.view().length;
var row = $(e.target).closest('tr').index();
var col = grid.cellIndex($(e.target).closest('td'));
var dataItem = grid.dataItem($(e.target).closest('tr'));
var field = grid.columns[col].field;
var value = $(e.target).val();
dataItem.set(field, value);
if (row >= 0 && row < currentNumberOfItems && col >= 0 && col < grid.columns.length) {
var nextCellRow = row;
var nextCellCol = col;
if (e.shiftKey) {
if (nextCellRow - 1 < 0) {
nextCellRow = currentNumberOfItems - 1;
nextCellCol--;
} else {
nextCellRow--;
}
} else {
if (nextCellRow + 1 >= currentNumberOfItems) {
nextCellRow = 0;
nextCellCol++;
} else {
nextCellRow++;
}
}
if (nextCellCol >= grid.columns.length || nextCellCol < 0) {
return;
}
// Wait for the cell to close and for the Grid to rebind when the changes have been made.s
setTimeout(function() {
grid.editCell(grid.tbody.find("tr:eq(" + nextCellRow + ") td:eq(" + nextCellCol + ")"));
});
}
}
});
</script>