disable tabstop on non-editable cells in Grid

2 posts, 0 answers
  1. Lee
    Lee avatar
    31 posts
    Member since:
    Jun 2014

    Posted 19 Apr 2017 Link to this post

    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

  2.
  3. Preslav
    Admin
    Preslav avatar
    589 posts

    Posted 21 Apr 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top