The context menu supports scrolling, and you can use the spread.contextMenu.menuView.scrollable to control whether the context menu is able to scroll.
You can use the spread.contextMenu.menuView.maxHeight to set or get context menu's max height.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
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 { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import GC from '@mescius/spread-sheets';
import './styles.css';
const useState = React.useState;
export function AppFunc() {
const [spread, setSpread] = useState(null);
const [state, setState] = useState({
maxHeight: "",
scrollable: true
});
const initSpread = (spread) => {
setSpread(spread);
let sheet = spread.getActiveSheet();
sheet.suspendPaint();
let dataColumns = ["Name", "City", "Birthday", "Sex", "Weight", "Height"];
let data = [
["Bob", "New York", "1968/6/8", "M", "80", "180"],
["Betty", "New York", "1972/7/3", "F", "72", "168"],
["Cherry", "Washington", "1986/2/2", "F", "58", "161"],
["Gary", "New York", "1964/3/2", "M", "71", "179"],
["Hunk", "Washington", "1972/8/8", "M", "80", "171"],
["Eva", "Washington", "1993/2/15", "F", "71", "180"]
];
sheet.tables.addFromDataSource("table1", 1, 1, data, GC.Spread.Sheets.Tables.TableThemes.medium7);
sheet.getRange(-1, 1, -1, 6).width(80);
sheet.getRange(2, 3, 6, 1).formatter("mm-dd-yyyy");
let table = sheet.tables.findByName("table1");
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
table.setColumnName(5, dataColumns[5]);
sheet.resumePaint();
}
const setScrollable = (e) => {
const scrollable = e.target.checked;
setState(state => ({
...state,
scrollable: scrollable
}));
spread.contextMenu.menuView.scrollable(scrollable);
}
const setMaxHeight = () => {
const maxHeight = state.maxHeight;
if (!isNaN(maxHeight)) {
spread.contextMenu.menuView.maxHeight(+maxHeight);
}
}
const changeMaxHeight = (e) => {
const value = e.target.value;
setState(state => ({ ...state, maxHeight: value }));
}
return <div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div className="options-container">
<label>Try setting the height to 150 in the context menu below.</label>
<div class="option-row">
<div class="option-row">
<label for="contextMenuMaxHeight">Context Menu Max Height: </label>
<input type="text" id="contextMenuMaxHeight" onChange={e => changeMaxHeight(e)} value={state.maxHeight} />
<input type="button" id="setContextMenuMaxHeight" value="Set"
onClick={e => setMaxHeight(e)} />
</div>
</div>
<div class="option-row">
<input type="checkbox" id="scrollable" onChange={e => setScrollable(e)} checked={state.scrollable} />
<label for="scrollable">Enable Context Menu Scroll</label>
</div>
</div>
</div>;
}
import * as React from 'react';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import GC from '@mescius/spread-sheets';
import './styles.css';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
this.state = {
maxHeight: "",
scrollable: true
}
}
render() {
return <div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={ spread => this.initSpread(spread) }>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
<div className="options-container">
<label>Try setting the height to 150 in the context menu below.</label>
<div class="option-row">
<div class="option-row">
<label for="contextMenuMaxHeight">Context Menu Max Height: </label>
<input type="text" id="contextMenuMaxHeight" onChange={ e => this.changeMaxHeight(e) } value={this.state.maxHeight}/>
<input type="button" id="setContextMenuMaxHeight" value="Set"
onClick={ e => this.setMaxHeight(e) }/>
</div>
</div>
<div class="option-row">
<input type="checkbox" id="scrollable" onChange={ e => this.scrollable(e) } checked={this.state.scrollable}/>
<label for="scrollable">Enable Context Menu Scroll</label>
</div>
</div>
</div>;
}
initSpread(spread) {
this.spread = spread;
let sheet = spread.getActiveSheet();
sheet.suspendPaint();
let dataColumns = ["Name", "City", "Birthday", "Sex", "Weight", "Height"];
let data = [
["Bob", "New York", "1968/6/8", "M", "80", "180"],
["Betty", "New York", "1972/7/3", "F", "72", "168"],
["Cherry", "Washington", "1986/2/2", "F", "58", "161"],
["Gary", "New York", "1964/3/2", "M", "71", "179"],
["Hunk", "Washington", "1972/8/8", "M", "80", "171"],
["Eva", "Washington", "1993/2/15", "F", "71", "180"]
];
sheet.tables.addFromDataSource("table1", 1, 1, data, GC.Spread.Sheets.Tables.TableThemes.medium7);
sheet.getRange(-1, 1, -1, 6).width(80);
sheet.getRange(2, 3, 6, 1).formatter("mm-dd-yyyy");
let table = sheet.tables.findByName("table1");
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
table.setColumnName(5, dataColumns[5]);
sheet.resumePaint();
}
scrollable(e) {
var spread = this.spread, scrollable = e.target.checked;
this.setState({
scrollable
});
spread.contextMenu.menuView.scrollable(scrollable);
}
setMaxHeight() {
var spread = this.spread, maxHeight = this.state.maxHeight;
if (!isNaN(maxHeight)) {
spread.contextMenu.menuView.maxHeight(+maxHeight);
}
}
changeMaxHeight(e) {
this.setState({
maxHeight: e.target.value
});
}
}
<!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">
<script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script>
<!-- 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;
margin-top: 10px;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
}
p{
padding:2px 10px;
background-color:#F4F8EB;
}
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);
