SYIDAX / DATA GRID

Cell range selection PRO

Select a rectangle spanning multiple rows and columns.

Cell range selectionSample order data

120 rows

Loading Grid…

Options

Changes below update the Grid and code immediately.

Range selectionPRO

Latest result

Click the first order's Quantity cell. This menu starts with range selection enabled.

View code

Current preview

Select cells spanning several rows and columns, as in a spreadsheet. Separate from checking entire rows.

Select the starting cell
Click the first order's Quantity cell. This menu starts with range selection enabled.
Extend the selection
Use Shift with arrow keys or drag between cells to create a rectangular range.
Inspect selection results
Inspect rangeSelectionChanged below the table. Select another cell to start a new range.

Expected results

The selected area gains a border and background, and its start/end boundaries are available.

Selection alone does not change values. Copying, pasting, and filling are separate operations, with writes limited to editable cells.

Using this feature in your product requires the Pro runtime and a valid license.

Attribute / Property	Type / Default	Description
PRO rangeSelection	`boolean`Default: false	cell range selection (AG `enableRangeSelection` parity). Drag selects a rectangle, shift+click / shift+arrows extend the anchor, ctrl/meta+drag adds ranges, Escape clears. Coordinates are DISPLAY indexes: data transitions (sort/filter/pagination/ collapse) keep ranges but clamp them into the new shape. Sentinel rows (group/tree/detail) never anchor a range (a sweep may cross them - those rows simply don't paint). The viewport does NOT autoscroll while dragging past its edge (v1 - documented).

Events1

Events	Detail type	Description
PRO	`{ ranges: CellRangeBounds[] }`	fires when the committed cell ranges change (normalized bounds).

Methods4

Method / Arguments	Return type	Description
PRO	`Promise<CellRangeBounds[]>`	committed cell ranges as normalized inclusive bounds.
PRO	`Promise<void>`	clear every cell range (emits when something was cleared).
PRO	`Promise<SyGridCanonicalRange[]>`	the canonical range set (stable ids + anchor/focus).
PRO ranges: SyGridCellRangeInput[]	`Promise<SyGridCanonicalChange[]>`	replace the canonical selection through the transitions and mirror it into the legacy `rangeState`. Emits the existing `rangeSelectionChanged` (one selection event surface — no new event). Returns the typed change list (`removed` for every prior range, then one `added` per applied input, ids monotonic).