Angular ui-grid set filter field programatically and refresh. Value not showing up

Question

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.

Arias

Answer 1

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
  };

Driest

Thanks. That's closer. The items filter. But the new filter still does not show up in the filter column – Arias

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. – Arias

So what was the FULL Final answer. I am still having issues with this and the documentation is worthless. – Corollaceous

I suggest to just change "term" instead of replacing the whole object. $scope.gridApi.grid.columns[3].filters[0].term = somename – Mccleary

Answer 2

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>

Adagietto

What does term represent? Is it the field or the displayName, or something else? – Tillich

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" – Adagietto

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. – Phillis

Answer 3

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.

Corollaceous

Answer 4

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;
                                }
                            });
                        });
                    });
                }
            });
        }
    };
});

Chromic

can u pls add some explanation ? – Scummy

added some comments, i used answer from here #32346841 – Plication