disable tabstop on non-editable cells in Grid

[Lee]

I have a grid that I'm using batch mode for editing.  There are only 1 column in the grid that is editable the rest are editable(false).  I want to be able to have tab navigation only stop on those editable cells.  I've tried setting the tabindex for the non-editable ones to -1 and that doesn't work.  I've tried changing my edit mode to InLine but then nothing is editable.

 

Thanks

Lee

[Preslav]

Hello Lee,

I believe that the example outlined in this How To article will fit your project requirements:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/skip-non-editable-cells-when-tabbing

Additionally, to use tab navigation for one column only, you could modify the code from the above example like this: 

<script type="text/javascript">
    $(document).ready(function() {

        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;
                    var nextCellCol = col;

                    if (e.shiftKey) {
                        nextCellRow = row - 1;
                    } else {
                        nextCellRow = row + 1;
                    }
                    if (nextCellRow >= currentNumberOfItems || nextCellRow < 0) {
                        return;
                    }
                    // wait for cell to close and Grid to rebind when changes have been made

                    setTimeout(function() {
                        grid.editCell(grid.tbody.find("tr:eq(" + nextCellRow + ") td:eq(" + nextCellCol + ")"));
                    });
                }
            }
        });
    });
</script>

I hope this helps.


Regards,
Preslav
Telerik by Progress