RefreshHeader not working

[adrian]

I have an Angular TreeGrid that I'm trying to update the headers on runtime but is not refreshing.

My component html:

<ejs-treegrid #usersGrid [dataSource]="dataUser" [treeColumnIndex]="0" childMapping="subtasks"

    autoCheckHierarchy="true">

    <e-columns>

      <e-column field="costCentre" [showCheckbox]="true"></e-column>

      <e-column field="position"></e-column>

      <e-column field="code"></e-column>

      <e-column field="name"></e-column>

    </e-columns>

  </ejs-treegrid>

and my refresh function:

import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

...

// users grid

@ViewChild('usersGrid') public usersGrid: TreeGridComponent;

...

ngOnInit(): void {

    this.langService.get('L29', 'Position').then((msg) => {

      console.log('l29', msg); // Puesto

      const column = this.usersGrid.getColumnByField('position');

      console.log(column); // Column object

      column.headerText = msg;

      console.log(column.headerText); // Puesto

      this.usersGrid.refresh(); // <- nothing happens

    });

  }

I have this same code working with GridComponents on other parts of my project

[Farveen Sulthana Thameeztheen Basha]

Hi Adrian, 

Thanks for contacting Syncfusion Support. 

 

Query#:- I have an Angular TreeGrid that I'm trying to update the headers on runtime but is not refreshing. 

 

We are able to replicate the reported problem at our end with your code example. To achieve this requirement, we suggest you to use refreshColumns method instead of refresh method to change the Header’s Text.  

Refer to the code example:- 

ngOnInit(): void { 

        this.data = projectData; 

        var proxy = this; 

        setTimeout(function(){  

           const column = proxy.treegrid.getColumnByField('StartDate'); // get the JSON object of the column corresponding to the field name 

           column.headerText = 'Changed Text'; // assign a new header text to the column 

           proxy.treegrid.refreshColumns();  

           }, 500); 

 

    } 

 

Also we need to change the HeaderText using setTimeout function after the TreeGrid creation as like given above. 

 

Sample Link:- https://stackblitz.com/edit/angular-3nthjm-mgxmph  

Refer to the API Link:- 

https://ej2.syncfusion.com/angular/documentation/api/treegrid/#refreshcolumns 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T