7

I have a ui-grid with a bunch of columns using the built in filtering. One of the columns is "owner". There is a button you can click that says "My Items". When clicked that button should populate the Owner Filter field with the users name and filter the items. I am setting the filter as follows as specified in the ui-grid documentation:

$scope.gridApi.grid.columns[3].filters[0] = "somename";

However "somename" never shows up in the column filter header, and the data never refreshes. I've tried calling refresh() as well as notifyDataChange but nothing seems to work.

Thanks.

4 Answers 4

10

Here is the correct way of doing it. By the way, there is no need to call refresh() function.

  $scope.gridApi.grid.columns[3].filters[0] = {
    term: somename
  };
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks. That's closer. The items filter. But the new filter still does not show up in the filter column
Okay, so I've been doing this right all along, the problem was that there were HIDDEN fields and those are considered COLUMNS. So even though I only had 3 columns on the screen there were 10 columns in the grid. So once I set the proper column value it worked. Thanks.
So what was the FULL Final answer. I am still having issues with this and the documentation is worthless.
I suggest to just change "term" instead of replacing the whole object. $scope.gridApi.grid.columns[3].filters[0].term = somename
3

I was trying to work this answer, but was having problems. I solved it with a slight syntax alteration (changed grids.columns[2] to grid.getColumn('mycolumn') )

$scope.grid1Api.grid.getColumn('speicialty').filters[0] = {
   term: whatever
};

Hope that helps for anyone looking

For my particular case, this is all of my code:

Controller:

function skillsFunc(job) {
   console.log(job);
   $scope.grid1Api.grid.getColumn('speicialty').filters[0] = {
      term: job
   };
};

HTML:

<div class="input-field col s2 locator-margin3">
  <label for="skills1" class="locator-label">SPECIAL SKILLS</label>
  <select ng-model="vm.skills" ng-change="vm.skillsFunc(vm.skills)" id="skills1" class="browser-default locator-select ">
        <option value="1">SKILLS</option>
        <option value="Audiolog">Audiologist</option>
        <option value="Allerg">Allergist</option>
        <option value="Androlog">Andrologist</option>
   </select>
</div>

3 Comments

What does term represent? Is it the field or the displayName, or something else?
it represents the text you want to place in your filter. for example. if you want to filter you first column (which is gender) by the term "male", you would do term: "male"
Got this also working in 4.0.6 . I have a refresh button which reloads from the server. I needed to put refresh in a timeout otherwise it would not filter the data.
0

Okay, I realize the OP figured it out (despite marking an answer.) For me it was a bit more of a pain. The answer was hidden between the lines. Here is what worked for me:

$scope.MyGridName.grid.columns[2].filters[0] = { term: "CP" };
$scope.MyGridName.grid.refresh();

The "CP" is actually what comes from a KendoUI Chart. But you can put in whatever you want there. The 2 in columns[2] was my 3rd column showing. I had no hidden fields like the OP.

Comments

0

I find working answer and create directive:

.directive('uiGridSaveFilter', function ($compile, $timeout, $window) { // use $window to save local variable
    return {
        priority: 0,
        scope: false,
        require: '^uiGrid', 
        replace: true,
        link: function ($scope, $elm, $attrs) {
            $window.gridState = []; 
            $timeout(function () {

                $scope.gridApi.core.on.filterChanged($scope, saveState); //filter listener
                $scope.gridApi.core.on.rowsRendered($scope, restoreState); //rebuild listener

                function saveState() {
                    $window.gridState = [];
                    var grid = this.grid;

                    /// set filters to local array with config

                    angular.forEach(grid.columns, function (value, key) {
                        if (value.filters[0].term) {
                            var dummy = {};
                            dummy['k'] = value.colDef.name;
                            dummy['v'] = value.filters[0].term;
                            $window.gridState.push(dummy);
                        }
                    });
                }

                function restoreState() {

                    var grid = this.grid;
                    $timeout(function () {

                       ///loop columns and check is any filters added to field

                        angular.forEach(grid.columns, function (value, key) {
                            angular.forEach($window.gridState, function (value2, key2) {
                                if (value.field === value2.k) {
                                    value.filters[0].term = value2.v;
                                }
                            });
                        });
                    });
                }
            });
        }
    };
});

2 Comments

can u pls add some explanation ?
added some comments, i used answer from here stackoverflow.com/questions/32346341/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.