Row Selection

GanttPlugin can work with the RevoGrid Pro RowSelectPlugin when you want checkbox-based task selection in the task table.

Add a row-select column, register RowSelectPlugin, and enable the row-order bridge when selected rows should move together during Gantt row reordering.

import { GanttPlugin, isGanttAddTaskRow } from '@revolist/revogrid-enterprise';
import { RowSelectPlugin } from '@revolist/revogrid-pro';

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

grid.plugins = [GanttPlugin, RowSelectPlugin];
grid.rowSelect = {
  rowOrder: true,
};
grid.columns = [
  {
    prop: 'selected',
    name: '',
    rowSelect: ({ model }) => !isGanttAddTaskRow(model),
    size: 56,
    readonly: true,
    filter: false,
  },
  // Task table columns...
];

The checkbox column uses physical task rows from grid.source. Gantt ignores resource rows and non-task rows when resolving checkbox selection for task operations.

Use isGanttAddTaskRow() when taskCreateRow is enabled so the pinned “Add new task” row does not render a checkbox. See Add Task Row for the draft-row contract.

Bulk Gantt Operations

When no explicit task ids are passed, Gantt resolves task ids in this order:

1. Checkbox-selected rows from RowSelectPlugin.
2. Gantt task range selection.
3. The currently focused or selected Gantt task.

This means toolbar buttons, context-menu actions, keyboard handlers, or application code can call the existing Gantt methods without manually collecting checkbox state:

const plugins = await grid.getPlugins();
const gantt = plugins.find((plugin) => plugin instanceof GanttPlugin);

gantt?.deleteTasks();
gantt?.indentTasks();
gantt?.outdentTasks();
gantt?.convertTasksToMilestones();

After a successful delete, Gantt clears the row-select checkbox state for task rows so removed tasks do not remain selected in RowSelectPlugin.

Row Reordering

Gantt installs RowOrderPlugin internally. RowSelectPlugin does not automatically move all checked rows unless the row-select row-order integration is enabled:

grid.rowSelect = {
  rowOrder: true,
};

With rowOrder: true, dragging a checked task row moves the visible checked task rows as one compact block. Dragging an unchecked row keeps the normal Gantt row-order behavior.

Framework Bindings

React:

<RevoGrid
  plugins={[GanttPlugin, RowSelectPlugin]}
  rowSelect={{ rowOrder: true }}
  columns={[
    {
      prop: 'selected',
      name: '',
      rowSelect: ({ model }) => !isGanttAddTaskRow(model),
      size: 56,
      readonly: true,
      filter: false,
    },
    ...taskColumns,
  ]}
/>

Vue:

<RevoGrid
  :plugins="plugins"
  :row-select.prop="{ rowOrder: true }"
  :columns="columns"
/>

Angular:

<revo-grid
  [plugins]="plugins"
  [rowSelect]="{ rowOrder: true }"
  [columns]="columns"
></revo-grid>

For Vue Gantt examples, use .prop for row-select because it is a direct grid plugin property.