Angular ui-grid disable cell focus for row selection checkboxes

Question

I have a ui-grid with several columns. Two of those columns are editable. I have also enabled row selection which makes the checkboxes appear in the left most column of the row.

I have disabled cell focus for non-editable columns. What I want to achieve is when I edit one of the editable column cell and hit tab, it should navigate only between the editable columns. The problem with the current setup is that the focus shifts from the editable cells in a row to the selection checkbox in the next row instead of going to next editable cell. I want to disable focus for the selection checkboxes.

    vm.tableOptions = {
        appScopeProvider: vm,
        data: [],
        enableSorting: true,
        enableFiltering: true,
        enableRowSelection: true,
        enableColumnResizing: true,
        enableSelectAll: true,
        multiSelect: true,
        enableGridMenu: true,
        virtualizationThreshold: 18,
        fastWatch: true,
        scrollDebounce: 500,
        wheelScrollThrottle: 500,
        rowHeight: 40,
        headerRowHeight: 40,
        minRowsToShow: 15,
        paginationPageSize: 25,
        paginationPageSizes: [],
        treeRowHeaderAlwaysVisible: false,
        saveScroll: true,
        saveGroupingExpandedStates: true,
        enableCellEditOnFocus: true,

        onRegisterApi: function (gridApi) {
            vm.gridApi = gridApi;

            /**
            * Checks if any rows are selected in the tasks grid.
            * @returns True if any tasks are selected; otherwise, false.
            */
            function anyRowsSelected() {
                var selectedRows = vm.gridApi.selection.getSelectedRows();
                return selectedRows ? selectedRows.length > 0 : false;
            };

            // Check if any tasks are selected when the selection changes
            gridApi.selection.on.rowSelectionChanged(null, function (row) {
                vm.isRowsSelected = anyRowsSelected();
            });

            // Check if any tasks are selected when batch selection changes
            gridApi.selection.on.rowSelectionChangedBatch(null, function (rows) {
                vm.isRowsSelected = anyRowsSelected();
            });

            // This is a hack to manually move the focus to next editable cell
            // I want to avoid this since this is causing some issues.
            gridApi.cellNav.on.navigate($scope, function (newRowCol, oldRowCol) {
                var assetColIndex = 4;
                if (newRowCol.col.name === "selectionRowHeaderCol" &&
                    oldRowCol.col.name === "SerialNumber") {
                        vm.gridApi.cellNav.scrollToFocus(newRowCol.row.entity, vm.tableOptions.columnDefs[assetColIndex]);
                }
            });

            $timeout(vm.restoreGridState, 50);
        },
        columnDefs: [
            { name: "DiscreteSkuId", enableCellEdit: false, allowCellFocus: false },
            {
                 name: "SlotBin", 
                 cellTemplate: slotBinCellTemplate, 
                 enableCellEdit: false, 
                 allowCellFocus: false,
                 sort: {
                    direction: 'desc',
                    priority: 0
                }
            },
            { name: "Model", enableCellEdit: false, allowCellFocus: false },
            { name: "AssetType", enableCellEdit: false, allowCellFocus: false },
            { name: "AssetTag" , cellTemplate: editableCellTemplate, cellEditableCondition: allowTableEdit },
            { name: "SerialNumber" , cellTemplate: editableCellTemplate, cellEditableCondition: allowTableEdit },
            { name: "ValidationFailureReasons", cellTemplate: errorMessageCellTemplate, enableCellEdit: false, allowCellFocus: false }
        ]
    };

This is in the html page.

<div id="table" ui-grid="rackItemDetailsCtrl.tableOptions" ng-disabled="rackItemDetailsCtrl.disableUserInteraction" class="grid tasks-table ui-grid-row-hover" ui-grid-save-state ui-grid-resize-columns ui-grid-selection ui-grid-grouping ui-grid-move-columns ui-grid-auto-resize ui-grid-scrolling-fix ui-grid-edit ui-grid-cellNav></div>

Angular ui-grid version: 3.1.0.1

Angularjs version: 1.4.9

Answer 1

You can disable cell focus on a column with the allowCellFocus flag. However, the row selection column is created automatically and you have no way to set this flag. The solution to to manually access the column after it is created and set allowCellFocus to false. Here is how you can do that:

gridApi.grid.getColumn('selectionRowHeaderCol').colDef.allowCellFocus = false;