CODEWITHSUNDEEP
angularag-gridangular-changedetection
classact
classact

Reputation: 51

Ag-grid defaultColDef not re-applied after initial component load

Ag-grid applies defaultColDef formatting (cellStyle and cellRenderer) perfectly using ngOnChanges when the table initially receives async-retrieved data. However, if the component containing the grid is hidden and then re-initialized via an *ngIf condition, the table is re-populated with the correct data, but defaultColDef formatting is not reapplied even though the ngOnChanges is triggered again just as before, and this.gridOptions.defaultColDef = this.defaultColDef; is set within the onGridReady callback in ngOnChanges, and I can see this.defaultColDef is defined to be the correct object during debugging.

This is even if this.defaultColDef is redefined again in ngOnInit() and even again in ngOnChanges() (just included in the constructor in below sample code for conciseness). Also if the entire onGridReady: (params) call is repeated inside ngOnInit().

If instead the same cellStyle and cellRenderer are assigned to the columnDefs as properties when the columnDefs object is constructed in the parent, then the formatting is correctly applied when the grid component is hidden and re-shown (re-initialized).

 export class ResultsTableComponent implements OnInit, OnChanges {
 @Input() label;
 gridOptions: GridOptions ;
 gridApi;
defaultColDef;

 get query(): string {
     return this.searchService.query;
 };
 get rowData() {
     return this.searchService.rowDataForAgGrid;
 };
 @Input()
 set rowData(value) {
     this.searchService.rowDataForAgGrid=value;
 };
 get columnDefs() {
     return this.searchService.columnDefsForGrid;
 };
 @Input()
 set columnDefs(value) {
     this.searchService.columnDefsForGrid=value;
 };

 constructor(private searchService: SearchService) {

   this.defaultColDef = {
     editable: true,
     cellStyle: function(params) {
       if (params.value == 'FAIL') {
           return {color: 'white', backgroundColor: 'red',  textAlign: 'center'};
       }  if (params.value == 'PASS') {
         return {color: 'white', backgroundColor: 'forestgreen', textAlign: 'center'};
       }  if (params.value == 'SKIP') {
         return {color: 'white', backgroundColor: 'royalblue', textAlign: 'center'};
       }  if (params.value == 'NOT RUN') {
         return {color: 'white', backgroundColor: 'lightgray', textAlign: 'center'};
       } else {
           return null;
       }
     },
     cellRenderer: function (params) {
     if (params.value && (typeof params.value == 'string') &&  params.value.includes('http://')) {
         return `<a href='${params.value}' >${params.value}</a>` ;
     } else if (params.colDef.field.includes('name')) {
         return `<a href='/Detail.html?id=${params.data.DocumentId}'  target='_blank'>${params.value}</a>` ;
     } else if (params.colDef.field.includes('DocumentId')) {
       return `<a href='/Triage.html?id=${params.data.DocumentId}' target='_blank'>${params.value}</a>` ;
     } else {
          return params.value;}
       },
 };
   this.gridOptions = <GridOptions>{
     columnDefs: [],
     rowData: [],
     defaultColDef: this.defaultColDef,
     groupSelectsChildren: true,
     suppressRowClickSelection: true,
     rowSelection: 'multiple',
     enableColResize: true,
     enableSorting: true,
     enableFilter: true,
     rowHeight: 45,
     isExternalFilterPresent: this.isExternalFilterPresent,
     doesExternalFilterPass: this.doesExternalFilterPass,
   };
   this.gridOptions = {
     onGridReady: (params) =>  setTimeout(function(){
       this.gridApi = params.api,0
     }),
   };
   this.label = 'all';
 }

 ngOnInit() {
}

 ngOnChanges(changes: SimpleChanges) {

   this.gridOptions = {
     onGridReady: (params) => {
       this.gridApi = params.api;
       this.gridOptions.api.setRowData(this.rowData);
       this.gridOptions.defaultColDef = this.defaultColDef;
       this.gridOptions.api.setColumnDefs(this.columnDefs);
       this.gridOptions.api.refreshHeader();
       this.gridOptions.api.refreshCells({force : true});
       this.gridOptions.isExternalFilterPresent  =     this.isExternalFilterPresent.bind(this);
       this.gridOptions.doesExternalFilterPass = this.doesExternalFilterPass.bind(this)
      },
     rowSelection: 'multiple',
     enableColResize: true,
     enableSorting: true,
     enableFilter: true,
   };
  if (changes.label && changes.label.currentValue != changes.label.previousValue) {
     this.externalFilterChanged(this.label);
   }
 }

Actual result: Columns and rows are populated correctly after re-init of component, but defaultColDef not applied.

Expected result: defaultColDef applied after re-init of component after hide->show.

Upvotes: 5

Views: 2228

Answers (1)

Stephen Cooper
Stephen Cooper

Reputation: 1454

If you replace the line

this.gridOptions.defaultColDef = this.defaultColDef;

with

this.gridOptions.setDefaultColDef(this.defaultColDef);

then I would expect that to work as you are expecting.

If you pass the gridOptions object to the <ag-grid-angular> template then currently making changes to that will not be reflected.

However, you can do the following and the Grid will update defaultColDef.

<ag-grid-angular [defaultColDef]="defaultColDef">

// in component assigning a new object will update the grid.
this.defaultColDef = newDefaults;

Upvotes: 0

Related Questions