We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Tree Grid: Column Freeze and custom hide and show of columns not working at the same time

Hello,

I have one issue with the treegrid angular.

The goal is to dynamically show and hide columns if a row is collapsing or expanding

By default, 1 column is set to isFrozen = true and isShowColumns = false  (this is to work hide columns) -> This is working fine. 


The issue was when I tried to expand to show the columns, I used getColumnByField to set visible to true, otherwise. Then followed by calling refreshColumns() as in the document to reflect changes, but it doesn't work. No error in the console but the table is broken like an empty table. I tried not to call the refreshColumns() but it doesn't work or no changes on the table but the table is fine


component.ts
isShowColumns = false;

expanding(args: any): void {
if (args.data.id) {
this.expandedRows.push(args.data.id);
this.treegrid.getColumnByField('funding').visible = true;
this.treegrid.getColumnByField('fees').visible = true;
this.treegrid.refreshColumns();
}
}


component.html

<ejs-treegrid #treegrid [dataSource]="dataList"
[childMapping]="'testChild'" [treeColumnIndex]='1'
[enableCollapseAll]="true" rowHeight='70'
(collapsing)='collapsing($event)'
(expanding)='expanding($event)'>

<e-column field="test" headerText="test" isFrozen="true" width="100"
textAlign="Right">
<ng-template #template let-data>
<ng-container *ngIf="data.level > 0">
test
</ng-container>
</ng-template>
</e-column>
<e-column field="test1" headerText="test1" [visible]="isShowColumn" width="100" textAlign="Right">
<ng-template #template let-data>
test1
</ng-template>
</e-column>
<e-column field="test2" headerText="test2" width="100" textAlign="Right" [visible]="isShowColumn">
<ng-template #template let-data>
test2
</ng-template>

</ejs-treegrid>



1 Reply

PS Pon Selva Jeganathan Syncfusion Team November 8, 2022 12:56 PM


Hi Rosie,


Query: The issue was when I tried to expand to show the columns, I used getColumnByField to set visible to true, otherwise. Then followed by calling refreshColumns() as in the document to reflect changes, but it doesn't work


We checked your query by preparing a sample, but we were unable to replicate the issue at our end.


Please refer to the below sample,

https://stackblitz.com/edit/angular-eqmn4l?file=app.component.html,app.component.ts


Please refer to the below screenshot,


Initial rendering:


After expanding the record:




If you still facing issue after trying the above method, please provide the following information


  1. Complete treegrid code(both html and ts).
  2. Package version details.
  3. Confirm whether you have injected the frozen module in your application.
  4. Video demo / screenshot of the issue.
  5. If possible, try to reproduce the reported issue in the provided sample or share the reproducible sample.


The requested information will be helpful to proceed further.


Regards,
Pon selva






Loader.
Live Chat Icon For mobile
Up arrow icon