columns visible property isn't working.

[Naresh Singh]

Hi, I'm angular version 10 and angular gantt version 19.

while creating gantt columns.

I'm setting visible false ​ for some columns but this property is not working do not why,

Regards,
Naresh Singh

[Monisha Sivanthilingam]

Hi Naresh, 

 

Greetings from Syncfusion support. 

 

The visible: false property is working fine for us. We were able to hide the columns using the visible: false property. What are the columns that you are trying to hide ? We have attached the sample we used to validate your issue below. If possible, please modify it to replicate your issue or provide an issue reproducible sample of your own. 

 

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

 

Any information you could share with us will be useful to us in providing a solution to you. 

 

Regards, 

Monisha. 

[Naresh Singh]

Thanks for your response.

Yes, For the first time when the component is loaded then the column visible property works. but on click event. when i try to set visible property true to false or vice versa of any specific column it doesn't work.

Here is a stackblitz example: dummy-project

Does the visible property of the column work only when the component loaded first time?

Reegards,

Naresh Singh

[Monisha Sivanthilingam]

Hi Naresh, 

 

Thank you for providing the details of your requirement. 

 

In the columns property some of the fields do not have the visible property. However, if you access the columns from the Gantt object, you will be able to achieve your requirement. The following code snippets demonstrate the solution. 

 

App.component.ts 

 

onClick() { 

  this.ganttObj.columns.forEach(c => { 

    if (c['field'] === 'TaskID') { 

        c['visible'] = false; 

    } 

 

    if (c['field'] === 'StartDate') { 

        c['visible'] = true; 

    } 

  }); 

  this.ganttObj.refresh(); 

} 

 

 

We have modified your sample according to our suggestions. 

 

We also have methods to show/hide columns dynamically. They are showColumn and hideColumn respectively. Please refer the below documentation for more information. 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/gantt/columns/#show-or-hide-columns-dynamically 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha.