Skip to main content

DHTMLX Spreadsheet. Managing selection example

This demo shows how to manage cell selection in DHTMLX Spreadsheet using selection.setSelectedCell() and selection.removeSelectedCell().

Live example​

// creating DHTMLX Spreadsheet
const spreadsheet = new dhx.Spreadsheet("spreadsheet");

spreadsheet.parse(dataset);

spreadsheet.selection.setSelectedCell("A1:A10,C2,B4,D6:D8");
spreadsheet.selection.removeSelectedCell("A3:A6,C2");
<!-- component container -->
<div style="height: 100%; max-width:100%" id="spreadsheet"></div>

<!-- dataset -->

<script>
const dataset = [
      {
      "value":"Country (or dependency)",
      "cell":"A1"
    },
      {
      "value":"Population (2018)",
      "cell":"B1"
    },
      // ... 2572 more items (see Live Editor for full data)
    ]
</script>

Applications that guide users through data entry, such as highlighting the next required field, jumping to an error cell after validation, or restoring a saved cursor position, need programmatic control over cell selection. The selection API makes the spreadsheet responsive to external logic, not just mouse clicks.

This example demonstrates two selection operations: setSelectedCell("A1:A10,C2,B4,D6:D8") selects a mix of ranges and scattered cells, and removeSelectedCell("A3:A6,C2") deselects specific cells from the current selection.

Solution overview​

  1. Create the Spreadsheet with new dhx.Spreadsheet("spreadsheet") and load data with spreadsheet.parse(dataset)
  2. Call spreadsheet.selection.setSelectedCell("A1:A10,C2,B4,D6:D8") to select ranges and scattered cells
  3. Call spreadsheet.selection.removeSelectedCell("A3:A6,C2") to deselect specific cells from the current selection

Key points​

  • Flexible input: setSelectedCell() accepts ranges and comma-separated scattered selections in a single call
  • Targeted removal: removeSelectedCell() removes only the specified cells or ranges from the existing selection
  • Selection-first sample: This example focuses on selection updates only, without additional focus management logic

API reference​

Additional resources​