angular ui grid column dropdown filter blank option

Question

While using angular ui grid we are using selectOptions to populate dropdown options as column filter. Something similar to the following code:

   angular.module('exampleApp', ['ui.grid'])
   .controller('exampleCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
var animals = [
  { id: 1, type: 'Mammal', name: 'Elephant' },
  { id: 2, type: 'Reptile', name: 'Turtle' },
  { id: 3, type: 'Mammal', name: 'Human' }
];

var animalTypes = [
  { value: 'Mammal', label: 'Mammal' },
  { value: 'Reptile', label: 'Reptile'}
];

$scope.animalGrid = {
  enableFiltering: true,
  columnDefs: [
    {
      name: 'type', 
      field: 'type', 
      filter: { selectOptions: animalTypes, type: uiGridConstants.filter.SELECT }
    },
    { name: 'name', name: 'name'}
  ],
  data: animals
};
}]);

    <link href="http://ui-grid.info/release/ui-grid.css" rel="stylesheet" />    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <div ng-app="exampleApp">
    <div ng-controller="exampleCtrl">
    <h1>UI Grid Dropdown Filter Example</h1>
    <div ui-grid="animalGrid" class="grid"></div>
    </div>
    </div>

This shows dropdown filter options for each column but with an extra empty option. How do I remove the empty/blank option or replace the empty/blank option with a 'All' text?

Great, just a small thing: there is not even a single line of code in your question, how you expect anyone to help you? — Vassilis Pits

Ian A Ian A · Accepted Answer · 2016-11-25T12:54:12

You can achieve this using a custom filter.

For your code snippet you would need to change the label property in animalTypes to id, and also add an option of 'All':

var animalTypes = [
  { value: 'All', id: '' },
  { value: 'Mammal', id: 'Mammal' },
  { value: 'Reptile', id: 'Reptile'}
];

Then modify the columnDef for the type column as follows:

columnDefs: [
  {
    name: 'type', 
    field: 'type',
    // template for rendering a custom dropdown box
    filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><div my-custom-dropdown></div></div>', 
    filter: { 
      // initialize the filter to 'All'
      term: '',
      // the dropdown options (used in the custom directive)
      options: animalTypes
    }
  },
  ...
],

Please note that you will need to use the filter.term property to initialize the filter to 'All'. If you don't you will find that a blank option is inserted at the top of the dropdown box when the grid loads. Initializing the drop down prevents this from happening.

You can then define a custom drop down directive to render a select box containing the animalTypes options:

app.directive('myCustomDropdown', function() {
  return {
    template: '<select class="form-control" ng-model="colFilter.term" ng-options="option.id as option.value for option in colFilter.options"></select>'
  };
});

Please see this Fiddle for a working example

angular ui grid column dropdown filter blank option

1 Answers