Skip to content

Range Selection Limit

RangeSelectionLimitPlugin keeps user-created range selections in one dimension. Use it when a workflow accepts row-only or column-only bulk actions and should not allow rectangular selections.

The plugin does not replace RevoGrid selection. It intercepts the pending range at the beforeapplyrange lifecycle point, constrains the shape, and then lets the normal setrange flow continue.

import { RangeSelectionLimitPlugin } from '@revolist/revogrid-pro';
const grid = document.createElement('revo-grid');
grid.range = true;
grid.plugins = [RangeSelectionLimitPlugin];
grid.rangeSelectionLimit = { mode: 'column' };

grid.range = true is still required because this plugin only constrains range selection after core range selection is enabled.

ModeBehaviorTypical use
columnKeeps the focused column fixed and expands only across rows.Select multiple rows for one field.
rowKeeps the focused row fixed and expands only across columns.Select multiple fields for one row.

column keeps the focused column fixed and allows the selection to expand vertically:

grid.rangeSelectionLimit = { mode: 'column' };

If the user starts on column status and drags diagonally, the selected range stays inside status while the row bounds change.

row keeps the focused row fixed and allows the selection to expand horizontally:

grid.rangeSelectionLimit = { mode: 'row' };

If the user starts on row 12 and drags diagonally, the selected range stays on row 12 while the column bounds change.

Boolean shorthand is supported:

grid.rangeSelectionLimit = true; // same as { mode: 'column' }
grid.rangeSelectionLimit = false; // disabled

String shorthand is also supported:

grid.rangeSelectionLimit = 'column';
grid.rangeSelectionLimit = 'row';

The object form is preferred for new code because it leaves room for future options:

grid.rangeSelectionLimit = {
mode: 'column',
};

For legacy integrations, the plugin also reads additionalData.rangeSelectionLimit, but direct grid.rangeSelectionLimit configuration is preferred.

grid.additionalData = {
rangeSelectionLimit: {
mode: 'row',
},
};

The plugin uses the existing RevoGrid range lifecycle:

  1. RevoGrid computes the pending range from focus and drag/keyboard input.
  2. beforeapplyrange is emitted by the overlay selection component.
  3. RangeSelectionLimitPlugin replaces event.detail.range with the constrained range.
  4. RevoGrid transforms that range to row/column data and emits beforesetrange.
  5. RevoGrid emits setrange, and the selection store receives the constrained range.

The plugin does not add render layers, change data, or override single-cell focus. If there is no focused cell, it uses the pending range start as the anchor.

export type RangeSelectionLimitMode = 'column' | 'row';
export type RangeSelectionLimitOptions = {
mode: RangeSelectionLimitMode;
};
export type RangeSelectionLimitConfig =
| boolean
| RangeSelectionLimitMode
| RangeSelectionLimitOptions;

Arbitrary shape validation should be added as a separate mode or validator API so the existing row and column modes keep their current behavior.