Protect sheet in React Spreadsheet component
20 Jan 202324 minutes to read
Sheet protection helps you to prevent the users from modifying the data in the spreadsheet.
Protect Sheet
Protect sheet feature helps you to prevent the unknown users from accidentally changing, editing, moving, or deleting data in a spreadsheet. And you can also protect the sheet with password. You can use the isProtected
property to enable or disable the Protecting functionality.
- The default value for
isProtected
property isfalse
.
By default in protected sheet, selecting, formatting, inserting, deleting functionalities are disabled. To enable some of the above said functionalities
the protectSettings
options are used in a protected spreadsheet.
The available protectSettings
options in spreadsheet are,
Options | Uses |
---|---|
Select Cells |
Used to perform Cell Selection. |
Format Cells |
Used to perform Cell formatting. |
Format Rows |
Used to perform Row formatting. |
Format Columns |
Used to perform Column formatting. |
Insert Link |
Used to perform Hyperlink Insertions. |
- The default value for all
protectSettings
options arefalse
.
By default, the Protect Sheet
module is injected internally into the Spreadsheet to perform sheet protection function.
User Interface:
In the active Spreadsheet, the sheet protection can be done by any of the following ways:
- Select the Protect Sheet item in the Ribbon toolbar under the Data Tab, and then select your desired options.
- Right-click the sheet tab, select the Protect Sheet item in the context menu, and then select your desired options.
- Use the
protectSheet()
method programmatically.
The following example shows Protect Sheet
functionality in the Spreadsheet control.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { budgetData, salaryData } from './datasource';
export default class App extends React.Component {
spreadsheet;
protectSettings = { selectCells: true };
dataBound() {
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
this.spreadsheet.cellFormat({ fontWeight: 'bold' }, 'A11:D11');
this.spreadsheet.protectSheet(1, { selectCells: false }, "syncfusion"); // protect sheet with password
}
;
render() {
return (<div> <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} dataBound={this.dataBound.bind(this)}>
<SheetsDirective>
<SheetDirective name={"Budget"} isProtected={true} protectSettings={this.protectSettings}>
<RangesDirective>
<RangeDirective dataSource={budgetData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
<SheetDirective name={"Salary"}>
<RangesDirective>
<RangeDirective dataSource={salaryData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellDirective, CellsDirective, protectSheet, ProtectSettings } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
import { budgetData, salaryData } from './datasource';
export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public protectSettings = {selectCells: true};
public dataBound(): void{
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
this.spreadsheet.cellFormat({ fontWeight: 'bold'}, 'A11:D11');
this.spreadsheet.protectSheet(1, { selectCells: false}, "syncfusion"); // protect sheet with password
};
render() {
return ( <div> <SpreadsheetComponent
ref={(ssObj) => { this.spreadsheet = ssObj }} dataBound={this.dataBound.bind(this)} >
<SheetsDirective>
<SheetDirective name={"Budget"} isProtected={true} protectSettings={this.protectSettings}>
<RangesDirective>
<RangeDirective dataSource={budgetData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
<SheetDirective name={"Salary"}>
<RangesDirective>
<RangeDirective dataSource={salaryData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
export let budgetData = [
{
"Expense Type": "Housing",
"Projected Cost": 7000,
"Actual Cost": 7500,
"Difference": -500,
},
{
"Expense Type": "Transportation",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},
{
"Expense Type": "Insurance",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},
{
"Expense Type": "Food",
"Projected Cost": 2000,
"Actual Cost": 1800,
"Difference": 200,
},
{
"Expense Type": "Pets",
"Projected Cost": 300,
"Actual Cost": 200,
"Difference": 100,
},
{
"Expense Type": "Personel Care",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
}, {
"Expense Type": "Loan",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
}, {
"Expense Type": "Tax",
"Projected Cost": 200,
"Actual Cost": 200,
"Difference": 0,
}, {
"Expense Type": "Savings",
"Projected Cost": 1000,
"Actual Cost": 900,
"Difference": 100,
},
{
"Expense Type": "Total",
"Projected Cost": 13500,
"Actual Cost": 13600,
"Difference": -100,
}
];
export let salaryData = [
{
"Earnings": "Basic",
"Credit Amount": 20000,
"Deductions": "Provident Fund",
"Debit Amount": 2400,
},
{
"Earnings": "HRA",
"Credit Amount": 8000,
"Deductions": "ESI",
"Debit Amount": 0,
},
{
"Earnings": "Special Allowance",
"Credit Amount": 25000,
"Deductions": "Professional Tax",
"Debit Amount": 200,
},
{
"Earnings": "Incentives",
"Credit Amount": 2000,
"Deductions": "TDS",
"Debit Amount": 2750,
},
{
"Earnings": "Bonus",
"Credit Amount": 1500,
"Deductions": "Other Deduction",
"Debit Amount": 0,
},
{
"Earnings": "Total Earnings",
"Credit Amount": 56500,
"Deductions": "Total Deductions",
"Debit Amount": 5350,
}
];
export let budgetData: Object[] = [
{
"Expense Type": "Housing",
"Projected Cost": 7000,
"Actual Cost": 7500,
"Difference": -500,
},
{
"Expense Type": "Transportation",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},
{
"Expense Type": "Insurance",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},
{
"Expense Type": "Food",
"Projected Cost": 2000,
"Actual Cost": 1800,
"Difference": 200,
},
{
"Expense Type": "Pets",
"Projected Cost": 300,
"Actual Cost": 200,
"Difference": 100,
},
{
"Expense Type": "Personel Care",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},{
"Expense Type": "Loan",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},{
"Expense Type": "Tax",
"Projected Cost": 200,
"Actual Cost": 200,
"Difference": 0,
},{
"Expense Type": "Savings",
"Projected Cost": 1000,
"Actual Cost": 900,
"Difference": 100,
},
{
"Expense Type": "Total",
"Projected Cost": 13500,
"Actual Cost": 13600,
"Difference": -100,
}
]
export let salaryData: Object[] = [
{
"Earnings": "Basic",
"Credit Amount": 20000,
"Deductions": "Provident Fund",
"Debit Amount": 2400,
},
{
"Earnings": "HRA",
"Credit Amount": 8000,
"Deductions": "ESI",
"Debit Amount": 0,
},
{
"Earnings": "Special Allowance",
"Credit Amount": 25000,
"Deductions": "Professional Tax",
"Debit Amount": 200,
},
{
"Earnings": "Incentives",
"Credit Amount": 2000,
"Deductions": "TDS",
"Debit Amount": 2750,
},
{
"Earnings": "Bonus",
"Credit Amount": 1500,
"Deductions": "Other Deduction",
"Debit Amount": 0,
},
{
"Earnings": "Total Earnings",
"Credit Amount": 56500,
"Deductions": "Total Deductions",
"Debit Amount": 5350,
}
]
Limitations of Protect sheet
- Password encryption is not supported
Unprotect Sheet
Unprotect sheet is used to enable all the functionalities that are already disabled in a protected spreadsheet.
User Interface:
In the active Spreadsheet, the sheet Unprotection can be done by any of the following ways:
- Select the
Unprotect Sheet
item in the Ribbon toolbar under the Data Tab. - Right-click the sheet tab, select the
Unprotect Sheet
item in the context menu. - Use the
unprotectSheet()
method programmatically.
Unlock the particular cells in the protected sheet
In protected spreadsheet, to make some particular cell or range of cells are editable, you can use lockCells()
method, with the parameter range
and isLocked
property as false.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { budgetData, salaryData } from './datasource';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
export default class App extends React.Component {
spreadsheet;
dialogObj;
protectSettings = { selectCells: true };
btn = [{ click: this.lockCells.bind(this),
buttonModel: { content: 'Ok', isPrimary: true } }];
dataBound() {
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
this.spreadsheet.cellFormat({ fontWeight: 'bold' }, 'A11:D11');
}
;
lockCells() {
this.spreadsheet.lockCells('A1:F3', false);
this.dialogObj.hide();
}
showDlg() {
this.dialogObj.show();
}
render() {
return (<div> <button className='e-btn' onClick={this.showDlg.bind(this)}>Unlock cells</button>
<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} dataBound={this.dataBound.bind(this)}>
<SheetsDirective>
<SheetDirective name={"Budget"} isProtected={true} protectSettings={this.protectSettings}>
<RangesDirective>
<RangeDirective dataSource={budgetData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
<SheetDirective name={"Salary"}>
<RangesDirective>
<RangeDirective dataSource={salaryData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
<DialogComponent ref={(dlgObj) => { this.dialogObj = dlgObj; }} header={'Spreadsheet'} target={document.getElementById('spreadsheet')} content={'"A1:F3" range of cells has been unlocked.'} showCloseIcon={true} isModal={true} visible={false} width={'500px'} buttons={this.btn}>
</DialogComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective, RowsDirective, RowDirective, CellDirective, CellsDirective, protectSheet, ProtectSettings } from '@syncfusion/ej2-react-spreadsheet';
import { RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
import { budgetData, salaryData } from './datasource';
import { DialogComponent, ButtonPropsModel } from '@syncfusion/ej2-react-popups';
export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public dialogObj: DialogComponent;
public protectSettings = {selectCells: true};
public btn: ButtonPropsModel[] =[ {click: this.lockCells.bind(this),
buttonModel: { content: 'Ok', isPrimary: true }}];
public dataBound(): void{
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
this.spreadsheet.cellFormat({ fontWeight: 'bold'}, 'A11:D11');
};
public lockCells(): void {
this.spreadsheet.lockCells('A1:F3', false);
this.dialogObj.hide();
}
public showDlg(): void {
this.dialogObj.show();
}
render() {
return ( <div> <button className='e-btn' onClick={ this.showDlg.bind(this) }>Unlock cells</button>
<SpreadsheetComponent
ref={(ssObj) => { this.spreadsheet = ssObj }} dataBound={this.dataBound.bind(this)} >
<SheetsDirective>
<SheetDirective name={"Budget"} isProtected={true} protectSettings={this.protectSettings}>
<RangesDirective>
<RangeDirective dataSource={budgetData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
<SheetDirective name={"Salary"}>
<RangesDirective>
<RangeDirective dataSource={salaryData}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
<DialogComponent ref={(dlgObj) => { this.dialogObj = dlgObj }} header={'Spreadsheet'} target={document.getElementById('spreadsheet')} content={'"A1:F3" range of cells has been unlocked.'}
showCloseIcon={true} isModal={true} visible={false} width={'500px'} buttons={this.btn}>
</DialogComponent> </div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
export let budgetData = [
{
"Expense Type": "Housing",
"Projected Cost": 7000,
"Actual Cost": 7500,
"Difference": -500,
},
{
"Expense Type": "Transportation",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},
{
"Expense Type": "Insurance",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},
{
"Expense Type": "Food",
"Projected Cost": 2000,
"Actual Cost": 1800,
"Difference": 200,
},
{
"Expense Type": "Pets",
"Projected Cost": 300,
"Actual Cost": 200,
"Difference": 100,
},
{
"Expense Type": "Personel Care",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
}, {
"Expense Type": "Loan",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
}, {
"Expense Type": "Tax",
"Projected Cost": 200,
"Actual Cost": 200,
"Difference": 0,
}, {
"Expense Type": "Savings",
"Projected Cost": 1000,
"Actual Cost": 900,
"Difference": 100,
},
{
"Expense Type": "Total",
"Projected Cost": 13500,
"Actual Cost": 13600,
"Difference": -100,
}
];
export let salaryData = [
{
"Earnings": "Basic",
"Credit Amount": 20000,
"Deductions": "Provident Fund",
"Debit Amount": 2400,
},
{
"Earnings": "HRA",
"Credit Amount": 8000,
"Deductions": "ESI",
"Debit Amount": 0,
},
{
"Earnings": "Special Allowance",
"Credit Amount": 25000,
"Deductions": "Professional Tax",
"Debit Amount": 200,
},
{
"Earnings": "Incentives",
"Credit Amount": 2000,
"Deductions": "TDS",
"Debit Amount": 2750,
},
{
"Earnings": "Bonus",
"Credit Amount": 1500,
"Deductions": "Other Deduction",
"Debit Amount": 0,
},
{
"Earnings": "Total Earnings",
"Credit Amount": 56500,
"Deductions": "Total Deductions",
"Debit Amount": 5350,
}
];
export let budgetData: Object[] = [
{
"Expense Type": "Housing",
"Projected Cost": 7000,
"Actual Cost": 7500,
"Difference": -500,
},
{
"Expense Type": "Transportation",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},
{
"Expense Type": "Insurance",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},
{
"Expense Type": "Food",
"Projected Cost": 2000,
"Actual Cost": 1800,
"Difference": 200,
},
{
"Expense Type": "Pets",
"Projected Cost": 300,
"Actual Cost": 200,
"Difference": 100,
},
{
"Expense Type": "Personel Care",
"Projected Cost": 500,
"Actual Cost": 500,
"Difference": 0,
},{
"Expense Type": "Loan",
"Projected Cost": 1000,
"Actual Cost": 1000,
"Difference": 0,
},{
"Expense Type": "Tax",
"Projected Cost": 200,
"Actual Cost": 200,
"Difference": 0,
},{
"Expense Type": "Savings",
"Projected Cost": 1000,
"Actual Cost": 900,
"Difference": 100,
},
{
"Expense Type": "Total",
"Projected Cost": 13500,
"Actual Cost": 13600,
"Difference": -100,
}
]
export let salaryData: Object[] = [
{
"Earnings": "Basic",
"Credit Amount": 20000,
"Deductions": "Provident Fund",
"Debit Amount": 2400,
},
{
"Earnings": "HRA",
"Credit Amount": 8000,
"Deductions": "ESI",
"Debit Amount": 0,
},
{
"Earnings": "Special Allowance",
"Credit Amount": 25000,
"Deductions": "Professional Tax",
"Debit Amount": 200,
},
{
"Earnings": "Incentives",
"Credit Amount": 2000,
"Deductions": "TDS",
"Debit Amount": 2750,
},
{
"Earnings": "Bonus",
"Credit Amount": 1500,
"Deductions": "Other Deduction",
"Debit Amount": 0,
},
{
"Earnings": "Total Earnings",
"Credit Amount": 56500,
"Deductions": "Total Deductions",
"Debit Amount": 5350,
}
]
Protect Workbook
Protect workbook feature helps you to protect the workbook so that users cannot insert, delete, rename, hide the sheets in the spreadsheet. You can use the password
property to protect workbook with password. You can use the isProtected
property to protect or unprotect the workbook without the password.
The default value for
isProtected
property isfalse
.
User Interface:
In the active Spreadsheet, you can protect the worksheet by selecting the Data tab in the Ribbon toolbar and choosing the Protect Workbook
item. Then, enter the password and confirm it and click on OK.
The following example shows Protect Workbook
by using the isProtected
property in the Spreadsheet control.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component {
spreadsheet;
render() {
return (<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} isProtected={true}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={110}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component<{}, {}> {
spreadsheet: SpreadsheetComponent;
render() {
return (<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }} isProtected={true}>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={110}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
/**
* Default data source
*/
export let data = [{
OrderID: 10248,
CustomerID: 'VINET',
EmployeeID: 5,
ShipName: 'Vins et alcools Chevalier',
ShipCity: 'Reims',
ShipAddress: '59 rue de lAbbaye'
},
{
OrderID: 10249,
CustomerID: 'TOMSP',
EmployeeID: 6,
ShipName: 'Toms Spezialitäten',
ShipCity: 'Münster',
ShipAddress: 'Luisenstr. 48'
},
{
OrderID: 10250,
CustomerID: 'HANAR',
EmployeeID: 4,
ShipName: 'Hanari Carnes',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua do Paço, 67'
},
{
OrderID: 10251,
CustomerID: 'VICTE',
EmployeeID: 3,
ShipName: 'Victuailles en stock',
ShipCity: 'Lyon',
ShipAddress: '2, rue du Commerce'
},
{
OrderID: 10252,
CustomerID: 'SUPRD',
EmployeeID: 4,
ShipName: 'Suprêmes délices',
ShipCity: 'Charleroi',
ShipAddress: 'Boulevard Tirou, 255'
}];
/**
* Default data source
*/
export let data: Object[] = [{
OrderID: 10248,
CustomerID: 'VINET',
EmployeeID: 5,
ShipName: 'Vins et alcools Chevalier',
ShipCity: 'Reims',
ShipAddress: '59 rue de lAbbaye'
},
{
OrderID: 10249,
CustomerID: 'TOMSP',
EmployeeID: 6,
ShipName: 'Toms Spezialitäten',
ShipCity: 'Münster',
ShipAddress: 'Luisenstr. 48'
},
{
OrderID: 10250,
CustomerID: 'HANAR',
EmployeeID: 4,
ShipName: 'Hanari Carnes',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua do Paço, 67'
},
{
OrderID: 10251,
CustomerID: 'VICTE',
EmployeeID: 3,
ShipName: 'Victuailles en stock',
ShipCity: 'Lyon',
ShipAddress: '2, rue du Commerce'
},
{
OrderID: 10252,
CustomerID: 'SUPRD',
EmployeeID: 4,
ShipName: 'Suprêmes délices',
ShipCity: 'Charleroi',
ShipAddress: 'Boulevard Tirou, 255'
}];
The following example shows Protect Workbook
by using the password
property in the Spreadsheet control. To unprotect the workbook, click the unprotect workbook button in the data tab and provide the password as syncfusion in the dialog box.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component {
spreadsheet;
render() {
return (<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} password='syncfusion'>
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={110}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
export default class App extends React.Component<{}, {}> {
spreadsheet: SpreadsheetComponent;
render() {
return (<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }} password= 'syncfusion' >
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={110}></ColumnDirective>
<ColumnDirective width={100}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
/**
* Default data source
*/
export let data = [{
OrderID: 10248,
CustomerID: 'VINET',
EmployeeID: 5,
ShipName: 'Vins et alcools Chevalier',
ShipCity: 'Reims',
ShipAddress: '59 rue de lAbbaye'
},
{
OrderID: 10249,
CustomerID: 'TOMSP',
EmployeeID: 6,
ShipName: 'Toms Spezialitäten',
ShipCity: 'Münster',
ShipAddress: 'Luisenstr. 48'
},
{
OrderID: 10250,
CustomerID: 'HANAR',
EmployeeID: 4,
ShipName: 'Hanari Carnes',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua do Paço, 67'
},
{
OrderID: 10251,
CustomerID: 'VICTE',
EmployeeID: 3,
ShipName: 'Victuailles en stock',
ShipCity: 'Lyon',
ShipAddress: '2, rue du Commerce'
},
{
OrderID: 10252,
CustomerID: 'SUPRD',
EmployeeID: 4,
ShipName: 'Suprêmes délices',
ShipCity: 'Charleroi',
ShipAddress: 'Boulevard Tirou, 255'
}];
/**
* Default data source
*/
export let data: Object[] = [{
OrderID: 10248,
CustomerID: 'VINET',
EmployeeID: 5,
ShipName: 'Vins et alcools Chevalier',
ShipCity: 'Reims',
ShipAddress: '59 rue de lAbbaye'
},
{
OrderID: 10249,
CustomerID: 'TOMSP',
EmployeeID: 6,
ShipName: 'Toms Spezialitäten',
ShipCity: 'Münster',
ShipAddress: 'Luisenstr. 48'
},
{
OrderID: 10250,
CustomerID: 'HANAR',
EmployeeID: 4,
ShipName: 'Hanari Carnes',
ShipCity: 'Rio de Janeiro',
ShipAddress: 'Rua do Paço, 67'
},
{
OrderID: 10251,
CustomerID: 'VICTE',
EmployeeID: 3,
ShipName: 'Victuailles en stock',
ShipCity: 'Lyon',
ShipAddress: '2, rue du Commerce'
},
{
OrderID: 10252,
CustomerID: 'SUPRD',
EmployeeID: 4,
ShipName: 'Suprêmes délices',
ShipCity: 'Charleroi',
ShipAddress: 'Boulevard Tirou, 255'
}];
Unprotect Workbook
Unprotect Workbook is used to enable the insert, delete, rename, move, copy, hide or unhide sheets feature in the spreadsheet.
User Interface:
In the active Spreadsheet, the workbook Unprotection can be done in any of the following ways:
- Select the
Unprotect Workbook
item in the Ribbon toolbar under the Data Tab and provide the valid password in the dialog box.
Note
You can refer to our React Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore our React Spreadsheet example to knows how to present and manipulate data.