We are building a heads-down data entry application using Kendo, and make heavy use of Kendo Grid. Using selectable='row' or selectable='col' in the grid is problematic because the user is entering data without using the mouse, but navigating the grid using tab key. The visual row/cell selector does not follow the actual active row and cell.

Question: How can I get the row index and/or the uid of the row in the grid with selectable turned off and without using grid.select()?

Here's the grid setup code:

            $("#" + target).kendoGrid({
                dataSource: gridDs,
                edit: gridCellEdit,
                height: applet.height,
                editable: {
                    createAt: 'bottom'
                },
                filterable: true,
                sortable: true,
                navigatable: true,
                resizable: true,
                reorderable: true,
                scrollable: { virtual: true },
                columns: gridColumns,
                dataBound: monitorKeyboard
                }
            });

    function gridCellEdit(e) {
          var uid = $('#grid_active_cell').closest('tr').data('uid');
          console.log(uid);
     }

We are building a heads-down data entry application using Kendo, and make heavy use of Kendo Grid. Using selectable='row' or selectable='col' in the grid is problematic because the user is entering data without using the mouse, but navigating the grid using tab key. The visual row/cell selector does not follow the actual active row and cell.

Question: How can I get the row index and/or the uid of the row in the grid with selectable turned off and without using grid.select()?

Here's the grid setup code:

            $("#" + target).kendoGrid({
                dataSource: gridDs,
                edit: gridCellEdit,
                height: applet.height,
                editable: {
                    createAt: 'bottom'
                },
                filterable: true,
                sortable: true,
                navigatable: true,
                resizable: true,
                reorderable: true,
                scrollable: { virtual: true },
                columns: gridColumns,
                dataBound: monitorKeyboard
                }
            });

    function gridCellEdit(e) {
          var uid = $('#grid_active_cell').closest('tr').data('uid');
          console.log(uid);
     }

• javascript
• kendo-ui
• kendo-grid

2 Answers 2

Use whatever means you have at hand to resolve the row element the user is currently on and then simply do:

$(target-tr).data('uid');

If I'm understanding your question correctly, this will be

$('#grid_active_cell').closest('tr').data('uid');

If I misunderstood, please elaborate.

Answer: You can reference the uid field directly using e.model.uid. For example:

       $("#" + target).kendoGrid({
            dataSource: gridDs,
            edit: gridCellEdit,
            height: applet.height,
            editable: {
                createAt: 'bottom'
            },
            filterable: true,
            sortable: true,
            navigatable: true,
            resizable: true,
            reorderable: true,
            scrollable: { virtual: true },
            columns: gridColumns,
            dataBound: monitorKeyboard
            }
        });

function gridCellEdit(e) {
      console.log(e.model.uid);
 }