デフォルトでは、フィルタヘッダーの角度uiグリッドにフォーカスが設定されています

Question

ドキュメントを前後に移動しましたが、ロード時に1つの列のヘッダーフィルタにフォーカスを与える方法が見つからないようです。ユーザーは通常、同じ列を1回だけフィルタリングします。これらのグリッドは、一連のビジネスアプリケーションに使用され、保存されたすべてのクリックまたはタブは1人1日に500回保存されます。

this.gridOptions.columnDefs = [ 
      { field: 'Order' }, 
      { field: 'Qty.' } 
     ]; 

は、それから私は、HTMLのために、以下の持っているので、ご注文は、フィルタを取得しますが、それはデフォルトでフォーカスされていません。

<div ui-grid="taskCtrl.gridOptions" ui-grid-selection ui-grid-auto-resize></div> 

ありがとう！

Answer 1

これは私がこの問題を発見した解決策です。

カラム定義を作成するときにヘッダフィルタのテキストボックスにオートフォーカスを追加する必要があります。 あなたはこのような何かコーディングすることによってこれを行うことができます。

$scope.gridOptions = { 
enableSorting: true, 
columnDefs: [ 
    { field: 'name' }, 
    { field: 'company', 
    headerCellTemplate: '<div ng-class="{ \'sortable\': sortable }"><div class="ui-grid-vertical-bar">&nbsp;</div><div class="ui-grid-cell-contents" col-index="renderIndex"><span>{{ col.displayName CUSTOM_FILTERS }}</span><span ui-grid-visible="col.sort.direction" ng-class="{ \'ui-grid-icon-up-dir\': col.sort.direction == asc, \'ui-grid-icon-down-dir\': col.sort.direction == desc, \'ui-grid-icon-blank\': !col.sort.direction }">&nbsp;</span></div><div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false" class="ui-grid-column-menu-button" ng-click="toggleMenu($event)"><i class="ui-grid-icon-angle-down">&nbsp;</i></div><div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><input type="text" autofocus class="ui-grid-filter-input" ng-model="colFilter.term" ng-click="$event.stopPropagation()" ng-attr-placeholder="{{colFilter.placeholder || \'\'}}" /><div class="ui-grid-filter-button" ng-click="colFilter.term = null"><i class="ui-grid-icon-cancel" ng-show="!!colFilter.term">&nbsp;</i> <!-- use !! because angular interprets \'f\' as false --></div></div></div>' 
    } 
], 
onRegisterApi: function(gridApi) { 
    $scope.gridApi = gridApi; 
    $scope.gridApi.core.on.sortChanged($scope, function(grid, sort) { 
    $scope.gridApi.core.notifyDataChange($scope.gridApi.grid, uiGridConstants.dataChange.COLUMN); 
    }) 
} 

を};

上記のコードサンプルでは、​​headerCellTemplateが明示的に書き込まれていることがわかります。ここでは、オートフォーカスを得るために変更を行うことができる場所です。あなたはこのセルテンプレートで何でもできます。ただし、基になるセルテンプレートを変更しないように注意してください。これはUIグリッド機能を損なう可能性があります。お役に立てれば！

以下のプランナーリンクに上記の解決策が見つかりました： http://plnkr.co/edit/JuDUwpUBwglkDRUYT77g?p=preview