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.

Floodlight

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

Mantua

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

Caracul

Which ui-grid version are you using ? They probably have got a lot of changes since this answer was posted. – Caracul

I'm using version 3.0 – Spatula

Try something like this to refresh in 3.0 $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN); API Doc – Morphia

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.

Urina

Just what I was looking for!! – Angelika

Answer 4

The answer from user3310980 was preferred when I saw it but there is very little documentation on the registerColumnsProcessor method. I found reference to his comment about using it without column definitions so I wanted to make it clear that you can certainly use this method with column defs. This provides for some interesting flexibility.

In this example, there are four columns that swap with four other columns determined by a toggle button. $ctrl.showDetails is true when sales columns should display and false when payment items should display.

In the column definitions, the onRefresh property is defined as a method to call for the column on grid refresh and the setVisibleColumns method is supplied to registerColumnsProcessor(). When the grid is refreshed, for each column, it will check the column definition in the colDef property and call the onRefresh method for each column that defines it, with this set to the column object.

/*--------------------------------------------*/
/* showPayments - Make payment items visible. */
/* showDetails  - Make sales items visible.   */
/*--------------------------------------------*/
var showPayments = function() { this.visible = !$ctrl.showDetails; };
var showDetails  = function() { this.visible =  $ctrl.showDetails; };

var columnDefs   =
  [
  { field: 'receiptDate',    displayName: 'Date',      width: 120, type: 'date', cellFilter: "date:'MM/dd/yyyy'", filterCellFiltered: true },
  { field: 'receiptNumber',  displayName: 'Rcpt No',   width:  60, type: 'number' },
  { field: 'receiptFrom',    displayName: 'From',      width: 185, type: 'string' },
  { field: 'paymentMethod',  displayName: 'Method',    width:  60, type: 'string', onRefresh: showPayments },
  { field: 'checkNumber',    displayName: 'No',        width:  60, type: 'string', onRefresh: showPayments },
  { field: 'checkName',      displayName: 'Name',      width: 185, type: 'string', onRefresh: showPayments },
  { field: 'paymentAmount',  displayName: 'Amount',    width:  70, type: 'string', onRefresh: showPayments },
  { field: 'description',    displayName: 'Desc',      width: 100, type: 'string', onRefresh: showDetails },
  { field: 'accountNumber',  displayName: 'Acct No',   width:  80, type: 'string', onRefresh: showDetails },
  { field: 'accountName',    displayName: 'Acct Name', width: 160, type: 'string', onRefresh: showDetails },
  { field: 'salesTotal',     displayName: 'Amount',    width:  70, type: 'string', onRefresh: showDetails }
  ];

/*----------------------------------------------------*/
/* Columns processor method called on grid refresh to */
/* call onRefresh' method for each column if defined. */
/*----------------------------------------------------*/
var setVisibleColumns = function(cols)
  {
  for (var i=0; i < cols.length; i++)
    if (cols[i].colDef.onRefresh)
      cols[i].colDef.onRefresh.call(cols[i]);
  return cols;
  };

/*----------------------------------*/
/* Callback to set grid API in      */
/* scope and add columns processor. */
/*----------------------------------*/
var onRegisterApi = function(api)
  {
  $ctrl.itemList.api = api;
  api.core.registerColumnsProcessor(setVisibleColumns);
  };

/*------------------------------*/
/* Configure receipt item grid. */
/*------------------------------*/
$ctrl.showDetails = false;
$ctrl.itemList    = 
  {
  columnDefs:                columnDefs,
  enableCellEdit:            false,
  enableColumnMenus:         false,
  enableFiltering:           false,
  enableHorizontalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,
  enableVerticalScrollbar:   uiGridConstants.scrollbars.WHEN_NEEDED,
  data:                      [],
  onRegisterApi:             onRegisterApi
  };

When $ctrl.showDetails is changed, a simple refresh will swap the columns.

$ctrl.showDetails = !$ctrl.showDetails;
$ctrl.itemList.api.grid.refresh();

I hope this is helpful to someone.

Stretcher