Change angular ui-grid's columns visibility

Question

I want to show/hide columns after the grid is rendered. Before i moved to the new ui-grid I called to toggleVisible() but now it doesn't seem to work. I tried to change the column def visibility(or any other property) like bellow

columnDefs[9].visible = false;

When I set the visibility on the column definition(before render) it does work, but after wards i cannot change it.

Answer 1

Old question, but this works for me in 3.0.0-rc.20. I'm guessing columnDefs needs to be in scope.

$scope.columnDefs = [ 
    { name: 'one' },
    { name: 'two', visible: false }
];

$scope.grid = {
    data: 'data',
    columnDefs: $scope.columnDefs
};

$scope.grid.onRegisterApi = function(gridApi){
    $scope.gridApi = gridApi;
};    

$scope.showColumnTwo = function() {
    $scope.columnDefs[1].visible = true;
    $scope.gridApi.grid.refresh();
};

Answer 2

Just started working with angular-ui-grid so this might be not the best solution.

Try including the uiGrid api object and then invoking the refersh method on a grid object

...
$scope.gridOptions.onRegisterApi = function(gridApi){
  $scope.gridApi = gridApi;
};
....
columnDefs[9].visible = false;
$scope.gridApi.grid.refresh();

Answer 3

In case anyone was looking for a solution that didn't require you to create a columndDef.

 s.gridOptions = {
    data: 'myData',
    onRegisterApi: function(gridApi) {
      gridApi.core.registerColumnsProcessor(hideIdColumn);
      s.gridApi = gridApi;

      function hideIdColumn(columns){
          columns.forEach(function(column){
            if(column.field==='_id'){
              column.visible=false;
            }
          });
          return columns;
      }

    }

Just replace the column.field==='_id' part with your own condition. Also don't forget to return the columns or you will not get any columns at all.