Gantt Context Menu

Gantt installs a Gantt-aware context menu on top of the RevoGrid Pro ContextMenuPlugin. It uses the existing rowContextMenu, columnContextMenu, and legacy contextMenu grid properties instead of introducing a separate menu renderer.

The Gantt plugin prepends generated menu items and preserves application-provided menu items.

The integration is enabled by default for every GanttPlugin instance. Set gantt.contextMenu to false to opt out of generated Gantt row, column, and timeline menu items while leaving application-provided RevoGrid context menu configuration untouched:

grid.gantt = {
  ...project,
  contextMenu: false,
};

You can also disable one generated surface at a time:

grid.gantt = {
  ...project,
  contextMenu: {
    row: false,
    column: true,
  },
};

Row Menu

Right-click a task-table row or task bar to open task actions:

• Add task
• Indent task
• Outdent task
• Delete task

The default actions dispatch Gantt events:

grid.addEventListener('gantt-task-create', (event) => {
  const { parentId, insertAfterTaskId } = event.detail ?? {};
});

grid.addEventListener('gantt-task-indent', (event) => {
  indentTask(event.detail?.taskId);
});

grid.addEventListener('gantt-task-outdent', (event) => {
  outdentTask(event.detail?.taskId);
});

grid.addEventListener('gantt-task-delete', (event) => {
  deleteTask(event.detail?.taskId);
});

Add task uses the focused row or clicked task bar as the insertion anchor. When the anchor has descendants, Gantt inserts the new sibling after the full descendant block so the task tree stays valid.

Column Menu

Right-click main grid headers to open column actions:

• Search tasks
• Sort ascending
• Sort descending
• Filter column

Visibility follows the active column:

• Search appears only when the task/name column has filter configured.
• Sort actions appear only when the target column has sortable: true.
• Filter appears only when the target column has filter configured.
• If contextual filtering leaves no visible items, the menu is not opened.

Search dispatches gantt-search with the query entered in the prompt. Sort uses RevoGrid column sorting. Filter opens the existing filter header control for the column.

Timeline Menu

Right-click the pinned Gantt timeline/canvas header to open timeline actions:

• Zoom in
• Zoom out

Zoom actions are hidden when the current zoom level cannot move further in that direction. If neither direction is available, the menu is not opened.

Read-Only And Locked State

The row menu respects packaged Gantt protection state:

• gantt.readOnly: true hides mutating row actions.
• Selected locked tasks hide hierarchy actions.
• Mutation services still guard direct calls, so blocked task operations return readonly-task.

Extending The Menu

Use the normal RevoGrid Pro menu config surfaces. Gantt prepends its generated items and keeps your custom items.

grid.rowContextMenu = {
  items: [
    {
      name: 'Open task details',
      action: (_event, focused, _range, _close, context) => {
        const task = context?.providers.data.getModel?.(focused?.y ?? 0, 'rgRow');
        openTaskDetails(task?.id);
      },
    },
  ],
};

Customization

Gantt context menu customization has two layers:

• gantt.contextMenu controls the generated Gantt row, column, and timeline actions.
• rowContextMenu, columnContextMenu, and legacy contextMenu hold application menu config that should remain in the grid even when generated Gantt actions are disabled.

Use gantt.contextMenu = false when the application should fully own the menu:

grid.rowContextMenu = {
  items: [
    {
      name: 'Open planning panel',
      action: (_event, focused, _range, close, context) => {
        const task = context?.providers.data.getModel?.(focused?.y ?? 0, 'rgRow');
        openPlanningPanel(task?.id);
        close();
      },
    },
  ],
};

grid.gantt = {
  ...project,
  contextMenu: false,
};

Use partial opt-out when you want custom row actions but still want generated column and timeline actions:

grid.rowContextMenu = {
  items: [
    {
      name: 'Assign owner',
      action: (_event, focused, _range, close, context) => {
        const task = context?.providers.data.getModel?.(focused?.y ?? 0, 'rgRow');
        openOwnerPicker(task?.id);
        close();
      },
    },
  ],
};

grid.gantt = {
  ...project,
  contextMenu: {
    row: false,
    column: true,
  },
};

Keep gantt.contextMenu enabled when you want to append app actions after the default Gantt actions:

grid.rowContextMenu = {
  items: [
    {
      name: 'Show audit log',
      action: (_event, focused, _range, close, context) => {
        const task = context?.providers.data.getModel?.(focused?.y ?? 0, 'rgRow');
        showTaskAuditLog(task?.id);
        close();
      },
    },
  ],
};

grid.gantt = project;

You can also use a resolve function on the base RevoGrid menu config. Gantt preserves the resolver and passes the composed config through the context menu plugin:

grid.rowContextMenu = {
  items: [
    { name: 'Open task details', action: openTaskDetailsFromMenu },
  ],
  resolve(context) {
    return context.target === 'row' ? undefined : null;
  },
};

The packaged task editor item is controlled separately:

grid.ganttTaskEditorDialog = {
  contextMenu: false,
};

Set ganttTaskEditorDialog.contextMenu to true when gantt.contextMenu is disabled but the application still wants the default Edit task… item. Leave it unset to follow gantt.contextMenu.

For packaged extension examples, use the quick-win recipe:

const customItems = createGanttContextMenuQuickWinRecipe({
  duplicate: {
    copyName: (task) => `${task.name ?? 'Task'} copy`,
  },
  assignResource: {
    onAssignResource: (context) => {
      if (context.taskId) {
        openResourcePicker(context.taskId);
      }
    },
  },
  delete: false,
  export: { name: 'Export task rows' },
});

grid.rowContextMenu = {
  ...grid.rowContextMenu,
  items: [...(grid.rowContextMenu?.items ?? []), ...customItems],
};

Legacy Context Menu

If rowContextMenu is not supplied, Gantt treats grid.contextMenu as the base row menu. Column actions use grid.columnContextMenu.

Generated Gantt items are removed and rebuilt when the Gantt context menu tool refreshes, so application-provided items are not duplicated.

The packaged task editor follows gantt.contextMenu by default for its Edit task… row-menu item. Set ganttTaskEditorDialog.contextMenu to false to disable only the editor item, or true to keep the editor item when generated Gantt menus are disabled.