Skip to main content

DHTMLX Spreadsheet. Locked cells example

This demo shows how to lock cells in DHTMLX Spreadsheet using the lock() API method and the locked property in the dataset.

Live example​

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    toolbarBlocks: ["undo", "colors", "decoration", "align", "help", "lock"]
});

spreadsheet.parse(dataset);

spreadsheet.lock("B2,B4,B6"); // locks specified cells
spreadsheet.lock("A7:B8"); // locks a range of cells
//the other locked cells are set via dataset 
<!-- component container -->
<div style="height: 100%; max-width:100%" id="spreadsheet"></div>

<!-- dataset -->

<script>
const dataset = [
      { cell: "a1", value: "Country", locked: true },
      { cell: "b1", value: "Product", locked: true },
      // ... 38 more items (see Live Editor for full data)
    ];
</script>

Shared spreadsheets with header rows, formula cells, or template structures need certain cells protected from accidental edits while keeping other areas editable. Cell-level locking provides granular protection: users can enter data in designated input cells without risk of overwriting calculated or structural content.

This example demonstrates two locking approaches: setting locked: true on cell objects in the dataset passed to parse(), and calling spreadsheet.lock() programmatically after initialization. In the canonical sample, the toolbar includes a "lock" block, the header cells are pre-locked in the dataset, and additional cells are locked through single-cell lists and a range.

Solution overview​

  1. Define cells with locked: true in the dataset: { cell: "A1", value: "Header", locked: true }
  2. Call spreadsheet.parse(dataset) to load data with pre-locked cells
  3. Use spreadsheet.lock("B2,B4,B6") and spreadsheet.lock("A7:B8") to lock additional cells at runtime

Key points​

  • Flexible references: lock() accepts single cells, ranges, and comma-separated lists, as shown by "B2,B4,B6" and "A7:B8" in the sample
  • Dataset plus runtime locking: Pre-locked cells from the dataset can be combined with additional lock() calls after initialization
  • Toolbar block: Adding "lock" to the toolbarBlocks array gives users a UI locking control in this sample

API reference​

  • lock(): Locks the specified cell(s) to prevent editing.

Additional resources​