Vue
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Protection in Vue Spreadsheet component

23 Jun 2022 / 7 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. You can use the isProtected property to enable or disable the Protecting functionality.

  • The default value for isProtected property is false.

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 are false.

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.

Source
Preview
app.vue
data.js
Copied to clipboard
<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created">
            <e-sheets>
              <e-sheet name="Budget" :isProtected="true" :protectSettings="{ selectCells: true }">
                <e-ranges>
                  <e-range :dataSource="dataSource1"></e-range>
                </e-ranges>
                <e-columns>
                  <e-column :width=100></e-column>
                  <e-column :width=100></e-column>
                  <e-column :width=100></e-column>
                  <e-column :width=100></e-column>
                </e-columns>
              </e-sheet>
              <e-sheet name="Salary">
                <e-ranges>
                  <e-range :dataSource="dataSource2"></e-range>
                </e-ranges>
                <e-columns>
                  <e-column :width=100></e-column>
                  <e-column :width=100></e-column>
                  <e-column :width=100></e-column>
                  <e-column :width=100></e-column>
                  </e-columns>
              </e-sheet>
            </e-sheets>
          </ejs-spreadsheet>
</template>

<script>
import Vue from "vue";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
import { salaryData, budgetData  } from './data.js';
Vue.use(SpreadsheetPlugin);
export default {
   data: () => {
return {
  dataSource1: budgetData,
  dataSource2: salaryData,
}
  },
  methods: {
   created: function () {
   var spreadsheet = this.$refs.spreadsheet;
 spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
    spreadsheet.cellFormat({ fontWeight: 'bold'}, 'A11:D11');
    spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'Salary!A1:D1');
    spreadsheet.protectSheet(1, { selectCells: false});
  }
}
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
 @import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.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,
        }
      ];

      exports.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,
        }
      ];
});

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.

Source
Preview
app.vue
data.js
Copied to clipboard
<template>
 <div> <ejs-button id='customBtn' v-on:click.native="btnClick"> Unlock cells</ejs-button>
 <div id="dialog"></div>
          <ejs-spreadsheet ref="spreadsheet" id="spreadsheet" :created="created">
            <e-sheets>
              <e-sheet name="Budget" :isProtected="true" :protectSettings="{ selectCells: true }">
                <e-ranges>
                  <e-range :dataSource="dataSource1"></e-range>
                </e-ranges>
                <e-columns>
                  <e-column :width=100></e-column>
                  <e-column :width=100></e-column>
                  <e-column :width=100></e-column>
                  <e-column :width=100></e-column>
                </e-columns>
              </e-sheet>
              <e-sheet name="Salary">
                <e-ranges>
                  <e-range :dataSource="dataSource2"></e-range>
                </e-ranges>
                <e-columns>
                  <e-column :width=100></e-column>
                  <e-column :width=100></e-column>
                  <e-column :width=100></e-column>
                  <e-column :width=100></e-column>
                  </e-columns>
              </e-sheet>
            </e-sheets>
          </ejs-spreadsheet>
          </div>
</template>

<script>
import Vue from "vue";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { budgetData,salaryData } from './data.js';
import { Dialog } from '@syncfusion/ej2-popups';
Vue.use(SpreadsheetPlugin);
Vue.use(ButtonPlugin);

export default {
   data: () => {
return {
   dialogObj: Dialog,
  dataSource1: budgetData,
  dataSource2: salaryData,
   dlgButtons: [{ click: this.lockCells, buttonModel: { isPrimary:'true', content: 'Learn More' } }],
}
  },
   methods: {
   created: function () {
   var spreadsheet = this.$refs.spreadsheet;
 spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:D1');
   spreadsheet.cellFormat({ fontWeight: 'bold'}, 'A11:D11');
    spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'Salary!A1:D1');
    // Creating dialog component,
    var dialogObj = new Dialog({
      header: 'Spreadsheet',
      target: document.getElementById('spreadsheet'),
      content: '"A1:F3" range of cells has been unlocked.',
      showCloseIcon: true,
      isModel: true,
      visible: false,
      width: '500px',
      buttons: [{
          click: this.lockCells.bind(this), buttonModel: { content: 'Ok', isPrimary: true }
      }]
  });
  dialogObj.appendTo('#dialog');

  },
  btnClick: function() {
    var dialogObj= document.getElementById("dialog").ej2_instances[0];
    dialogObj.show();
   },
   lockCells: function() {
    var spreadsheet = this.$refs.spreadsheet;
    var dialogObj= document.getElementById("dialog").ej2_instances[0];
    spreadsheet.lockCells('A1:F3', false);
    dialogObj.hide();
}
}
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
 @import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.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,
        }
      ];

      exports.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,
        }
      ];
});

Limitations of Protect Sheet

  • Password protection is not supported in Protect sheet feature.

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 is false.

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.

Source
Preview
app.vue
data.js
Copied to clipboard
<template>
   <ejs-spreadsheet ref="spreadsheet" :isProtected="true">
   <e-sheets>
      <e-sheet>
        <e-ranges>
          <e-range :dataSource="dataSource"></e-range>
        </e-ranges>
      </e-sheet>
    </e-sheets></ejs-spreadsheet>
</template>

<script>
import Vue from "vue";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
import { defaultData } from './data.js';
Vue.use(SpreadsheetPlugin);
export default {
   data: () => {
return {
  dataSource: defaultData,
}
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
 @import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.tradeData = [
        {
          "EmployeeID": 10001,
          "Employees": "Laura Nancy",
          "Designation": "Designer",
          "Location": "France",
          "Status": "Inactive",
          "Trustworthiness": "Sufficient",
          "Rating": 0,
          "Software": 69,
          "EmployeeImg": "usermale",
          "CurrentSalary": 84194,
          "Address": "Taucherstraße 10",
          "Mail": "laura15@jourrapide.com"
        },
        {
          "EmployeeID": 10002,
          "Employees": "Zachery Van",
          "Designation": "CFO",
          "Location": "Canada",
          "Status": "Inactive",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 99,
          "EmployeeImg": "usermale",
          "CurrentSalary": 55349,
          "Address": "5ª Ave. Los Palos Grandes",
          "Mail": "zachery109@sample.com"
        },
        {
          "EmployeeID": 10003,
          "Employees": "Rose Fuller",
          "Designation": "CFO",
          "Location": "France",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 1,
          "Software": 1,
          "EmployeeImg": "usermale",
          "CurrentSalary": 16477,
          "Address": "2817 Milton Dr.",
          "Mail": "rose55@rpy.com"
        },
        {
          "EmployeeID": 10004,
          "Employees": "Jack Bergs",
          "Designation": "Manager",
          "Location": "Mexico",
          "Status": "Inactive",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 36,
          "EmployeeImg": "usermale",
          "CurrentSalary": 49040,
          "Address": "2, rue du Commerce",
          "Mail": "jack30@sample.com"
        },
        {
          "EmployeeID": 10005,
          "Employees": "Vinet Bergs",
          "Designation": "Program Directory",
          "Location": "UK",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 1,
          "Software": 39,
          "EmployeeImg": "usermale",
          "CurrentSalary": 5495,
          "Address": "Rua da Panificadora, 12",
          "Mail": "vinet32@jourrapide.com"
        },
        {
          "EmployeeID": 10006,
          "Employees": "Buchanan Van",
          "Designation": "Designer",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 4,
          "Software": 78,
          "EmployeeImg": "usermale",
          "CurrentSalary": 42182,
          "Address": "24, place Kléber",
          "Mail": "buchanan18@mail.com"
        },
        {
          "EmployeeID": 10007,
          "Employees": "Dodsworth Nancy",
          "Designation": "Project Lead",
          "Location": "USA",
          "Status": "Inactive",
          "Trustworthiness": "Sufficient",
          "Rating": 0,
          "Software": 0,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 35776,
          "Address": "Rua do Paço, 67",
          "Mail": "dodsworth84@mail.com"
        },
        {
          "EmployeeID": 10008,
          "Employees": "Laura Jack",
          "Designation": "Developer",
          "Location": "Austria",
          "Status": "Inactive",
          "Trustworthiness": "Perfect",
          "Rating": 3,
          "Software": 89,
          "EmployeeImg": "usermale",
          "CurrentSalary": 25108,
          "Address": "Rua da Panificadora, 12",
          "Mail": "laura82@mail.com"
        },
        {
          "EmployeeID": 10009,
          "Employees": "Anne Fuller",
          "Designation": "Program Directory",
          "Location": "Mexico",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 0,
          "Software": 19,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 32568,
          "Address": "Gran Vía, 1",
          "Mail": "anne97@jourrapide.com"
        },
        {
          "EmployeeID": 10010,
          "Employees": "Buchanan Andrew",
          "Designation": "Designer",
          "Location": "Austria",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 1,
          "Software": 62,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 12320,
          "Address": "P.O. Box 555",
          "Mail": "buchanan50@jourrapide.com"
        },
        {
          "EmployeeID": 10011,
          "Employees": "Andrew Janet",
          "Designation": "System Analyst",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 8,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 20890,
          "Address": "Starenweg 5",
          "Mail": "andrew63@mail.com"
        },
        {
          "EmployeeID": 10012,
          "Employees": "Margaret Tamer",
          "Designation": "System Analyst",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 4,
          "Software": 7,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 22337,
          "Address": "Magazinweg 7",
          "Mail": "margaret26@mail.com"
        },
        {
          "EmployeeID": 10013,
          "Employees": "Tamer Fuller",
          "Designation": "CFO",
          "Location": "Canada",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 78,
          "EmployeeImg": "usermale",
          "CurrentSalary": 89181,
          "Address": "Taucherstraße 10",
          "Mail": "tamer40@arpy.com"
        },
        {
          "EmployeeID": 10014,
          "Employees": "Tamer Anne",
          "Designation": "CFO",
          "Location": "Sweden",
          "Status": "Active",
          "Trustworthiness": "Sufficient",
          "Rating": 0,
          "Software": 18,
          "EmployeeImg": "usermale",
          "CurrentSalary": 20998,
          "Address": "Taucherstraße 10",
          "Mail": "tamer68@arpy.com"
        },
        {
          "EmployeeID": 10015,
          "Employees": "Anton Davolio",
          "Designation": "Project Lead",
          "Location": "France",
          "Status": "Active",
          "Trustworthiness": "Sufficient",
          "Rating": 4,
          "Software": 8,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 48232,
          "Address": "Luisenstr. 48",
          "Mail": "anton46@mail.com"
        },
        {
          "EmployeeID": 10016,
          "Employees": "Buchanan Buchanan",
          "Designation": "System Analyst",
          "Location": "Austria",
          "Status": "Inactive",
          "Trustworthiness": "Perfect",
          "Rating": 0,
          "Software": 19,
          "EmployeeImg": "usermale",
          "CurrentSalary": 43041,
          "Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
          "Mail": "buchanan68@mail.com"
        },
        {
          "EmployeeID": 10017,
          "Employees": "King Buchanan",
          "Designation": "Program Directory",
          "Location": "Sweden",
          "Status": "Active",
          "Trustworthiness": "Sufficient",
          "Rating": 0,
          "Software": 44,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 25259,
          "Address": "Magazinweg 7",
          "Mail": "king80@jourrapide.com"
        },
        {
          "EmployeeID": 10018,
          "Employees": "Rose Michael",
          "Designation": "Project Lead",
          "Location": "Canada",
          "Status": "Active",
          "Trustworthiness": "Perfect",
          "Rating": 4,
          "Software": 31,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 91156,
          "Address": "Fauntleroy Circus",
          "Mail": "rose75@mail.com"
        },
        {
          "EmployeeID": 10019,
          "Employees": "King Bergs",
          "Designation": "Developer",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Sufficient",
          "Rating": 2,
          "Software": 29,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 28826,
          "Address": "2817 Milton Dr.",
          "Mail": "king57@jourrapide.com"
        },
        {
          "EmployeeID": 10020,
          "Employees": "Davolio Fuller",
          "Designation": "Designer",
          "Location": "Canada",
          "Status": "Inactive",
          "Trustworthiness": "Sufficient",
          "Rating": 3,
          "Software": 35,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 71035,
          "Address": "Gran Vía, 1",
          "Mail": "davolio29@arpy.com"
        },
        {
          "EmployeeID": 10021,
          "Employees": "Rose Rose",
          "Designation": "CFO",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Perfect",
          "Rating": 3,
          "Software": 38,
          "EmployeeImg": "usermale",
          "CurrentSalary": 68123,
          "Address": "Rua do Mercado, 12",
          "Mail": "rose54@arpy.com"
        },
        {
          "EmployeeID": 10022,
          "Employees": "Andrew Michael",
          "Designation": "Program Directory",
          "Location": "UK",
          "Status": "Inactive",
          "Trustworthiness": "Insufficient",
          "Rating": 2,
          "Software": 61,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 75470,
          "Address": "2, rue du Commerce",
          "Mail": "andrew88@jourrapide.com"
        },
        {
          "EmployeeID": 10023,
          "Employees": "Davolio Kathryn",
          "Designation": "Manager",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Perfect",
          "Rating": 3,
          "Software": 25,
          "EmployeeImg": "usermale",
          "CurrentSalary": 25234,
          "Address": "Hauptstr. 31",
          "Mail": "davolio42@sample.com"
        },
        {
          "EmployeeID": 10024,
          "Employees": "Anne Fleet",
          "Designation": "System Analyst",
          "Location": "UK",
          "Status": "Active",
          "Trustworthiness": "Perfect",
          "Rating": 3,
          "Software": 0,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 8341,
          "Address": "59 rue de lAbbaye",
          "Mail": "anne86@arpy.com"
        },
        {
          "EmployeeID": 10025,
          "Employees": "Margaret Andrew",
          "Designation": "System Analyst",
          "Location": "Germany",
          "Status": "Inactive",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 51,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 84975,
          "Address": "P.O. Box 555",
          "Mail": "margaret41@arpy.com"
        },
        {
          "EmployeeID": 10026,
          "Employees": "Kathryn Laura",
          "Designation": "Project Lead",
          "Location": "Austria",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 48,
          "EmployeeImg": "usermale",
          "CurrentSalary": 97282,
          "Address": "Avda. Azteca 123",
          "Mail": "kathryn82@rpy.com"
        },
        {
          "EmployeeID": 10027,
          "Employees": "Michael Michael",
          "Designation": "Developer",
          "Location": "UK",
          "Status": "Inactive",
          "Trustworthiness": "Perfect",
          "Rating": 4,
          "Software": 16,
          "EmployeeImg": "usermale",
          "CurrentSalary": 4184,
          "Address": "Rua do Paço, 67",
          "Mail": "michael58@jourrapide.com"
        },
        {
          "EmployeeID": 10028,
          "Employees": "Leverling Vinet",
          "Designation": "Project Lead",
          "Location": "Germany",
          "Status": "Inactive",
          "Trustworthiness": "Perfect",
          "Rating": 0,
          "Software": 57,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 38370,
          "Address": "59 rue de lAbbaye",
          "Mail": "leverling102@sample.com"
        },
        {
          "EmployeeID": 10029,
          "Employees": "Rose Jack",
          "Designation": "Developer",
          "Location": "UK",
          "Status": "Active",
          "Trustworthiness": "Perfect",
          "Rating": 0,
          "Software": 46,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 84790,
          "Address": "Rua do Mercado, 12",
          "Mail": "rose108@jourrapide.com"
        },
        {
          "EmployeeID": 10030,
          "Employees": "Vinet Van",
          "Designation": "Developer",
          "Location": "USA",
          "Status": "Active",
          "Trustworthiness": "Sufficient",
          "Rating": 0,
          "Software": 40,
          "EmployeeImg": "usermale",
          "CurrentSalary": 71005,
          "Address": "Gran Vía, 1",
          "Mail": "vinet90@jourrapide.com"
        }
      ],
      exports.defaultData=  [
        { 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
        { 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
        { 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
        { 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
        { 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
        { 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
        { 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
        { 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
        { 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
        { 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
    ]
});

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.

Source
Preview
app.vue
data.js
Copied to clipboard
<template>
   <ejs-spreadsheet ref="spreadsheet" password='syncfusion'>
   <e-sheets>
      <e-sheet>
        <e-ranges>
          <e-range :dataSource="dataSource"></e-range>
        </e-ranges>
      </e-sheet>
    </e-sheets></ejs-spreadsheet>
</template>

<script>
import Vue from "vue";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
import { defaultData } from './data.js';
Vue.use(SpreadsheetPlugin);
export default {
   data: () => {
return {
  dataSource: defaultData,
}
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
 @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
 @import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>
Copied to clipboard
define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.tradeData = [
        {
          "EmployeeID": 10001,
          "Employees": "Laura Nancy",
          "Designation": "Designer",
          "Location": "France",
          "Status": "Inactive",
          "Trustworthiness": "Sufficient",
          "Rating": 0,
          "Software": 69,
          "EmployeeImg": "usermale",
          "CurrentSalary": 84194,
          "Address": "Taucherstraße 10",
          "Mail": "laura15@jourrapide.com"
        },
        {
          "EmployeeID": 10002,
          "Employees": "Zachery Van",
          "Designation": "CFO",
          "Location": "Canada",
          "Status": "Inactive",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 99,
          "EmployeeImg": "usermale",
          "CurrentSalary": 55349,
          "Address": "5ª Ave. Los Palos Grandes",
          "Mail": "zachery109@sample.com"
        },
        {
          "EmployeeID": 10003,
          "Employees": "Rose Fuller",
          "Designation": "CFO",
          "Location": "France",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 1,
          "Software": 1,
          "EmployeeImg": "usermale",
          "CurrentSalary": 16477,
          "Address": "2817 Milton Dr.",
          "Mail": "rose55@rpy.com"
        },
        {
          "EmployeeID": 10004,
          "Employees": "Jack Bergs",
          "Designation": "Manager",
          "Location": "Mexico",
          "Status": "Inactive",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 36,
          "EmployeeImg": "usermale",
          "CurrentSalary": 49040,
          "Address": "2, rue du Commerce",
          "Mail": "jack30@sample.com"
        },
        {
          "EmployeeID": 10005,
          "Employees": "Vinet Bergs",
          "Designation": "Program Directory",
          "Location": "UK",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 1,
          "Software": 39,
          "EmployeeImg": "usermale",
          "CurrentSalary": 5495,
          "Address": "Rua da Panificadora, 12",
          "Mail": "vinet32@jourrapide.com"
        },
        {
          "EmployeeID": 10006,
          "Employees": "Buchanan Van",
          "Designation": "Designer",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 4,
          "Software": 78,
          "EmployeeImg": "usermale",
          "CurrentSalary": 42182,
          "Address": "24, place Kléber",
          "Mail": "buchanan18@mail.com"
        },
        {
          "EmployeeID": 10007,
          "Employees": "Dodsworth Nancy",
          "Designation": "Project Lead",
          "Location": "USA",
          "Status": "Inactive",
          "Trustworthiness": "Sufficient",
          "Rating": 0,
          "Software": 0,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 35776,
          "Address": "Rua do Paço, 67",
          "Mail": "dodsworth84@mail.com"
        },
        {
          "EmployeeID": 10008,
          "Employees": "Laura Jack",
          "Designation": "Developer",
          "Location": "Austria",
          "Status": "Inactive",
          "Trustworthiness": "Perfect",
          "Rating": 3,
          "Software": 89,
          "EmployeeImg": "usermale",
          "CurrentSalary": 25108,
          "Address": "Rua da Panificadora, 12",
          "Mail": "laura82@mail.com"
        },
        {
          "EmployeeID": 10009,
          "Employees": "Anne Fuller",
          "Designation": "Program Directory",
          "Location": "Mexico",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 0,
          "Software": 19,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 32568,
          "Address": "Gran Vía, 1",
          "Mail": "anne97@jourrapide.com"
        },
        {
          "EmployeeID": 10010,
          "Employees": "Buchanan Andrew",
          "Designation": "Designer",
          "Location": "Austria",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 1,
          "Software": 62,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 12320,
          "Address": "P.O. Box 555",
          "Mail": "buchanan50@jourrapide.com"
        },
        {
          "EmployeeID": 10011,
          "Employees": "Andrew Janet",
          "Designation": "System Analyst",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 8,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 20890,
          "Address": "Starenweg 5",
          "Mail": "andrew63@mail.com"
        },
        {
          "EmployeeID": 10012,
          "Employees": "Margaret Tamer",
          "Designation": "System Analyst",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 4,
          "Software": 7,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 22337,
          "Address": "Magazinweg 7",
          "Mail": "margaret26@mail.com"
        },
        {
          "EmployeeID": 10013,
          "Employees": "Tamer Fuller",
          "Designation": "CFO",
          "Location": "Canada",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 78,
          "EmployeeImg": "usermale",
          "CurrentSalary": 89181,
          "Address": "Taucherstraße 10",
          "Mail": "tamer40@arpy.com"
        },
        {
          "EmployeeID": 10014,
          "Employees": "Tamer Anne",
          "Designation": "CFO",
          "Location": "Sweden",
          "Status": "Active",
          "Trustworthiness": "Sufficient",
          "Rating": 0,
          "Software": 18,
          "EmployeeImg": "usermale",
          "CurrentSalary": 20998,
          "Address": "Taucherstraße 10",
          "Mail": "tamer68@arpy.com"
        },
        {
          "EmployeeID": 10015,
          "Employees": "Anton Davolio",
          "Designation": "Project Lead",
          "Location": "France",
          "Status": "Active",
          "Trustworthiness": "Sufficient",
          "Rating": 4,
          "Software": 8,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 48232,
          "Address": "Luisenstr. 48",
          "Mail": "anton46@mail.com"
        },
        {
          "EmployeeID": 10016,
          "Employees": "Buchanan Buchanan",
          "Designation": "System Analyst",
          "Location": "Austria",
          "Status": "Inactive",
          "Trustworthiness": "Perfect",
          "Rating": 0,
          "Software": 19,
          "EmployeeImg": "usermale",
          "CurrentSalary": 43041,
          "Address": "Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
          "Mail": "buchanan68@mail.com"
        },
        {
          "EmployeeID": 10017,
          "Employees": "King Buchanan",
          "Designation": "Program Directory",
          "Location": "Sweden",
          "Status": "Active",
          "Trustworthiness": "Sufficient",
          "Rating": 0,
          "Software": 44,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 25259,
          "Address": "Magazinweg 7",
          "Mail": "king80@jourrapide.com"
        },
        {
          "EmployeeID": 10018,
          "Employees": "Rose Michael",
          "Designation": "Project Lead",
          "Location": "Canada",
          "Status": "Active",
          "Trustworthiness": "Perfect",
          "Rating": 4,
          "Software": 31,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 91156,
          "Address": "Fauntleroy Circus",
          "Mail": "rose75@mail.com"
        },
        {
          "EmployeeID": 10019,
          "Employees": "King Bergs",
          "Designation": "Developer",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Sufficient",
          "Rating": 2,
          "Software": 29,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 28826,
          "Address": "2817 Milton Dr.",
          "Mail": "king57@jourrapide.com"
        },
        {
          "EmployeeID": 10020,
          "Employees": "Davolio Fuller",
          "Designation": "Designer",
          "Location": "Canada",
          "Status": "Inactive",
          "Trustworthiness": "Sufficient",
          "Rating": 3,
          "Software": 35,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 71035,
          "Address": "Gran Vía, 1",
          "Mail": "davolio29@arpy.com"
        },
        {
          "EmployeeID": 10021,
          "Employees": "Rose Rose",
          "Designation": "CFO",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Perfect",
          "Rating": 3,
          "Software": 38,
          "EmployeeImg": "usermale",
          "CurrentSalary": 68123,
          "Address": "Rua do Mercado, 12",
          "Mail": "rose54@arpy.com"
        },
        {
          "EmployeeID": 10022,
          "Employees": "Andrew Michael",
          "Designation": "Program Directory",
          "Location": "UK",
          "Status": "Inactive",
          "Trustworthiness": "Insufficient",
          "Rating": 2,
          "Software": 61,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 75470,
          "Address": "2, rue du Commerce",
          "Mail": "andrew88@jourrapide.com"
        },
        {
          "EmployeeID": 10023,
          "Employees": "Davolio Kathryn",
          "Designation": "Manager",
          "Location": "Germany",
          "Status": "Active",
          "Trustworthiness": "Perfect",
          "Rating": 3,
          "Software": 25,
          "EmployeeImg": "usermale",
          "CurrentSalary": 25234,
          "Address": "Hauptstr. 31",
          "Mail": "davolio42@sample.com"
        },
        {
          "EmployeeID": 10024,
          "Employees": "Anne Fleet",
          "Designation": "System Analyst",
          "Location": "UK",
          "Status": "Active",
          "Trustworthiness": "Perfect",
          "Rating": 3,
          "Software": 0,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 8341,
          "Address": "59 rue de lAbbaye",
          "Mail": "anne86@arpy.com"
        },
        {
          "EmployeeID": 10025,
          "Employees": "Margaret Andrew",
          "Designation": "System Analyst",
          "Location": "Germany",
          "Status": "Inactive",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 51,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 84975,
          "Address": "P.O. Box 555",
          "Mail": "margaret41@arpy.com"
        },
        {
          "EmployeeID": 10026,
          "Employees": "Kathryn Laura",
          "Designation": "Project Lead",
          "Location": "Austria",
          "Status": "Active",
          "Trustworthiness": "Insufficient",
          "Rating": 3,
          "Software": 48,
          "EmployeeImg": "usermale",
          "CurrentSalary": 97282,
          "Address": "Avda. Azteca 123",
          "Mail": "kathryn82@rpy.com"
        },
        {
          "EmployeeID": 10027,
          "Employees": "Michael Michael",
          "Designation": "Developer",
          "Location": "UK",
          "Status": "Inactive",
          "Trustworthiness": "Perfect",
          "Rating": 4,
          "Software": 16,
          "EmployeeImg": "usermale",
          "CurrentSalary": 4184,
          "Address": "Rua do Paço, 67",
          "Mail": "michael58@jourrapide.com"
        },
        {
          "EmployeeID": 10028,
          "Employees": "Leverling Vinet",
          "Designation": "Project Lead",
          "Location": "Germany",
          "Status": "Inactive",
          "Trustworthiness": "Perfect",
          "Rating": 0,
          "Software": 57,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 38370,
          "Address": "59 rue de lAbbaye",
          "Mail": "leverling102@sample.com"
        },
        {
          "EmployeeID": 10029,
          "Employees": "Rose Jack",
          "Designation": "Developer",
          "Location": "UK",
          "Status": "Active",
          "Trustworthiness": "Perfect",
          "Rating": 0,
          "Software": 46,
          "EmployeeImg": "userfemale",
          "CurrentSalary": 84790,
          "Address": "Rua do Mercado, 12",
          "Mail": "rose108@jourrapide.com"
        },
        {
          "EmployeeID": 10030,
          "Employees": "Vinet Van",
          "Designation": "Developer",
          "Location": "USA",
          "Status": "Active",
          "Trustworthiness": "Sufficient",
          "Rating": 0,
          "Software": 40,
          "EmployeeImg": "usermale",
          "CurrentSalary": 71005,
          "Address": "Gran Vía, 1",
          "Mail": "vinet90@jourrapide.com"
        }
      ],
      exports.defaultData=  [
        { 'Item Name': 'Casual Shoes', Date: '02/14/2014', Time: '11:34:32 AM', Quantity: 10, Price: 20, Amount: 200, Discount: 1, Profit: 10 },
        { 'Item Name': 'Sports Shoes', Date: '06/11/2014', Time: '05:56:32 AM', Quantity: 20, Price: 30, Amount: 600, Discount: 5, Profit: 50 },
        { 'Item Name': 'Formal Shoes', Date: '07/27/2014', Time: '03:32:44 AM', Quantity: 20, Price: 15, Amount: 300, Discount: 7, Profit: 27 },
        { 'Item Name': 'Sandals & Floaters', Date: '11/21/2014', Time: '06:23:54 AM', Quantity: 15, Price: 20, Amount: 300, Discount: 11, Profit: 67 },
        { 'Item Name': 'Flip- Flops & Slippers', Date: '06/23/2014', Time: '12:43:59 AM', Quantity: 30, Price: 10, Amount: 300, Discount: 10, Profit: 70 },
        { 'Item Name': 'Sneakers', Date: '07/22/2014', Time: '10:55:53 AM', Quantity: 40, Price: 20, Amount: 800, Discount: 13, Profit: 66 },
        { 'Item Name': 'Running Shoes', Date: '02/04/2014', Time: '03:44:34 AM', Quantity: 20, Price: 10, Amount: 200, Discount: 3, Profit: 14 },
        { 'Item Name': 'Loafers', Date: '11/30/2014', Time: '03:12:52 AM', Quantity: 31, Price: 10, Amount: 310, Discount: 6, Profit: 29 },
        { 'Item Name': 'Cricket Shoes', Date: '07/09/2014', Time: '11:32:14 AM', Quantity: 41, Price: 30, Amount: 1210, Discount: 12, Profit: 166 },
        { 'Item Name': 'T-Shirts', Date: '10/31/2014', Time: '12:01:44 AM', Quantity: 50, Price: 10, Amount: 500, Discount: 9, Profit: 55 },
    ]
});

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.

Limitations of Protect Workbook

  • Encryption with password is not supported in the Protect workbook feature.

Note

You can refer to our Vue Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore our Vue Spreadsheet example to knows how to present and manipulate data.

See Also

Previous
Next