ag-grid setColumnVisible not working

3
votes

Is there something else I need to do to ensure gridOptions.columnApi.setColumnVisible does what it says on the tin? :-

This code is running at runtime on a rendered grid and should just hide the column instantly, but does nothing:-

gridOptions.columnApi.setColumnVisible("the col name", false);
5
ag-grid

5 Answers

5
votes

Two possible causes of this:

  • The grid isn't ready when you attempt to hide the column. This probably isn't the case as you say the grid has been rendered, but it's worth checking
  • You're not using correct column identifier. This can be either a column id or Column object.

It's probably the latter - are you perhaps using the header name instead of the field/col id?

For example, if you have this:

var columnDefs = [
    {headerName: "Athlete", field: "athlete", width: 200}
];

Then the first parameter would be 'athlete', not 'Athlete'.

You can additionally specify a colId to rule out any conflicts and then use this id in your api call:

var columnDefs = [
    {headerName: "Athlete", field: "athlete", width: 200, colId: "athleteCol"}
];

But this isn't normally necessary.

1
votes

In case this helps someone else - I was having a similar problem, but with the actual column method itself. So for my application at least, the setVisible method of the column doesn't work correctly, but the setColumnVisible method of the columnApi method does work:

// does NOT work correctly
this.columnApi.getColumn('name').setVisible(true); 

// does work correctly
this.columnApi.setColumnVisible('name', true);
0
votes

Referring to the Aurelia ag-grid example code: I am hiding Columns at runtime as follows in the *.ts component's constructor:

this.gridOptions.onGridReady = () => {
  ...snip
  this.columnApi = that.gridOptions.columnApi;
  this.gridOptions.columnApi.setColumnVisible('REQCONTEXT', false);
}//onGridReady

Where 'REQCONTEXT' is the name of the columns to hide.

0
votes

Make sure you got

 (gridReady)="onGridReady($event)"

in the template.

I do that all the time!

Cheers!

0
votes

I've had the exact problem, solved by adding

    setTimeout(() => {
      this.grid.api.refreshView();
      this.grid.api.sizeColumnsToFit();
    }, 0)

after calling setColumnVisible