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

Hi, you mentioned a hack creating an issue. Is the issue that the field you are jumping to with scrollToFocus() is incorrectly non-editable? If so, I have a workaround for that. Let me know... — S. Baggy
– S. Baggy, Commented Aug 7, 2016 at 11:10
@S.Baggy That is not the issue. Issue is sometimes the focus jumps to the next row instead of the same one. Have to seen something like that? — Vijay
– Vijay, Commented Aug 8, 2016 at 21:32

Anthony Settergren · Accepted Answer · 2016-08-18 02:14:24Z

3

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;

answered Aug 18, 2016 at 2:14

Anthony Settergren

2302 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PaulParton Over a year ago

Nice one! I had a little trouble with this because the column wasn't available as soon as the api was, so i waited for the first gridApi.core.on.rowsRendered event and put it there.

Collectives™ on Stack Overflow

Angular ui-grid disable cell focus for row selection checkboxes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related