Angular UI Grid - Custom Header Template and Filtering

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!

gihan-maduranga · Accepted Answer · 2015-12-22 05:34:59Z

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.

edited Dec 22, 2015 at 5:34

answered Dec 22, 2015 at 5:22

gihan-maduranga

4,8517 gold badges44 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular UI Grid - Custom Header Template and Filtering

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related