Ag-Grid AutoGroupColumnDef how to work after setColumnDef() function call?

Question

I'm using Ag-Grid in my Angular 9 project. I want to use tree structure on this Ag-Grid table. My columns are dynamic. So I'm using push to columnDefs. After all of this, I'm doing setColumnDefs function. But after that, AutoGroupColumnDef attribute is not working. When I try to use static columnDefs without setColumnDef everything is okay.

So how can I use autoGroupColumnDef after setColumnDefs function? Is there any way? Thanks.

Working autoGroupColumnDef without setColumnDef function:

this.autoGroupColumnDef = {
                headerName: 'Organisation Hierarchy',
                minWidth: 300,
                cellRendererParams: {
                  suppressCount: true,
                },
              };

My dynamic column example:

for (var i = 0; i < result2.data.data.length; i++) {
                this.columnDefs.push({
                  headerName: result2.data.data[i].description,
                  field: result2.data.data[i].description,
                  valueFormatter: this.checkboxValueFormatter,
                  width: 150,
                  editable: false,
                  filter: 'agSetColumnFilter',
                  filterParams: {
                    valueFormatter: this.checkboxValueFormatter
                  },
                  cellRenderer: function(params: any) {
                    var input = document.createElement('input');
                    input.type = 'checkbox';
                    input.name = 'roles[]';
                    // input.disabled=true;
                    // 1 true 0 false
                    if (params.value) {
                      input.checked = params.value;
                    } else {
                      input.disabled = true;
                    }
                    return input;
                  }
                });
              }
              this.gridApi.setColumnDefs(this.columnDefs);

GreyBeardedGeek GreyBeardedGeek · Accepted Answer · 2020-05-22T18:38:00

I have working code that changes the ColumnDefs dynamically, but I don't think that I've tried also changing the autoGroupColumnDef.

But, when using Angular, whether you are binding your columnDefs to the grid's input, or using the setColumnDefs api, I have discovered a couple of things:

As usual with bound properties, you probably want to use a new array for your columnDefs, and not just push new columns into the existing array.
The grid tends to mis-behave when you set columnDefs a second time, especially if your new columnDefs has columns with names that existed in the old columnDefs. So set the columnDefs to an empty array first, which correctly clears them out, and then set your new columnDefs. I found this by trial and error.

So, I would try updating the autoGroupColumnDef, and then (maybe after a setTimeout()), setting the columnDefs to an empty array, and then (no need to wait for a setTimeout in my experience) set the columnDefs to a new array containing your new columns.

Ag-Grid AutoGroupColumnDef how to work after setColumnDef() function call?

1 Answers