Category / Section
Protect sheet and lock particular cells in Spreadsheet.
1 min read
This article explains how to lock a particular cell in the JavaScript Spreadsheet component. You can lock Spreadsheet cells by using the protectSheet and lockCells method. Using below code you can be able to lock a particular cell in spreadsheet.
[HTML]
<button class="e-btn" id="btn">Lock Cell</button> <div id="spreadsheet"></div>
[JS]
var spreadsheet = new ej.spreadsheet.Spreadsheet({
sheets: [ {
name: 'Car Sales Report',
ranges: [{ dataSource: defaultData }],
}, ],
});
//Render initialized Spreadsheet component
spreadsheet.appendTo('#spreadsheet');
document.getElementById('btn').onclick = () => {
//To Apply lock cell to the specified range of cells.
var protectSetting = {
selectCells: true,
formatCells: false,
formatRows: false,
formatColumns: false,
insertLink: false,
};
spreadsheet.protectSheet('Issues', protectSetting);
spreadsheet.lockCells('A2:AZ100', false); // to unlock the A2:AZ100 cells
spreadsheet.lockCells('A1:Z1', true); // to lock the A1:Z1 cells (A1 cell is locked within A1:AZ100)
};
Sample: https://stackblitz.com/edit/ztjzek?file=index.js
Output screenshot:
Before lock cell:
After lock cell:
