Our state of the art Gantt chart


Post by eugenia.kim »

We've been disabling features by asserting sortFeature: false or headerMenuFeature: false. When trying to do this with taskDrag, taskDragCreate, taskEdit, and taskResize, the behaviors are not disabled. (ie. when setting taskDragFeature: false it doesn't work). Can you explain why these specific features need to be set in a features object whereas others like sort and headerMenu do not? Should we be nesting everything into a features object?

features: {
    taskDrag: false,
    taskDragCreate: false,
    taskEdit: false,
    taskResize: false
  },
    headerMenuFeature: false,
    sortFeature: false,

Post by mats »

Are you using one of the React / Angular or Vue wrappers? Can you please post full config / code?


Post by eugenia.kim »

We aren't using a wrapper. Just adding this config object to BryntumGantt component

const timelineConfig = {
  cellEditFeature: false,
  columns: [
    {
      cls: 'plan-TimelineHeader plan-TimelineHeader--title',
      cellCls: 'plan-TimelineCell plan-TimelineCell--title',
      collapseIconCls: 'icon-chevron-up',
      draggable: false,
      expandIconCls: 'icon-chevron-down',
      leafIconCls: 'plan-TimelineCell--leaf',
      type: 'name',
      text: 'Title',
      tree: true,
      renderer: ({record, value}: {record: any, value: string}) => {
        return record.id === `loadMore${record.parent.id}` ?
          <TimelineCell cellType="loadMore" record={record} value={value} />
          :
          <TimelineCell cellType="name" record={record} value={value} />;
      },
      width: 300,
    },
    {
      cls: 'plan-TimelineHeader plan-TimelineHeader--reference',
      cellCls: 'plan-TimelineCell plan-TimelineCell--reference',
      field: 'reference',
      type: 'reference'
    },
  ],
  columnReorderFeature: false,
  contextMenuFeature: false,
  dependencyEditFeature: false,
  features: {
    taskDrag: false,
    taskDragCreate: false,
    taskEdit: false,
    taskResize: false
  },
  headerMenuFeature: false,
  percentBarFeature: true,
  rowHeight: 41,
  rowReorderFeature: false,
  sortFeature: false,
  taskMenuFeature: false,
  taskTooltipFeature: false,
  timeAxisHeaderMenuFeature: false,
  timeRangesFeature: {
    showCurrentTimeLine: {
      cls: 'current-date-marker',
    },
  },
  treeFeature: {
    enableDrag: false
  },
  viewPreset: 'year',
  zoomOnTimeAxisDoubleClick: false
};

<BryntumGantt
          {...timelineConfig}
          project={this.project}
          ref={this.ganttRef}
          listeners={{
            expandNode: this.handleExpandNode,
            cellClick: this.handleCellClick,
          }}
        />

Post by mats »

Then you should use the 'features' block always. Put 'columnReorder' inside, e.g.


  features: {
    taskDrag: false,
    taskDragCreate: false,
    taskEdit: false,
    taskResize: false,
    columnReorder: false,
  contextMenu: false,
  dependencyEdit: false,
  },

Post Reply