Angular ui-grid deaktivieren Zellenfokus für Zeilenauswahl Kontrollkästchen

Question

Ich habe ein UI-Grid mit mehreren Spalten. Zwei dieser Spalten sind editierbar. Ich habe auch die Zeilenauswahl aktiviert, wodurch die Kontrollkästchen in der linken Spalte der Zeile erscheinen.

Ich habe Zellenfokus für nicht bearbeitbare Spalten deaktiviert. Was ich erreichen möchte, ist, wenn ich eine der editierbaren Spaltenzelle bearbeite und auf die Registerkarte klicke, sollte sie nur zwischen den bearbeitbaren Spalten navigieren. Das Problem mit der aktuellen Einstellung besteht darin, dass der Fokus von den bearbeitbaren Zellen in einer Zeile auf das Auswahlkästchen in der nächsten Zeile verschoben wird, anstatt zur nächsten bearbeitbaren Zelle zu gehen. Ich möchte den Fokus für die Auswahlfelder deaktivieren.

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 } 
     ] 
    }; 

Dies ist in der HTML-Seite.

<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-Raster-Version: 3.1.0.1

AngularJS Version: 1.4.9

Answer 1

Sie können Zelle Fokus auf einer Säule mit dem allowCellFocus Flag deaktivieren. Die Zeilenauswahlspalte wird jedoch automatisch erstellt, und Sie können dieses Flag nicht festlegen. Die Lösung, um manuell auf die Spalte zuzugreifen, nachdem sie erstellt wurde, und setzen allowCellFocus auf false. Hier ist, wie Sie das tun können:

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