Bind angulajs UI-Select to UI-Grid filter

Question

I'm attempting to combine AngularUI's ui-grid and ui-select, so that I can have ui-select behavior while filtering the ui-grid.

I have a plunker that's part of the way there here: http://plnkr.co/edit/1rREdYPV4qz8slbwSLai?p=preview

   <ui-select multiple ng-model="personName.selected" theme="bootstrap">
        <ui-select-match placeholder="Select or search a person in the list...">{{$item.name}}</ui-select-match>
        <ui-select-choices repeat="person in people | filter: $select.search">
             <div ng-bind-html="person.name | highlight: $select.search"></div>
        </ui-select-choices>
      </ui-select>

But at this point, the only thing I can think of is to hide the native filters with JS, and use JS to push the output of the ui-select dropdowns into the filter behind the scenes. This feels pretty hacky though.

Is there an angularjs way to BIND the output of the ui-select to the filter? Or perhaps replace the filter with ui-select behavoir?

Answer 1

They do not have a global filter for UI-Grid yet, so the best bet is a workaround by simply using an angular filter to filter the data itself, and reload.

so in your html I added a refresh function (refreshData()) on change:

<ui-select multiple ng-model="personName.selected" ng-change="refreshData()" theme="bootstrap">

then in your app.js, just call the function to filter your data:

$scope.refreshData = function() {
  $scope.myGrid.data = $filter('filter')($scope.data, $scope.searchText, undefined);
};

yours was a little different because you were using a multi-select, so i made a custom angular filter. My filter is rough and could be optimized for sure, but here it is, the fork of your example: http://plnkr.co/edit/Rk8y2N7p30VHNancDWnk?p=preview

Answer 2

There is an official example that demonstrates how to do multi-select filter:

http://ui-grid.info/docs/#/tutorial/306_custom_filters

Notice the 'Age' column in the example is using a modal to present multi-select options.