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 · Accepted Answer · 2015-03-19 14:35:35Z

2

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

answered Mar 19, 2015 at 14:35

Piotr Sz

811 silver badge4 bronze badges

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

1 Comment

Tony Over a year ago

ui-grid.info/docs/#/tutorial/306_custom_filters The official example that demonstrates how to do multi-select filter in UI-Grid: Notice the 'Age' column in the example is using a modal to present multi-select options.

Collectives™ on Stack Overflow

Angular ui-grid custom filter not working as headerCellTemplate

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related