Skip to content
ZenGrid

Selection API

Community

Introduction

Section titled “Introduction”

Everything the mouse can do, code can do. grid.selection exposes the same model the interactive gestures drive, so you can read the current selection, set it from a button or workflow, test membership, and clear it — mirroring grid.sort, grid.filter, and grid.editing.

const grid = new Zengrid(mount, { columns, selectionType: 'range', enableMultiSelection: true });


grid.selection.selectRange(0, 0, 4, 2);   // a rectangle
grid.selection.getRanges();               // read it back
grid.selection.isSelected(2, 1);          // true
grid.selection.clear();

Reading the selection

Section titled “Reading the selection”
Method Returns
getRanges() Every selected range { startRow, startCol, endRow, endCol } — empty when nothing is selected.
getActive() The active (last-focused) cell { row, col }, or null.
isSelected(row, col) Whether a specific cell is selected.
isRowSelected(row) Whether any cell in a row is selected.
isColumnSelected(col) Whether a whole column is selected (a selectionType: 'column' selection).
getSelectedRows() The source row indices covered by whole-row selections, ascending.
getSelectedColumns() The dataIndex values covered by whole-column selections, ascending.
hasSelection() Whether anything is selected at all.

Changing the selection

Section titled “Changing the selection”
Method Effect
selectCell(row, col, additive?) Select a single cell. additive extends the set (multi-selection only).
toggleCell(row, col) Flip one cell in/out of the selection.
selectRange(sr, sc, er, ec, additive?) Select a rectangle of cells.
selectRows(startRow, endRow, additive?) Select whole rows across every column.
selectColumns(startCol, endCol, additive?) Select whole columns across every row.
selectAll(rowCount?) Select every row. Defaults to the current source row count.
setActive(cell) Move the active cell without changing the ranges.
clear() Clear the selection and the active cell.

Every additive argument defaults to false (replace); pass true to add to the current selection, the code equivalent of ctrl/⌘-click. Additive only applies when enableMultiSelection: true.

The selection:change event

Section titled “The selection:change event”

Beyond the API, wire onSelectionChange (or listen for selection:change) to react whenever the selection moves — update a toolbar, a count, or a detail pane:

new Zengrid(mount, {
  columns,
  selectionType: 'row',
  enableMultiSelection: true,
  onSelectionChange: (ranges) => {
    const rows = ranges.reduce((n, r) => n + (r.endRow - r.startRow + 1), 0);
    toolbar.textContent = `${rows} selected`;
  },
});

Try it live

Section titled “Try it live”

Every control below calls one method on the running grid. Watch the highlight and the alerts as you exercise the API.

Select something in the grid, then read it back: getRanges, getActive, isSelected, hasSelection. All return source coordinates.

Where to go next

Section titled “Where to go next”