Angular UI-Grid External Filtering

Question

Here is the working plunk , which deals with directly binding the gridAPi to the html. However, I am trying to do the same using a select box, but that doesn't work.

Directly Binding the Grid Api to view works

<div ng-controller="MainCtrl">This Filter works
    <input type="text" ng-model="gridApi.grid.columns[2].filters[0].term" />
     <div ui-grid="gridOptions" class="my-grid"></div>
</div>

But then in controller if I trigger

 $scope.gridApi.grid.columns[0].filters[0].term=30;

The Grid Api doesn't filter the grid when triggered externally.

Error Plunk

What am I missing?

Bennett Adams · Accepted Answer · 2016-02-04 04:52:27Z

Well, I went in and played with a few things in your plunker before I realized that you had put the ng-controller attribute on the <div> above your <select>/<option> group, so your selected values weren't within the scope of the controller.

When I moved the ng-controller attribute back out to the <body> tag instead, the filterGrid() function worked. I also took the liberty of adding in a $watcher on the selected value, which updates the $scope.gridApi.grid.columns[0].filters[0].term value when changed, if you'd prefer to filter on the fly rather than by clicking the button. Whatevs.

Anyway, here's the working plunker, and the choicest bits reproduced below:

<body ng-controller="MainCtrl">

    <div>This Filter works <!-- took the ng-controller attr out of this div tag -->
        <input type="text" ng-model="gridApi.grid.columns[0].filters[0].term" />
        <div ui-grid="gridOptions" class="my-grid"></div>
    </div>

    <p>Now this does, too!</p>
    <select ng-model="filterTerm">
        <option value="30">30</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="20">20</option>
    </select>

    <input type="button" value="Filter Grid Content" ng-click="filterGrid(filterTerm)">
    ...
</body>

and the controller script:

    $scope.filterTerm;

    // Watching the value of $scope.filterTerm also works, 
    // as you can uncomment and see below, but I left the 
    // ng-click functionality from your original plunker

    // $scope.$watch(function() {return $scope.filterTerm; }, function(newVal) {
    //     if (newVal) {
    //         console.log('filter term updated to ' + JSON.stringify(newVal));
    //         $scope.gridApi.grid.columns[2].filters[0].term = newVal;
    //     }
    // });

    $scope.filterGrid = function(value) {
        console.log(value);
        $scope.gridApi.grid.columns[2].filters[0].term=value;
    };

Collectives™ on Stack Overflow

Angular UI-Grid External Filtering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related