It helps to organize a spreadsheet’s features into a series of tabs. By clicking the expand or collapse icon, you can expand or collapse the ribbon toolbar dynamically.
You can customize the ribbon using the following methods,
| Method | Action |
|---|---|
hideRibbonTabs |
Used to show or hide the existing ribbon tabs. |
enableRibbonTabs |
Used to enable or disable the existing |
| ribbon tabs. | |
addRibbonTabs |
Used to add custom ribbon tabs. |
hideToolbarItems |
Used to show or hide the existing ribbon |
| toolbar items. | |
enableToolbarItems |
Used to enable or disable the specified |
| toolbar items. | |
addToolbarItems |
Used to add the custom items in ribbon |
| toolbar. | |
hideFileMenuItems |
Used to show or hide the ribbon file menu |
| items. | |
enableFileMenuItems |
Used to enable or disable file menu items. |
addFileMenuItems |
Used to add custom file menu items. |
The following code example shows the usage of ribbon customization.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { select } from '@syncfusion/ej2-base';
import { RangeDirective, ColumnsDirective, ColumnDirective} from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component<{}, {}> {
public spreadsheet: SpreadsheetComponent;
public created(): void{
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:F1');
// Hiding the `Insert` from ribbon.
this.spreadsheet.hideRibbonTabs(['Insert']);
// Set disabled state to `View` ribbon tab.
this.spreadsheet.enableRibbonTabs(['View'], false);
// Adding the `Help` ribbon tab at the last index.
// Specify the ribbon tab header text in last optional argument(`insertBefore`) for inserting new tab before any existing tab.
this.spreadsheet.addRibbonTabs([{ header: { text: 'Help' }, content: [{ text: 'Feedback', tooltipText: 'Feedback',
click: (): void => { /* Any click action for this toolbar item will come here. */ } }] }]);
// Hiding the unwanted toolbar items from `Home` by specifying its index.
this.spreadsheet.hideToolbarItems('Home', [0, 1, 2, 4, 14, 15, 21, 24]);
// Set disable state to `Underline`, 'Wrap text` toolbar items from `Home` by specifying the item id.
this.spreadsheet.enableToolbarItems('Home', [`${this.spreadsheet.element.id}_underline`, `${this.spreadsheet.element.id}_wrap`], false);
// Set disable state to `Protect Sheet` toolbar item from `Data` by mentioning its index.
this.spreadsheet.enableToolbarItems('Data', [0], false);
// Adding the new `Custom Formulas` toolbar item under `Formulas` tab for adding custom formulas.
this.spreadsheet.addToolbarItems(
'Formulas', [{ type: 'Separator' }, {
text: 'Custom Formulas', tooltipText: 'Custom Formulas',
// You can set click handler for each new custom toolbar item
click: (): void => {
// You can add custom formulas here.
}
}]);
// Adding new custom item `Import` after the existing `Open` item. By default, new item will add after the specified item.
this.spreadsheet.addFileMenuItems([{ text: 'Import', iconCss: 'e-open e-icons' }], 'Open');
// Adding new custom item `Export As` after the existing `Save As` item.
// Set `insertAfter` optional argument as `false` for adding new item before the specified item.
this.spreadsheet.addFileMenuItems(
[{
text: 'Export As', iconCss: 'e-save e-icons', items: [{ text: 'XLSX', iconCss: 'e-xlsx e-icons' },
{ text: 'XLS', iconCss: 'e-xls e-icons' }, { text: 'CSV', iconCss: 'e-csv e-icons' }]
}],
'Save As', false);
};
public fileMenuBeforeOpen(): void{
// Because the file menu items are created dynamically, you need to perform the hide or show and enable/disable operations
// under filemenu before open event.
// Hiding the `Save As` and `Open` item.
this.spreadsheet.hideFileMenuItems(['Save As', 'Open']);
// Set disable state to `New` item. You can perform any file menu items customization by specifying the item id,
// if it has more than one same item text. Set the last argument `isUniqueId` as true for using the item id.
this.spreadsheet.enableFileMenuItems([`${this.spreadsheet.element.id}_New`], false, true);
}
public fileMenuItemSelect(args): void{
// Custom file menu items select handler
switch (args.item.text) {
case 'Import': select(`#${this.spreadsheet.element.id}_fileUpload`, this.spreadsheet.element).click();
break;
case 'XLSX': this.spreadsheet.save({ saveType: 'Xlsx' });
break;
case 'XLS': this.spreadsheet.save({ saveType: 'Xls' });
break;
case 'CSV': this.spreadsheet.save({ saveType: 'Csv' });
break;
}
}
render() {
return ( <div>
<SpreadsheetComponent
ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.created.bind(this)} fileMenuBeforeOpen={this.fileMenuBeforeOpen.bind(this)} fileMenuItemSelect={this.fileMenuItemSelect.bind(this)}
showFormulaBar={false} showSheetTabs={false} allowInsert={false} allowDelete={false} allowMerge={false} openUrl="https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open"
saveUrl="https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save">
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));/**
* Ribbon customization data source
*/
export let data: Object[] = [
{
'Customer Name': 'Romona Heaslip',
'Model': 'Taurus',
'Color': 'Aquamarine',
'Payment Mode': 'Debit Card',
'Delivery Date': '07/11/2015',
'Amount': '8529.22'
},
{
'Customer Name': 'Clare Batterton',
'Model': 'Sparrow',
'Color': 'Pink',
'Payment Mode': 'Cash On Delivery',
'Delivery Date': '7/13/2016',
'Amount': '17866.19'
},
{
'Customer Name': 'Eamon Traise',
'Model': 'Grand Cherokee',
'Color': 'Blue',
'Payment Mode': 'Net Banking',
'Delivery Date': '09/04/2015',
'Amount': '13853.09'
},
{
'Customer Name': 'Julius Gorner',
'Model': 'GTO',
'Color': 'Aquamarine',
'Payment Mode': 'Credit Card',
'Delivery Date': '12/15/2017',
'Amount': '2338.74'
},
{
'Customer Name': 'Jenna Schoolfield',
'Model': 'LX',
'Color': 'Yellow',
'Payment Mode': 'Credit Card',
'Delivery Date': '10/08/2014',
'Amount': '9578.45'
},
{
'Customer Name': 'Marylynne Harring',
'Model': 'Catera',
'Color': 'Green',
'Payment Mode': 'Cash On Delivery',
'Delivery Date': '7/01/2017',
'Amount': '19141.62'
},
{
'Customer Name': 'Vilhelmina Leipelt',
'Model': '7 Series',
'Color': 'Goldenrod',
'Payment Mode': 'Credit Card',
'Delivery Date': '12/20/2015',
'Amount': '6543.30'
},
{
'Customer Name': 'Barby Heisler',
'Model': 'Corvette',
'Color': 'Red',
'Payment Mode': 'Credit Card',
'Delivery Date': '11/24/2014',
'Amount': '13035.06'
},
{
'Customer Name': 'Karyn Boik',
'Model': 'Regal',
'Color': 'Indigo',
'Payment Mode': 'Debit Card',
'Delivery Date': '05/12/2014',
'Amount': '18488.80'
},
{
'Customer Name': 'Jeanette Pamplin',
'Model': 'S4',
'Color': 'Fuscia',
'Payment Mode': 'Net Banking',
'Delivery Date': '12/30/2014',
'Amount': '12317.04'
},
{
'Customer Name': 'Cristi Espinos',
'Model': 'TL',
'Color': 'Aquamarine',
'Payment Mode': 'Credit Card',
'Delivery Date': '12/18/2013',
'Amount': '6230.13'
}
];<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Spreadsheet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
body {
overflow: hidden;
}
.customClass.e-cell {
background-color: red;
}
</style>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { SpreadsheetComponent, SheetsDirective, SheetDirective, RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
import { select } from '@syncfusion/ej2-base';
import { RangeDirective, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { data } from './datasource';
export default class App extends React.Component {
created() {
this.spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:F1');
// Hiding the `Insert` from ribbon.
this.spreadsheet.hideRibbonTabs(['Insert']);
// Set disabled state to `View` ribbon tab.
this.spreadsheet.enableRibbonTabs(['View'], false);
// Adding the `Help` ribbon tab at the last index.
// Specify the ribbon tab header text in last optional argument(`insertBefore`) for inserting new tab before any existing tab.
this.spreadsheet.addRibbonTabs([{ header: { text: 'Help' }, content: [{ text: 'Feedback', tooltipText: 'Feedback',
click: () => { } }] }]);
// Hiding the unwanted toolbar items from `Home` by specifying its index.
this.spreadsheet.hideToolbarItems('Home', [0, 1, 2, 4, 14, 15, 21, 24]);
// Set disable state to `Underline`, 'Wrap text` toolbar items from `Home` by specifying the item id.
this.spreadsheet.enableToolbarItems('Home', [`${this.spreadsheet.element.id}_underline`, `${this.spreadsheet.element.id}_wrap`], false);
// Set disable state to `Protect Sheet` toolbar item from `Data` by mentioning its index.
this.spreadsheet.enableToolbarItems('Data', [0], false);
// Adding the new `Custom Formulas` toolbar item under `Formulas` tab for adding custom formulas.
this.spreadsheet.addToolbarItems('Formulas', [{ type: 'Separator' }, {
text: 'Custom Formulas', tooltipText: 'Custom Formulas',
// You can set click handler for each new custom toolbar item
click: () => {
// You can add custom formulas here.
}
}]);
// Adding new custom item `Import` after the existing `Open` item. By default, new item will add after the specified item.
this.spreadsheet.addFileMenuItems([{ text: 'Import', iconCss: 'e-open e-icons' }], 'Open');
// Adding new custom item `Export As` after the existing `Save As` item.
// Set `insertAfter` optional argument as `false` for adding new item before the specified item.
this.spreadsheet.addFileMenuItems([{
text: 'Export As', iconCss: 'e-save e-icons', items: [{ text: 'XLSX', iconCss: 'e-xlsx e-icons' },
{ text: 'XLS', iconCss: 'e-xls e-icons' }, { text: 'CSV', iconCss: 'e-csv e-icons' }]
}], 'Save As', false);
}
;
fileMenuBeforeOpen() {
// Because the file menu items are created dynamically, you need to perform the hide or show and enable/disable operations
// under filemenu before open event.
// Hiding the `Save As` and `Open` item.
this.spreadsheet.hideFileMenuItems(['Save As', 'Open']);
// Set disable state to `New` item. You can perform any file menu items customization by specifying the item id,
// if it has more than one same item text. Set the last argument `isUniqueId` as true for using the item id.
this.spreadsheet.enableFileMenuItems([`${this.spreadsheet.element.id}_New`], false, true);
}
fileMenuItemSelect(args) {
// Custom file menu items select handler
switch (args.item.text) {
case 'Import':
select(`#${this.spreadsheet.element.id}_fileUpload`, this.spreadsheet.element).click();
break;
case 'XLSX':
this.spreadsheet.save({ saveType: 'Xlsx' });
break;
case 'XLS':
this.spreadsheet.save({ saveType: 'Xls' });
break;
case 'CSV':
this.spreadsheet.save({ saveType: 'Csv' });
break;
}
}
render() {
return (<div>
<SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj; }} created={this.created.bind(this)} fileMenuBeforeOpen={this.fileMenuBeforeOpen.bind(this)} fileMenuItemSelect={this.fileMenuItemSelect.bind(this)} showFormulaBar={false} showSheetTabs={false} allowInsert={false} allowDelete={false} allowMerge={false} openUrl="https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open" saveUrl="https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save">
<SheetsDirective>
<SheetDirective>
<RangesDirective>
<RangeDirective dataSource={data}></RangeDirective>
</RangesDirective>
<ColumnsDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={180}></ColumnDirective>
<ColumnDirective width={130}></ColumnDirective>
<ColumnDirective width={120}></ColumnDirective>
</ColumnsDirective>
</SheetDirective>
</SheetsDirective>
</SpreadsheetComponent>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('root'));