Demos
Features
Workbook
Multiple Sheets Selection

Multiple Sheets Selection

Users can select multiple sheets for batch operations using the Shift/Ctrl/Cmd key and clicking to select and deselect sheet tabs. This is the default SpreadJS behavior which matches Excel. In addition, Worksheet.isSelected method is used to select and deselect worksheets.

JavaScript
Angular
Vue
Vue3
React
Description
app.jsx
app-func.jsx
app-class.jsx
index.html
styles.css
Copy to CodeMine

You can get or set the selected state of a worksheet using the isSelected method, for example:

// get the selected state of a sheet
var selectedState = sheet.isSelected();

// set the selected state of a sheet
sheet.isSelected(true);
sheet.isSelected(false);

The active sheet is always selected and cannot be set to unselected. If you set active sheet as unselected using the isSelected method, the active but not selected sheet will have another sheet tab view.

You can also change the selected state for a sheet or sheets by clicking with shift/ctrl key (in MacOS you need to use shift/command key instead).

Spread also provides two events when changing the selected state of a sheet.

var sheetSelectedStateChanging = false;
var sheetSelectedStateChanged = false;

// If the selected state doesn't change, the two events won't be triggered.
spread.bind(GC.Spread.Sheets.Events.SheetChanging, function (e, args) {
    if (sheetSelectedStateChanging === false) {
        sheetSelectedStateChanging = true;
        args.cancel = true;
    }
});

// If the data.cancel is true, the SheetSelectedStateChanged won't be triggered.
spread.bind(GC.Spread.Sheets.Events.SheetChanged, function (e, args) {
     sheetSelectedStateChanged = true;
});

// sheetSelectedStateChanging is true now;
// sheetSelectedStateChanged is false now;

Spread supports batch delete and hide functions of multiple selected sheets.

You can get or set the selected state of a worksheet using the isSelected method, for example: The active sheet is always selected and cannot be set to unselected. If you set active sheet as unselected using the isSelected method, the active but not selected sheet will have another sheet tab view. You can also change the selected state for a sheet or sheets by clicking with shift/ctrl key (in MacOS you need to use shift/command key instead). Spread also provides two events when changing the selected state of a sheet. Spread supports batch delete and hide functions of multiple selected sheets.
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { AppFunc } from './app-func'; import { App } from './app-class'; // 1. Functional Component sample ReactDOM.render(<AppFunc />, document.getElementById('app')); // 2. Class Component sample // ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react'; import { useState } from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react'; import './styles.css'; let spread = null; export function AppFunc() { const [state, setState] = useState({ sheet1IsSelected: true, sheet2IsSelected: true, sheet3IsSelected: true, sheet4IsSelected: false, sheet5IsSelected: false }); const changeState = (sheet) => { let sheetName = sheet.name(); setState(state => { let currentState = { sheet1IsSelected: state.sheet1IsSelected, sheet2IsSelected: state.sheet2IsSelected, sheet3IsSelected: state.sheet3IsSelected, sheet4IsSelected: state.sheet4IsSelected, sheet5IsSelected: state.sheet5IsSelected }; switch (sheetName) { case "Sheet1": currentState.sheet1IsSelected = sheet.isSelected(); break; case "Sheet2": currentState.sheet2IsSelected = sheet.isSelected(); break; case "Sheet3": currentState.sheet3IsSelected = sheet.isSelected(); break; case "Sheet4": currentState.sheet4IsSelected = sheet.isSelected(); break; case "Sheet5": currentState.sheet5IsSelected = sheet.isSelected(); break; } return currentState; }); } const initSpread = (sjs) => { spread = sjs; spread.suspendPaint(); let sheet1 = spread.getSheetFromName("Sheet1"); let sheet2 = spread.getSheetFromName("Sheet2"); let sheet3 = spread.getSheetFromName("Sheet3"); sheet1.isSelected(true); sheet2.isSelected(true); sheet3.isSelected(true); spread.bind(GC.Spread.Sheets.Events.SheetChanged, function (e, args) { let sheet = spread.getSheetFromName(args.sheetName); if (sheet) { changeState(sheet); } }); spread.resumePaint(); } const onChange = (e) => { let sheet = spread.getSheetFromName(e.target.id); sheet.isSelected(e.target.checked); spread.repaint(); changeState(sheet); } return <div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => initSpread(spread)}> <Worksheet></Worksheet> <Worksheet></Worksheet> <Worksheet></Worksheet> <Worksheet></Worksheet> <Worksheet></Worksheet> </SpreadSheets> </div> <div class="options-container"> <div class="option-row"> <p>Click the checkbox to select or deselect the sheet.</p> <p>Hold down the Shift/Ctrl/Cmd key and click the sheet tab to select/deselect multiple sheets. The sheet checkbox will update correspondingly.</p> </div> <div class="sheets-checkboxes-container"> <div class="option-row"> <input type="checkbox" id="Sheet1" checked={state.sheet1IsSelected} onChange={e => onChange(e)} /> <label htmlFor="Sheet1" id="labelOfSheet1">Sheet1</label> </div> <div class="option-row"> <input type="checkbox" id="Sheet2" checked={state.sheet2IsSelected} onChange={e => onChange(e)} /> <label htmlFor="Sheet2" id="labelOfSheet2">Sheet2</label> </div> <div class="option-row"> <input type="checkbox" id="Sheet3" checked={state.sheet3IsSelected} onChange={e => onChange(e)} /> <label htmlFor="Sheet3" id="labelOfSheet3">Sheet3</label> </div> <div class="option-row"> <input type="checkbox" id="Sheet4" checked={state.sheet4IsSelected} onChange={e => onChange(e)} /> <label htmlFor="Sheet4" id="labelOfSheet4">Sheet4</label> </div> <div class="option-row"> <input type="checkbox" id="Sheet5" checked={state.sheet5IsSelected} onChange={e => onChange(e)} /> <label htmlFor="Sheet5" id="labelOfSheet5">Sheet5</label> </div> </div> </div> </div>; }
import * as React from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react'; import './styles.css'; const Component = React.Component; export class App extends Component { constructor(props) { super(props); this.spread = null; this.state = { sheet1IsSelected: true, sheet2IsSelected: true, sheet3IsSelected: true, sheet4IsSelected: false, sheet5IsSelected: false }; } render() { return <div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}> <Worksheet></Worksheet> <Worksheet></Worksheet> <Worksheet></Worksheet> <Worksheet></Worksheet> <Worksheet></Worksheet> </SpreadSheets> </div> <div class="options-container"> <div class="option-row"> <p>Click the checkbox to select or deselect the sheet.</p> <p>Hold down the Shift/Ctrl/Cmd key and click the sheet tab to select/deselect multiple sheets. The sheet checkbox will update correspondingly.</p> </div> <div class="sheets-checkboxes-container"> <div class="option-row"> <input type="checkbox" id="Sheet1" checked={this.state.sheet1IsSelected} onChange={e => this.onChange(e)} /> <label htmlFor="Sheet1" id="labelOfSheet1">Sheet1</label> </div> <div class="option-row"> <input type="checkbox" id="Sheet2" checked={this.state.sheet2IsSelected} onChange={e => this.onChange(e)} /> <label htmlFor="Sheet2" id="labelOfSheet2">Sheet2</label> </div> <div class="option-row"> <input type="checkbox" id="Sheet3" checked={this.state.sheet3IsSelected} onChange={e => this.onChange(e)} /> <label htmlFor="Sheet3" id="labelOfSheet3">Sheet3</label> </div> <div class="option-row"> <input type="checkbox" id="Sheet4" checked={this.state.sheet4IsSelected} onChange={e => this.onChange(e)} /> <label htmlFor="Sheet4" id="labelOfSheet4">Sheet4</label> </div> <div class="option-row"> <input type="checkbox" id="Sheet5" checked={this.state.sheet5IsSelected} onChange={e => this.onChange(e)} /> <label htmlFor="Sheet5" id="labelOfSheet5">Sheet5</label> </div> </div> </div> </div>; } initSpread(spread) { this.spread = spread; spread.suspendPaint(); let sheet1 = spread.getSheetFromName("Sheet1"); let sheet2 = spread.getSheetFromName("Sheet2"); let sheet3 = spread.getSheetFromName("Sheet3"); sheet1.isSelected(true); sheet2.isSelected(true); sheet3.isSelected(true); let self = this; spread.bind(GC.Spread.Sheets.Events.SheetChanged, function (e, args) { let sheet = self.spread.getSheetFromName(args.sheetName); if (sheet) { self.changeState(sheet); } }); spread.resumePaint(); } changeState(sheet) { let self = this; let sheetName = sheet.name(); let currentState = { sheet1IsSelected: self.state.sheet1IsSelected, sheet2IsSelected: self.state.sheet2IsSelected, sheet3IsSelected: self.state.sheet3IsSelected, sheet4IsSelected: self.state.sheet4IsSelected, sheet5IsSelected: self.state.sheet5IsSelected }; switch (sheetName) { case "Sheet1": currentState.sheet1IsSelected = sheet.isSelected(); break; case "Sheet2": currentState.sheet2IsSelected = sheet.isSelected(); break; case "Sheet3": currentState.sheet3IsSelected = sheet.isSelected(); break; case "Sheet4": currentState.sheet4IsSelected = sheet.isSelected(); break; case "Sheet5": currentState.sheet5IsSelected = sheet.isSelected(); break; } self.setState(currentState); } onChange(e) { let spread = this.spread; let sheet = spread.getSheetFromName(e.target.id); sheet.isSelected(e.target.checked); spread.repaint(); this.changeState(sheet); } }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- SystemJS --> <script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('$DEMOROOT$/en/lib/react/license.js').then(function () { System.import('./src/app'); }); </script> </head> <body> <div id="app"></div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } .sheets-checkboxes-container { padding-left: 10px; } label { margin-bottom: 6px; } input { padding: 4px 6px; } hr { border-color: #fff; opacity: .2; margin-top: 20px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #app { height: 100%; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'react': 'npm:react/umd/react.production.min.js', 'react-dom': 'npm:react-dom/umd/react-dom.production.min.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);