Focus By Default In Filter Header Angular Ui Grid

I have gone through the documentation forward and back and I cannot seem to find a way to give the header filter for one of the columns focus when it loads. The user typically filt

Solution 1:

Here is a solution I found out for this problem.

You need to add autofocus to text box of the header filter while creating the column definition. You can do this by coding something like this:

$scope.gridOptions = {
enableSorting: true,
columnDefs: [
  { field: 'name' },
  { field: 'company',
    headerCellTemplate: '<divng-class="{ \'sortable\': sortable }"><divclass="ui-grid-vertical-bar">&nbsp;</div><divclass="ui-grid-cell-contents"col-index="renderIndex"><span>{{ col.displayName CUSTOM_FILTERS }}</span><spanui-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><divclass="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)"><iclass="ui-grid-icon-angle-down">&nbsp;</i></div><divng-if="filterable"class="ui-grid-filter-container"ng-repeat="colFilter in col.filters"><inputtype="text"autofocusclass="ui-grid-filter-input"ng-model="colFilter.term"ng-click="$event.stopPropagation()"ng-attr-placeholder="{{colFilter.placeholder || \'\'}}" /><divclass="ui-grid-filter-button"ng-click="colFilter.term = null"><iclass="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 );
  })
}

};

In the above code sample you can see that the headerCellTemplate is being written explicitly. Here is the place you can do the change to get the autofocus. You can do anything you want in this cell template. But be careful not to change any underlying cell template. This may break ui-grid functionality. Hope this helps!

I found the above solution in the below plunker link: http://plnkr.co/edit/JuDUwpUBwglkDRUYT77g?p=preview