Toolbar And Navigation

These helpers let your application render its own toolbar while reusing Gantt command behavior.

The built-in defineGanttToolbar() command bar includes an Excel export icon button by default. The button dispatches the same Pro export-excel event as exportGanttExcel(), so add ExportExcelPlugin to the grid when you want the packaged plugin to create the workbook. Hide it with controls: { exportExcel: false } or hide the export group with controls: { export: false }.

Built-In Toolbar

Use defineGanttToolbar() when you want the packaged Gantt command bar instead of rendering your own buttons. Mount it after assigning grid.gantt so it can read the initial visual state.

import { defineGanttToolbar } from '@revolist/revogrid-enterprise';

const toolbar = document.querySelector<HTMLElement>('#gantt-toolbar');
const grid = document.querySelector<HTMLRevoGridElement>('revo-grid');

if (!toolbar || !grid) {
  throw new Error('Gantt toolbar host or grid was not found');
}

grid.gantt = projectConfig;

defineGanttToolbar(toolbar, {
  grid,
  columns: [
    { prop: 'wbs', label: 'WBS' },
    { prop: 'name', label: 'Name' },
    { prop: 'startDate', label: 'Start Date' },
    { prop: 'duration', label: 'Duration' },
  ],
  visuals: {
    showDependencies: true,
    showBaseline: false,
    showCriticalPath: false,
  },
});

Control Visibility

Every built-in toolbar option can be hidden with controls. Omitted control flags are visible by default, except baseline, which is opt-in.

defineGanttToolbar(toolbar, {
  grid,
  controls: {
    search: false,
    history: false,
    tree: false,
    zoom: true,
    zoomOut: false,
    tasks: true,
    indent: false,
    outdent: false,
    export: false,
    columns: false,
    dependencies: true,
    baseline: false,
    criticalPath: true,
  },
});

Parent group flags hide their child buttons:

Parent flag	Child buttons
history	undo, redo
tree	expandAll, collapseAll
zoom	zoomIn, zoomOut
tasks	addTask, indent, outdent
export	exportExcel

Leaf flags hide individual controls: search, columns, dependencies, baseline, and criticalPath.

Hidden visual controls do not write their local defaults back into grid.gantt.visuals. You can still set hidden visual behavior directly in grid.gantt.visuals.

The dependency toggle is display-only. Turning it off updates grid.gantt.visuals.showDependencies = false, which hides dependency arrows without clearing grid.ganttDependencies or changing scheduler dependency inputs.

import {
  captureGanttBaseline,
  createGanttToolbarQuickWinActions,
  exportGanttCsv,
  exportGanttExcel,
  fitGanttToProject,
  listGanttToolbarQuickWinActions,
  scrollGanttToToday,
  toggleGanttCriticalPath,
} from '@revolist/revogrid-enterprise';

Direct Commands

Use direct helpers when you already know which button was clicked.

const grid = document.querySelector<HTMLRevoGridElement>('revo-grid');

if (!grid) {
  throw new Error('Gantt grid was not found');
}

await exportGanttCsv(grid, { filename: 'launch-plan' });
exportGanttExcel(grid, { workbookName: 'launch-plan.xlsx' });

await captureGanttBaseline(grid, { name: 'Sprint baseline' });
const criticalPathVisible = toggleGanttCriticalPath(grid);

await scrollGanttToToday(grid, { align: 0.5 });
await fitGanttToProject(grid, { viewportWidth: grid.clientWidth });

Command Descriptors

Use createGanttToolbarQuickWinActions() when a framework toolbar should render generic command objects. Creating descriptors does not export, scroll, or mutate the grid. Work happens only when run() is called.

const actions = createGanttToolbarQuickWinActions(grid, {
  csv: { filename: 'launch-plan' },
  excel: { workbookName: 'launch-plan.xlsx' },
  baseline: { name: 'Sprint baseline' },
  today: { align: 0.5 },
  fitToProject: { viewportWidth: grid.clientWidth },
});

for (const action of listGanttToolbarQuickWinActions(actions)) {
  renderButton({
    id: action.id,
    label: action.label,
    title: action.title,
    onClick: () => void action.run(),
  });
}

declare function renderButton(command: {
  id: string;
  label: string;
  title: string;
  onClick: () => void;
}): void;

Disable individual commands by passing false.

const readonlyActions = createGanttToolbarQuickWinActions(grid, {
  csv: false,
  baseline: false,
});

Behavior Notes

• CSV export uses the RevoGrid export plugin when a plugin with exportFile() is installed.
• Excel export dispatches the Pro Excel export event on the grid.
• Baseline capture looks for the Gantt runtime and appends the captured snapshot to grid.ganttBaselines.
• Critical path toggling updates grid.gantt.visuals.showCriticalPath.
• Today and fit-to-project navigation delegate to runtime methods when available, otherwise they compute timeline coordinates and call grid.scrollToCoordinate().