Refresh grid after adding new columns doesn't work

Question

I have tried to render the changes when I adding or remove columns. This is my code:HTML

....

TSaddNewColumns(){ this.newColumns.forEach(column=> { this.columns.push({ field: column.field, headerText: column.header, width: "90"}) })}Grid only show the new columns when I refresh the browser, I have tried all of solution that I found out in forums and documentations, for example:-grid.refresh() and grid.refreshColumns() after changed columns data.I tried this solution grid doesn't refresh. this.grid.setProperties({ columnModel: this.columns },false) this.grid.refresh()thanks for your help.

Sujith Kumar Rajkumar · Accepted Answer

Hi Peter, 
 
Greetings from Syncfusion support. 
 
We checked your query and could understand that your requirement is to push new columns to the Grid dynamically. Using your approach the columns might not be updated and regenerated properly in the Grid causing your reported problem. 
 
So you can achieve this requirement by directly pushing the new column to the Grid’s columns property(which can be accessed using its instance) and then refreshing the columns by calling the Grid’s refreshColumns method. This is demonstrated in the below code snippet, 
 




// Button click function 
onClick() { 
      if (this.flag) { 
          // Each new column is pushed directly to the Grid columns 
          this.newColumns.forEach(column=> { 
            this.gridObj.columns.push(column); 
          }); 
          // Grid columns are refreshed 
          this.gridObj.refreshColumns(); 
          this.flag = false; 
      } 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
Sample: https://stackblitz.com/edit/angular-bymzaz?file=app.component.ts  
 
API links: https://ej2.syncfusion.com/angular/documentation/api/grid/#columns  
                  https://ej2.syncfusion.com/angular/documentation/api/grid/#refreshcolumns  
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R

PeterXG · Answer

it works, thank you. But now I have another problem.After adding new columns the ng-template disapear.HTML

I need to know the column where I clicked so I send in change event the column parameter. I set template in TS file like this:{headerText: 'example', textAlign: 'Center', template: template, width: 150 Where Template is defined in HTML and set in TypeScript code but that solution doesn't work for me because I can´t know the specific column where I clicked and send into a change event in ejs-checkbox. Is it possible the scenario that I want to?Thanks for your help.

Sujith Kumar Rajkumar · Answer

Hi Peter, 
 
We are glad to hear that your previous query has been resolved. As for your other problem – “After adding new columns the ng-template disappear.”, we could understand that you wish to add the column template to the dynamically added columns. You can achieve this requirement by accessing the template reference in the TS file using angular ‘ViewChild’ and assigning it to the Grid columns template property. This is demonstrated in the below code snippet, 
 




export class AppComponent { 
    // Template is accessed using its selector id 
    @ViewChild('template') template: TemplateRef<{}>; 
 
    ngOnInit(): void { 
        this.newColumns = [ 
          { 
            field: 'ShipCountry', 
            headerText: 'Ship Country', 
            width: '120' 
          }, 
          { 
            field: 'ShipName', 
            headerText: 'Ship Name', 
            width: '140' 
          } 
        ] 
    } 
 
    onClick() { 
      if (this.flag) { 
      this.newColumns.forEach(column=> { 
        // Template reference accessed is set to the Grid columns template property 
        column.template = this.template; 
        this.gridObj.columns.push(column); 
      }); 
      this.gridObj.refreshColumns(); 
      this.flag = false; 
      } 
    }  
} 
 
We have modified the previously provided sample based on this for your reference. You can find it below, 
 
Sample: https://stackblitz.com/edit/angular-bymzaz-vt3npf?file=app.component.ts  
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R