This is a migrated thread and some comments may be shown as answers.

Editable grid - navigating with arrows

1 Answer 169 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Bob asked on 17 Jul 2015, 04:39 PM

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. 

<!DOCTYPE html>
    <base href="">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <link rel="stylesheet" href="" />
    <link rel="stylesheet" href="" />
    <script src=""></script>
    <script src=""></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  <div id="grid"></div>
        $(document).ready(function() {
    var crudServiceBaseUrl = "";
    var dataSource = new{
            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" }
        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");
        }  else if (e.keyCode === kendo.keys.UP) {
            var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
            var current = grid.current();
            //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) {
            //If right, go nextCell (like a tab)
            //if left, see if possible to get previous cell.

1 Answer, 1 is accepted

Sort by
Alexander Popov
Telerik team
answered on 21 Jul 2015, 08:53 AM
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.

Alexander Popov
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Share this question