Our state of the art Gantt chart


Post by julian.sanchez »

Hello,

I am working with the tree grouping feature and I notice that when a group is applied I get a console error after moving/editing an event. when I remove the feature this error is gone so I wonder if you know what is causing it. the error seems to indicate that somehow the store loses event references after grouping is applied and there is a re-render.
this is my config object:

export const schedulerProps: BryntumSchedulerProProps = {
  multiEventSelect: false,

  rowHeight: 30,
  barMargin: 3,
  tickSize: 100,
  resourceMargin: 3,
  minZoomLevel: 2,
  dependenciesFeature: false,
  scheduleMenuFeature: false,
  panFeature: true,
  treeFeature: true,
  regionResizeFeature: true,
  resourceTimeRangesFeature: {
    disabled: false,
  },
  filterFeature: true,
  eventLayout: hierarchyEventLayout,
  treeGroupFeature: {
    disabled: true,
    hideGroupedColumns: true,
  },
  timeRangesFeature: {
    enableResizing: true,
    showHeaderElements: true,
  },
  eventDragFeature: { constrainDragToResource: true },
  eventDragCreateFeature: false,
  eventDragSelectFeature: true,
  scrollButtonsFeature: true,
  taskEditFeature: { disabled: true },
  eventResizeFeature: { disabled: false },
  cellEditFeature: false,
  eventMenuFeature: { disabled: true },
  resourceMenuFeature: { disabled: true },
  cellMenuFeature: { disabled: true },
  selectionMode: {
    row: true,
    multiSelect: true,
    dragSelect: true,
    deselectOnClick: true,
  },
  selectResourceOnScheduleClick: false,
  selectResourceOnEventNavigate: false,
  subGridConfigs: {
    locked: {
      width: window.innerWidth * 0.33,
    },
  },
  autoHeight: false,
  minHeight: 240,
  tbar: ['Drag columns here to group', { type: 'groupbar' as const }],
}

then I have a schedulerProProps for dynamic data

  const columnsConfig = useMemo(() => getColumnsConfig(resources), [resources])

  const project = useMemo(
    () => ({
      validateResponse: true,
      stm: { autoRecord: true, disabled: false },
      resourceModelClass: MecResourceModel,
      eventModelClass: MecEventModel,
    }),
    []
  )

  const schedulerProProps: Partial<BryntumSchedulerProProps> = useMemo(
    () => ({
      project,
      startDate: dayjs(startDate).format('YYYY-MM-DD'),
      endDate: dayjs(endDate).format('YYYY-MM-DD'),
      maxDate: dayjs(lastEventDate).add(1, 'month').format('YYYY-MM-DD'),
      minDate: dayjs(firstEventDate).subtract(1, 'month').format('YYYY-MM-DD'),
      eventStyle: 'traced',
      eventLayout: hierarchyEventLayout,
      presets: mecPresets,
      viewPreset: activePreset,
      minZoomLevel: 0,
      maxZoomLevel: mecPresets.length - 1,
      timeRanges: NIGHT_BAND_PRESETS.has(activePreset) ? nightShiftRanges : [],
      resources,
      events,
      eventRenderer,
      columns: columnsConfig as GridColumnConfig[],
    }),
    [
      startDate,
      endDate,
      lastEventDate,
      firstEventDate,
      activePreset,
      nightShiftRanges,
      resources,
      events,
      eventRenderer,
      columnsConfig,
      project,
    ]
  )
  

Thanks,

Attachments
BryntumTreeGroupingIssue.png
BryntumTreeGroupingIssue.png (80.01 KiB) Viewed 3561 times

Post by tasnim »

Hi there,

How can we reproduce it? Are you able to reproduce with any of our examples here https://bryntum.com/products/scheduler/examples/?

If not, could you please share a runnable test case so we can check locally what's wrong?

Best regards,
Tasnim

How to ask for help? Please read our Support Policy


Post Reply