syidaxgrid
Home Pricing Settings

GRID FEATURE · PRO

Cell range selection

A cell range is a rectangle spanning rows and columns. It defines the scope for copying, pasting, filling, and chart creation; selecting it does not change values.

Markdown source Features

How it works and when to use it

Range API row and column indices are display coordinates. Do not assume the same coordinates refer to the same data after sorting or hiding columns.

Using this feature in a product requires the Pro package and a valid license. Matching setting names do not enable Pro features in Community.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Select a range programmatically

This example selects the first two visible rows and columns.

javascript
grid.rangeSelection = true;
console.log(await grid.setCanonicalRanges([{ anchorRow: 0, anchorCol: 0, focusRow: 1, focusCol: 1 }]));

Verify the result: The specified rectangle is highlighted. Verify that the columns at those positions are appropriate for the intended operation.

Example 2. Read the current range

After users drag a selection, read and compare its normalized range with the original range.

javascript
console.log(await grid.getCanonicalRanges());
console.log(await grid.getCellRanges());

Verify the result: Interpret the range even when the anchor and endpoint run in opposite directions. Follow each API's coordinate and ID contract.

Example 3. Clear the range after an operation

Clear the selection when switching to a data set where the range is no longer valid.

javascript
await grid.clearCellRanges();
grid.addEventListener('rangeSelectionChanged', event => console.log(event.detail));

Verify the result: A range from previous orders will not remain an editing target in the new data. Row checkbox selection is a separate state.

Combining features and troubleshooting

Ranges containing merged cells, group rows, or pinned rows may follow different rules from regular data cells. Inspect excluded targets in the result report.

If data order changes after saving state, ranges stored only as display coordinates may point to the wrong targets. Inspect the restore report.

Related reading