ReoGrid ReoGrid Web
selection multi-range ctrl-click lite v1.6

Multi-Range Selection

Ctrl+click (Cmd on macOS) adds a range to the selection instead of replacing it — on cells and on row/column headers alike. Delete, styling, auto-fit and copy all act on every range at once.

How it works

This demo renders a regional sales sheet — the kind where the rows you care about are scattered rather than adjacent. Since v1.6.0, holding Ctrl (Cmd on macOS, where Ctrl+click is a right click) adds a range to the selection instead of replacing it, on cells and on row/column headers alike. Available in both editions.

  • Hold Ctrl/Cmd and click or drag to add a range; a plain click or an arrow key collapses back to one, and Shift+click extends the newest range while keeping the others
  • The status line is driven by onSelectionChange(active, ranges) — the second argument is new in v1.6, so existing single-argument listeners are unaffected
  • “Style every selected range” walks ws.selection.ranges, which is always safe: a single-range selection simply yields one handle
  • Delete clears every selected range as one undoable step; the demo's Clear button does the same through the API
  • Copy follows Excel's rule — the ranges have to line up (stacked with the same columns, or side by side with the same rows) to travel as one block; anything else is refused with Excel's own explanation
  • While several ranges are selected the fill handle and drag-to-move are switched off, and Ctrl+clicking a selected cell adds rather than removes it

Key APIs used

ws.selection.add('D4:E6')

The programmatic form of Ctrl+click — adds a range; it becomes the active one

ws.selection.ranges

Every selected rectangle as a RangeHandle, active last — the safe way to act on "the selection"

ws.selection.count

How many rectangles are selected (0 when nothing is)

ws.selection.range

Still single-range: the ACTIVE range, i.e. the last one selected

ws.onSelectionChange((active, ranges) => …)

The second argument lists every range; single-argument listeners keep working

Source Code

TypeScript

Related Documentation

Related Demos

Stay Updated

Be first to know — get updates as they ship

Get notified of new releases, features, and announcements.
No spam — just updates that matter.