CODEWITHSUNDEEP
ag-grid
Hugh Gallagher
Hugh Gallagher

Reputation: 127

ag-grid setColumnVisible not working

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

Upvotes: 8

Views: 20146

Answers (5)

k102
k102

Reputation: 8079

I've had the exact problem, solved by adding

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

after calling setColumnVisible

Upvotes: 1

Jon Vote
Jon Vote

Reputation: 663

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

Upvotes: 4

imnickvaughn
imnickvaughn

Reputation: 3014

Make sure you got

 (gridReady)="onGridReady($event)"

in the template.

I do that all the time!

Cheers!

Upvotes: 0

René Baron
René Baron

Reputation: 123

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.

Upvotes: 2

Sean Landsman
Sean Landsman

Reputation: 7179

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.

Upvotes: 8

Related Questions