Angular ui-grid custom filter not working as headerCellTemplate

Question

I wanted to add custom filter based on AngularJs MultiSelect using headerCellTemplate option in ng-grid 3.0. Please see the plunker.

  <div ng-controller="mainCtrl">
  <multi-select
    input-model="names"
    button-label="name"
    item-label="name"
    tick-property="ticked"
    max-labels="1"
    helper-elements=""
    on-item-click="fClick( data )"
    default-label="None"
    class="level-multi-select">
  </multi-select>

Everything, looks fine as long as it is located outside the grid. When it is inside, I encountered two issues:

It seems like the data is filtered but not displayed properly, after filtering.
The layout is corrupted. Without overwriting css the drop down is hidden behind ui-cells and it relocated after being clicked. After applying advice from here (current version of a plunker) drop down is changing the height of the top-header. I would prefer the same display as for Grid Menu (visible after clicking top-right icon).

Piotr Sz Piotr Sz · Accepted Answer · 2015-03-19T14:35:35

Thanks to the help of guys on the GitHub I managed to find two solutions:

One is to overwrite customHeaderTemplate like in my example above. css has to be modified differently. I also corrected my error in the code. There should be no reference to mainCtrl in the html. I used second controller for multi-select and modified the code to use $scope.grid.appScope. I think using broadcast would be cleaner solution, but at least code is short

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

  $scope.grid.appScope.myData = _.filter( $scope.grid.appScope.originalData, function (item) {

    return _.contains(selectedNames, item.name) ;
  });

Second is based on the new development which is yet not part of ui-grid. You can follow the issue #2918 to see the details. There is also link to second plunke on the GitHUb page

Angular ui-grid custom filter not working as headerCellTemplate

1 Answers