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

disable tabstop on non-editable cells in Grid

1 Answer 130 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Lee asked on 19 Apr 2017, 03:02 PM

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

1 Answer, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 21 Apr 2017, 08:49 AM
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.
Tags
Grid
Asked by
Lee
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Share this question
or