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

[Rosie Jane Reseloza Enomar]

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>

[Pon Selva Jeganathan]

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