Freeze columns after dynamically change treegrid columns

[Jeffery]

Hi

I have rendered the grid with columns defined by an array of objects using ng-for:

<ejs-treegrid #treegrid [dataSource]='data' childMapping='subtasks' [treeColumnIndex]='1' height='310' [frozenColumns]='frozenColumns' [allowSelection]='false'>

        <e-columns>

           <e-column [field]='item.field' [headerText]='item.headerText' width='120' textAlign='Right' *ngFor="let item of columns"></e-column>

        </e-columns>

    </ejs-treegrid>

I will dynamically set or change columns by:

this.columns = [

      { field: 'taskID', headerText: 'taskID' },

      { field: 'taskName', headerText: 'taskName' },

      { field: 'duration', headerText: 'duration' },

      { field: 'progress', headerText: 'progress' },

      { field: 'priority', headerText: 'priority' },

    ];

Then i got errors when I set  frozenColumns = 2.

u can see  sample here:

https://stackblitz.com/edit/angular-zyv9nj?file=app.component.ts

Could u help me to solve this problem?

Thx

Regards

[Pon Selva Jeganathan]

Hi Jeffery, 

 

Thanks for contacting syncfusion forum.   

We checked your shared sample,  we are able to reproduce the issue(Facing script error while Freeze columns after dynamically change treegrid columns) at our end. And we need time to validate the issue and we will provide further details by 15^th November 2021.  

 

Until then we value your patience. 

 

Regards,   

Pon selva   

[Jeffery]

Hi Pon selva, 

 Thank you for the reply. Looking forward to getting your further details.

Regards.

[Pon Selva Jeganathan]

Hi Jeffery, 

 

On further analyzing of your sample, In Frozen columns function and change column function, you have assigned property in reference variable.  So, we suggest you , if you change any tree grid properties, you can change through the tree gridInstance. If you make any changes to a column, you need to call the treegrid's  refreshColumns method. 

Please refer to the below code snippet, 

Your code: 

handleChangeColumns() { 

    this.columns = [ 

      { field: 'taskID', headerText: 'taskID' }, 

      { field: 'taskName', headerText: 'taskName' }, 

      { field: 'duration', headerText: 'duration' }, 

      { field: 'progress', headerText: 'progress' }, 

      { field: 'priority', headerText: 'priority' }, 

    ]; 

 

    // this.treegrid.refresh(); 

  } 

 

  handleFreezeColumns() { 

    this.frozenColumns = 2; 

  } 

Modified code: 

 handleChangeColumns() { 

    this.grid.columns = [ 

      { field: 'taskID', headerText: 'taskID' }, 

      { field: 'taskName', headerText: 'taskName' }, 

    ]; 

    

    this.grid.refreshColumns(); 

     

  } 

 

  handleFreezeColumns() { 

    

    this.grid.frozenColumns = 1; 

  } 

Please refer to the below modify sample,

https://stackblitz.com/edit/angular-zyv9nj-vlfvjp?file=app.component.ts

Please refer to the below API documentation,

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

 

Kindly get back to us for further assistance. 

 

Regards,   

Pon selva   

[Jeffery]

Hi Pon selva  Jeganathan,

Thx for your help. 

It seems there are  still some problems with assigning  tree-grid columns property directly. But this issue can be solved by 'splice' or 'push'.

 this.grid.columns.splice(

   1,

   0,

   { field: 'taskID', headerText: 'taskID' }, 

   { field: 'taskName', headerText: 'taskName' }, 

)

 rather than

this.grid.columns = [ 

      { field: 'taskID', headerText: 'taskID' }, 

      { field: 'taskName', headerText: 'taskName' }, 

    ]; 

plz refer to the below sample:

https://stackblitz.com/edit/angular-zyv9nj-t9yovi?file=app.component.ts

Regards, 

Jeffery

[Jagadesh Ram Raajkumar]

Hi Jeffery, 

Thanks for the update.

We are glad that your query has been resolved. Kindly get back to us for further assistance. 

Regards,
Jagadesh Ram