Angular - ag-grid - add columns dynamically

Question

I need to add some columns to my Ag-grid in 2 cases. Other cases i just need base columns.

So in constructor I declare my grid like this :

this.gridOption.columnDefs = [
  {
        headerName: 'Admission date',
        field: 'admissionPlannedDate',
        cellRendererFramework: DateCellRendererComponent,
        cellRendererParams: (params) => {
          return (params.data.admissionPlannedDate ? {dateFormat: 'dd.MM.yyyy - HH:mm'} : {dateFormat: ' '});
        },
        cellStyle: function (params) {
          return (params.data.admissionPlannedDate < new Date() ? {color: 'red'} : {});
        }
      },
      {
        headerName: 'Lastname',
        field: 'lastName',
        cellStyle: function (params) {
          return (params.data.edsId === null ? {color: 'orange'} : {});
        }
        },
      },
      {
        headerName: 'Sex',
        field: 'sex',
      },
      {
        headerName: 'Birthdate',
        field: 'birthDate',
        cellRendererFramework: DateCellRendererComponent,
        cellRendererParams: (params) => {
            return (params.data.birthDate ? {dateFormat: 'dd.MM.yyyy'} : {dateFormat: ' '});
        },
      },
      {
        headerName: 'Localisation',
        field: 'localisation',
      }
];

Then In my ngOnInit, in some conditions i need do add columns to my ag-grid.

I tried this following :

 this.gridOption.columnDefs.push(
                {
                  headerName: 'Block',
                  field: 'block',
                }, {
                  headerName: 'SDS/Hosp',
                  field: 'sdsOrHosp'
                }
              );
console.log(this.gridOption); //I see the new columns here so the add worked but i don't see them visual in my grid

also tried

 this.gridOption.columnDefs.push({ headerName: 'Bloc', field:'block'});
 this.gridOption.columnDefs.push({ headerName: 'SDS/Hosp', field:'SDSorHosp'});

Someone has an idea ? thanks

un.spike · Accepted Answer · 2018-09-25 20:05:56Z

7

You can't just push new values to columnDefs, I mean for sure you can but the flow doesn't work like that on ag-grid case.

So to achieve your goal (dynamically add\remove columnDefs) you need to use setColumnDefs(colDefs) method

setColumnDefs(colDefs) Call to set new column definitions into the grid. The grid will redraw all the column headers, and then redraw all of the rows.

So logically you just need to create the new array of columns and then call this.gridOption.api.setColumnDefs(...)

answered Sep 25, 2018 at 20:05

un.spike

5,1533 gold badges23 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Helene Over a year ago

Do you know if I can add to my gridOption 2 others column with hide: true and then set hide: false in certain conditions ?

kapil Over a year ago

Yes, You can do that to set hide property

kapil · Accepted Answer · 2018-09-26 12:36:30Z

3

If the columns you want to add dynamically is fixed and you want to hide/unhide these columns based on some conditions you can use the Hide property with a callback.

hide: true

answered Sep 26, 2018 at 12:36

kapil

4192 silver badges7 bronze badges

2 Comments

Helene Over a year ago

when i do this following this.gridOption.api.getColumnDef('key').hide = false; it doesn't work, the column is still hidden

Jett Over a year ago

Probably the simplest approach concerning this matter for me, rather than dynamically adding/removing columns

Collectives™ on Stack Overflow

Angular - ag-grid - add columns dynamically

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related