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.

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

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>

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.

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