Angular UI Grid - Custom Header Template and Filte

Question

I'm looking for a good example of having a basic filter and having a custom template. I'm having trouble finding a good example on the tutorial sites. See attached plunk where I'm setting filtering and having a custom header template. Does the filtering need to be embedded into the header template?

http://plnkr.co/edit/VMETPu30iiFc3GYmZZRS?p=preview

var app = angular.module('app', ['ngAnimate', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.columns = [{ field: 'name', headerCellTemplate: '<div class="grand-total">Name</div>' }, { field: 'gender' }];
  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: $scope.columns,
    enableFiltering: true
  };

  $scope.remove = function() {
      $scope.columns.splice($scope.columns.length-1, 1);
  }

  $scope.add = function() {
      $scope.columns.push({ field: 'company', enableSorting: false });
  }

  $scope.splice = function() {
      $scope.columns.splice(1, 0, { field: 'company', enableSorting: false });
  }

  $scope.change = function() {
    $scope.columns = [{ field: 'First', }, { field: 'Second' }, { field: 'third' }];
    $scope.gridOptions.columnDefs = $scope.columns;
  }

  $scope.unsplice = function() {
      $scope.columns.splice(1, 1);
  }

  $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
      console.log(data)
    });
}]);

Thanks in advance!

Answer 1

You can create a custom template and add it to your grid.Try this post you can get some ideas.I have updated some of the codes in blog post.you can do something like this.Hope this will help.Code Sample.