ColumnsDirective 的列值在动态添加列时不显示

Question

我需要根据用户在许多字段中的选择动态显示 ColumnsDirective，这可能不仅是 GanttComponent 的标准字段按照入门文档中所示的方式使用：

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

当初始 GanttComponent 显示中的 ColumnsDirective 中包含这些其他字段时，列单元格上的值将显示

但是当这些字段在初始显示后动态添加时，它们的值将不会显示在它们的列单元格中。

这是一个stackblitz showing the issue (screenshot)

我尝试在 ColumnsDirective 中动态添加之前就在 taskFields 中预先定义这些列，但这并没有解决问题。

Answer 1

我们建议您使用 showColumn 和 hideColumn public 方法动态更改列可见性，而不是刷新整个甘特图。

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

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

我们也提供了解决方案，使用refresh方法刷新整个甘特图。

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

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

ColumnsDirective 的列值在动态添加列时不显示

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

gantt-chart

syncfusion

reactjs