Worksheet Editable State

This section covers information about the editable state of worksheets and read-only cells.

Worksheets

You can change the editable status of a single worksheet or the whole spreadsheet using the property editable.

Settings

You can define the state of the property via initialization settings or programmatic after that.

Method	Description
editable: boolean	The editable flag can be defined on the worksheet or in the spreadsheet scope.

Example

Change the editable state of the current worksheet or the whole spreadsheet.

See this example on Jsfiddle

<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="spreadsheet"></div>

<input type="button" value="Disable First Worksheet" id="disablefirst" />
<input type="button" value="Disable Spreadsheet" id="disablespreadsheet" />

<script>
// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('ZjcwODJkOTExZmQ0NDQwYjg2MWU4Zjg4OTRiNTFlYjBkOTU2ZWVhNzE0ZTYzMTdkOGEzYWYwYjhmODY0MTc4MjVhMzc1NzAwYmM3YTg3Y2EyOGFiYmZkOTU0NWJmMjE4OGQ0YjJjYmRmMTgwN2Q2NThjNDI5M2UyNTk1YTU4OTgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME5URTBOVGd6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

// Method to handle the editable state of the first worksheet
const worksheet = function(e) {
    // Toggle the editable state
    grid[0].options.editable = ! grid[0].options.editable;
    // Change button label
    e.value = grid[0].options.editable ? 'Disable First Worksheet' : 'Enable First Worksheet';
}

// Method to handle the editable state of the whole spreadsheet
const spreadsheet = function(e) {
    // Toggle the editable state
    grid[0].parent.config.editable = ! grid[0].parent.config.editable;
    // Change button label
    e.value = grid[0].parent.config.editable ? 'Disable Spreadsheet' : 'Enable Spreadsheet';
}

// Create a new spreadsheet
const grid = jspreadsheet(document.getElementById('spreadsheet'), {
    tabs: true,
    worksheets: [{
        data: [
            ['Mazda', 2001, 2000, 1],
            ['Peugeot', 2010, 5000, 1],
            ['Honda Fit', 2009, 3000, 1],
            ['Honda CRV', 2010, 6000, 0],
        ],
    }]
});

document.getElementById("disablefirst").onclick = () => worksheet(this)
document.getElementById("disablespreadsheet").onclick = () => spreadsheet(this)
</script>
<html>

Cells

You can define an entire column or row or a specific cell as read-only during the initialization.

Methods

Set or get readonly state to individual cells after the data grid is ready.

Method	Description
isReadOnly	`instance.isReadOnly(cellName: string) => void`
setReadOnly	`instance.setReadonly(cellName: string, state: boolean) => void`

Example

The example below defines a the first data grid column or a single cell as read-only.

<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="spreadsheet"></div>

<p><input type="button" value="Toggle B2" id="toggleb2"></p>

<script>
// You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox.
// The license is valid for one day, after which the spreadsheet will become read-only.
// For a longer trial period, you can create a free account and generate a demo license with an extended expiration date.
jspreadsheet.setLicense('ZjcwODJkOTExZmQ0NDQwYjg2MWU4Zjg4OTRiNTFlYjBkOTU2ZWVhNzE0ZTYzMTdkOGEzYWYwYjhmODY0MTc4MjVhMzc1NzAwYmM3YTg3Y2EyOGFiYmZkOTU0NWJmMjE4OGQ0YjJjYmRmMTgwN2Q2NThjNDI5M2UyNTk1YTU4OTgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME5URTBOVGd6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

// Toogle readonly status of a cell
let toggle = function(b) {
    if (grid[0].isReadOnly('B2')) {
        grid[0].setReadOnly('B2', false);
        b.value = 'Disable B2';
    } else {
        grid[0].setReadOnly('B2', true);
        b.value = 'Enable B2';
    }
}

// Create a new spreadsheet
let grid = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            [1, 2, 3, 4],
            [1, 2, 3, 4],
            [1, 2, 3, 4],
            [1, 2, 3, 4],
        ],
        columns: [
            { readonly: true, },
        ],
        cells: { B1: { type: 'number', readonly: true } }
    }],
});

document.getElementById("toggleb2").onclick = toggle
</script>
</html>