Examples
Back to Examples

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.
MethodDescription
editable: booleanThe 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


Source code

<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/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" onclick="worksheet(this)" />
<input type="button" value="Disable Spreadsheet" onclick="spreadsheet(this)" />

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzA4MGM5NDdhYmU3ZWViMzA4NjUzNWFhMzk2MzViMTVjZDA4YmE5YTAzNTc2MDRmNzFlYjI1MTVkMDcxNzEwZTVkODI0N2NhODg4ZjMxZTMxYjc4ZjRiNzhiNGRjZTk4NWEyYjI5MmRkMjJhZDNmZGNiZTNkNzY5OWRmMzkzMGEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTRNVEEwTURFd05Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=');

// 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],
        ],
    }]
});
</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.
MethodDescription
isReadOnlyinstance.isReadOnly(cellName: string) => void
setReadOnlyinstance.setReadonly(cellName: string, state: boolean) => void


Example

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



Source code

<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/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="Disabled B2" onclick="toggle(this)"></p>

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzA4MGM5NDdhYmU3ZWViMzA4NjUzNWFhMzk2MzViMTVjZDA4YmE5YTAzNTc2MDRmNzFlYjI1MTVkMDcxNzEwZTVkODI0N2NhODg4ZjMxZTMxYjc4ZjRiNzhiNGRjZTk4NWEyYjI5MmRkMjJhZDNmZGNiZTNkNzY5OWRmMzkzMGEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTRNVEEwTURFd05Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=');

// Toogle readonly status of a cell
var 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
var 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 } }
    }],
});
</script>
</html>



Create applications with spreadsheet-like controls