Spreadsheet toolbar
Different from previous versions, there is now one toolbar for multiple worksheets.Documentation
Methods
The following methods can be used to show, hide or customize the toolbar.| Method | Description |
|---|---|
| getToolbar | Get the toolbar's current settings.getToolbar() : Object |
| setToolbar | Redefine the toolbar settings.setToolbar(Object settings) : void
@param {Object} - Toolbar object, the allowed options are described in the table below. |
| showToolbar | Show the toolbar using the current settings.showToolbar() : void |
| hideToolbar | Hide the toolbar.hideToolbar() : void |
Toolbar Object
It is possible to customize the toolbar items though the initialization using the following properties.| Property | Description |
|---|---|
| Toolbar general properties | |
| container: boolean | Show the toolbar container border. |
| badge: boolean | Add a badge container for each toolbar element. |
| title: boolean | Show title below the icons. |
| responsive: boolean | Responsive toolbar. Default: false |
| items: Array of toolbar item | Items for the toolbar. |
| Toolbar item properties | |
| type: string | Element type: icon | divisor | label | select |
| content: string | Content of the toolbar element |
| title: boolean | Tooltip for the toolbar element |
| width: number | Toolbar element width |
| active: boolean | Initial state for the toolbar element |
| class: string | CSS Class for each toolbar element |
| value: number | The initially selected option for the type: select |
| render: method | Render method parser for the elements in the dropdown when type: select |
| onclick: method | When an item is clicked |
| onchange: method | When a new item is selected. Valid for the type: select. |
| updateState: Function | Create the item state controller.updateState: function(toolbarElement: HTMLElement, toolbarInstance: Object, toolbarItem: HTMLElement, worksheet: Object) => void |
Examples
Basic example with programmatic toggle
The following example shows how to enable the default toolbar and hide or show it programmatically after initialization.NOTE: Material icons style sheet are mandatory for toolbar usage.
It is also possible to show or hide the custom toolbar using JavaScript.
Source code
<html>
<script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v8/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet"
type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet1"></div>
<script>
var grid = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [
{ minDimensions: [8,5] },
],
toolbar: true,
});
</script>
<input type='button' value='Show Toolbar' onclick="grid[0].parent.showToolbar();">
<input type='button' value='Hide Toolbar' onclick="grid[0].parent.hideToolbar();">
</html>
Custom toolbar item
You can set the toolbar property as a function as shown below. This enables a new custom item in the default toolbar without recreating a new toolbar from scratch.Source code
<html>
<script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v8/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<div id="spreadsheet-2"></div>
<script>
jspreadsheet(document.getElementById('spreadsheet-2'), {
toolbar: function(toolbar) {
// Add a new custom item in the end of my toolbar
toolbar.items.push({
tooltip: 'My custom item',
content: 'share',
onclick: function() {
alert('Custom click');
}
});
return toolbar;
},
worksheets: [{
minDimensions: [8,10],
}]
});
</script>
</html>
Custom toolbar
Using the toolbar property, it is possible to customize the items in the spreadsheet toolbar.Source code
<html>
<script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v8/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<div id="spreadsheet-3"></div>
<script>
var customToolbar = {
items: [
{
content: 'save',
onclick: function () {
jspreadsheet.current.download();
}
},
{
type:'divisor',
},
{
type:'select',
width: '160px',
options: [ 'Verdana', 'Arial', 'Courier New' ],
render: function(e) {
return '<span style="font-family:' + e + '">' + e + '</span>';
},
onchange: function(a,b,c,d) {
jspreadsheet.current.setStyle(jspreadsheet.current.getSelected(), 'font-family', d);
}
},
{
type: 'i',
content: 'format_bold',
onclick: function(a,b,c) {
jspreadsheet.current.setStyle(jspreadsheet.current.getSelected(), 'font-weight', 'bold');
}
},
{
type: 'i',
content: 'format_italic',
onclick: function(a,b,c) {
jspreadsheet.current.setStyle(jspreadsheet.current.getSelected(), 'font-style', 'italic');
}
},
{
content: 'search',
onclick: function(a,b,c) {
if (c.children[0].innerText == 'search') {
jspreadsheet.current.showSearch();
c.children[0].innerText = 'search_off';
} else {
jspreadsheet.current.hideSearch();
c.children[0].innerText = 'search';
}
},
tooltip: 'Toggle Search',
updateState: function(a,b,c,worksheet) {
// Call this one when the worksheet is opened and on the selection of any cells
if (worksheet.options.search == true) {
c.children[0].innerText = 'search_off';
} else {
c.children[0].innerText = 'search';
}
}
}
]
}
jspreadsheet(document.getElementById('spreadsheet-3'), {
worksheets: [{
minDimensions: [8,10],
}]
toolbar: customToolbar
});
</script>
</html>