ColumnsDirective's columns values not showing when columns are being added dynamically

Question

I need to show ColumnsDirective dynamically based on the user selection among many fields which may be not only the standard ones that the GanttComponent use as those shown in the Get started documentation:

this.taskFields = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks',
    };

When those other fields are included among ColumnsDirective on the initial GanttComponent display, values on the columns cells will show

but when those fields are added dynamically later on after the initial display their values won't show in their columns cells.

Here is a stackblitz showing the issue (screenshot)

I tried predefine those columns in the taskFields initially even before their dynamic add in ColumnsDirective but that didn't solve the problem.

Answer 1

Instead of refreshing the whole Gantt, we recommend you to change the column visibility dynamically by using showColumn and hideColumn public method.

<button type="button" onClick={ev => { 
   if (this.ganttInstance.getGridColumns()[2].visible) { 
     this.ganttInstance.hideColumn('fieldXX1'); 
   } 
   else { 
      this.ganttInstance.showColumn('fieldXX1'); 
   } 
}}>Change Comlumns</button>

Sample - https://stackblitz.com/edit/react-6lscfc-yqzk6h?file=index.js

We have also provided solution, for refreshing the whole gantt using refresh method.

<button type="button" onClick={ev => { 
       //... 
  setTimeout(function () { 
    var obj = document.getElementById('Default').ej2_instances[0]; 
      obj.refresh(); 
  }, 100); 
}}>Change Columns</button> 

Sample - https://stackblitz.com/edit/react-6lscfc-n3xgjh?file=index.js