Ribbon in Vue Spreadsheet component
27 Jul 202620 minutes to read
It helps to organize a spreadsheet’s features into a series of tabs. Click the expand or collapse icon to expand or collapse the ribbon toolbar dynamically.
Ribbon Customization
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.
<template>
<ejs-spreadsheet ref="spreadsheet" :created="created" :fileMenuBeforeOpen="fileMenuBeforeOpen"
:fileMenuItemSelect="fileMenuItemSelect" :openUrl="openUrl" :saveUrl="saveUrl" :showFormulaBar="false"
:showSheetTabs="false" :allowInsert="false" :allowDelete="false" :allowMerge="false">
<e-sheets>
<e-sheet>
<e-ranges>
<e-range :dataSource="dataSource"></e-range>
</e-ranges>
<e-columns>
<e-column :width=180></e-column>
<e-column :width=130></e-column>
<e-column :width=130></e-column>
<e-column :width=180></e-column>
<e-column :width=130></e-column>
<e-column :width=120></e-column>
</e-columns>
</e-sheet>
</e-sheets>
</ejs-spreadsheet>
</template>
<script setup>
import { SpreadsheetComponent as EjsSpreadsheet, ColumnsDirective as EColumns, ColumnDirective as EColumn, RangesDirective as ERanges, RangeDirective as ERange, SheetsDirective as ESheets, SheetDirective as ESheet } from "@syncfusion/ej2-vue-spreadsheet";
import { data } from './data.js';
import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
import { createElement } from '@syncfusion/ej2-base';
const spreadsheet = ref(null);
const dataSource = data;
const openUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open';
const saveUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save';
const created = function () {
spreadsheet.value.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:F1');
// Hiding the `Insert` from ribbon.
spreadsheet.value.hideRibbonTabs(['Insert']);
// Set disabled state to `View` ribbon tab.
spreadsheet.value.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.
spreadsheet.value.addRibbonTabs([{
header: { text: 'Help' }, content: [{
text: 'Feedback', tooltipText: 'Feedback',
click: function () { /* Any click action for this toolbar item will come here. */ }
}]
}]);
// Hiding the unwanted toobar items from `Home` by specifying its index.
spreadsheet.value.hideToolbarItems('Home', [0, 1, 2, 4, 14, 15, 21, 24]);
// Set diable state to `Underline`, 'Wrap text` toobar items from `Home` by specifying the item id.
spreadsheet.value.enableToolbarItems(
'Home', [`${spreadsheet.value.ej2Instances.element.id}_underline`, `${spreadsheet.value.ej2Instances.element.id}_wrap`], false);
// Set disable state to `Protect Sheet` toolbar item from `Data` by mentioning its index.
spreadsheet.value.enableToolbarItems('Data', [0], false);
// Adding the new `Custom Formulas` toolbar item under `Formulas` tab for adding custom formulas.
spreadsheet.value.addToolbarItems(
'Formulas', [{ type: 'Separator' }, {
text: 'Custom Formulas', tooltipText: 'Custom Formulas',
// You can set click handler for each new custom toolbar item.
click: function () {
// You can add custom formualas here.
}
}]);
// Adding new custom item `Import` after the existing `Open` item. By default, new item will add after the specified item.
spreadsheet.value.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.
spreadsheet.value.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);
// Adding the new `custom dropdown button` in the ribbon toolbar item under the `Data` tab for adding a custom dropdown button using the addToolbarItems method in the spreadsheet ribbon.
spreadsheet.value.addToolbarItems('Data', [{ type: 'Separator' }, { id: 'custombtn', tooltipText: 'Custom Btn', template: appendDropdownBtn('custombtn') }], 7);
};
const fileMenuBeforeOpen = function () {
// 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.
spreadsheet.value.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.
spreadsheet.value.enableFileMenuItems([`${spreadsheet.value.ej2Instances.element.id}_New`], false, true);
}
const fileMenuItemSelect = function (args) {
// Custom file menu items select handler.
switch (args.item.text) {
case 'Import': select(`#${spreadsheet.value.element.id}_fileUpload`, spreadsheet.value.element).click();
break;
case 'XLSX': spreadsheet.value.save({ saveType: 'Xlsx' });
break;
case 'XLS': spreadsheet.value.save({ saveType: 'Xls' });
break;
case 'CSV': spreadsheet.value.save({ saveType: 'Csv' });
break;
}
}
const appendDropdownBtn = function (id) {
let ddlItems = [
{
text: 'Download Excel',
},
{
text: 'Download CSV',
},
];
let btnObj = new DropDownButton({
items: ddlItems,
content: 'Download',
iconCss: 'e-icons e-download',
select: function (args) {
alert(args.item.text + ' clicked');
},
});
btnObj.appendTo(createElement('button', { id: id }));
return btnObj.element;
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css";
</style><template>
<ejs-spreadsheet ref="spreadsheet" :created="created" :fileMenuBeforeOpen="fileMenuBeforeOpen"
:fileMenuItemSelect="fileMenuItemSelect" :openUrl="openUrl" :saveUrl="saveUrl" :showFormulaBar="false"
:showSheetTabs="false" :allowInsert="false" :allowDelete="false" :allowMerge="false">
<e-sheets>
<e-sheet>
<e-ranges>
<e-range :dataSource="dataSource"></e-range>
</e-ranges>
<e-columns>
<e-column :width="180"></e-column>
<e-column :width="130"></e-column>
<e-column :width="130"></e-column>
<e-column :width="180"></e-column>
<e-column :width="130"></e-column>
<e-column :width="120"></e-column>
</e-columns>
</e-sheet>
</e-sheets>
</ejs-spreadsheet>
</template>
<script>
import { SpreadsheetComponent, ColumnsDirective, ColumnDirective, RangesDirective, RangeDirective, SheetsDirective, SheetDirective } from "@syncfusion/ej2-vue-spreadsheet";
import { data } from './data.js';
import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
import { createElement } from '@syncfusion/ej2-base';
export default {
name: "App",
components: {
"ejs-spreadsheet": SpreadsheetComponent,
"e-sheets": SheetsDirective,
"e-sheet": SheetDirective,
"e-ranges": RangesDirective,
"e-range": RangeDirective,
"e-columns": ColumnsDirective,
"e-column": ColumnDirective
},
data: () => {
return {
dataSource: data,
openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save',
}
},
methods: {
created: function () {
let spreadsheet = this.$refs.spreadsheet;
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:F1');
// Hiding the `Insert` from ribbon.
spreadsheet.hideRibbonTabs(['Insert']);
// Set disabled state to `View` ribbon tab.
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.
spreadsheet.addRibbonTabs([{
header: { text: 'Help' }, content: [{
text: 'Feedback', tooltipText: 'Feedback',
click: function () { /* Any click action for this toolbar item will come here. */ }
}]
}]);
// Hiding the unwanted toobar items from `Home` by specifying its index.
spreadsheet.hideToolbarItems('Home', [0, 1, 2, 4, 14, 15, 21, 24]);
// Set diable state to `Underline`, 'Wrap text` toobar items from `Home` by specifying the item id.
spreadsheet.enableToolbarItems(
'Home', [`${spreadsheet.ej2Instances.element.id}_underline`, `${spreadsheet.ej2Instances.element.id}_wrap`], false);
// Set disable state to `Protect Sheet` toolbar item from `Data` by mentioning its index.
spreadsheet.enableToolbarItems('Data', [0], false);
// Adding the new `Custom Formulas` toolbar item under `Formulas` tab for adding custom formulas.
spreadsheet.addToolbarItems(
'Formulas', [{ type: 'Separator' }, {
text: 'Custom Formulas', tooltipText: 'Custom Formulas',
// You can set click handler for each new custom toolbar item.
click: function () {
// You can add custom formualas here.
}
}]);
// Adding new custom item `Import` after the existing `Open` item. By default, new item will add after the specified item.
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` for adding new item before the specified item.
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);
// Adding the new `custom dropdown button` in the ribbon toolbar item under the `Data` tab for adding a custom dropdown button using the addToolbarItems method in the spreadsheet ribbon.
spreadsheet.addToolbarItems('Data', [{ type: 'Separator' }, { id: 'custombtn', tooltipText: 'Custom Btn', template: this.appendDropdownBtn('custombtn') }], 7);
},
fileMenuBeforeOpen: function () {
let spreadsheet = this.$refs.spreadsheet;
// 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.
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` for using the item id.
spreadsheet.enableFileMenuItems([`${spreadsheet.ej2Instances.element.id}_New`], false, true);
},
fileMenuItemSelect: function (args) {
let spreadsheet = this.$refs.spreadsheet;
// Custom file menu items select handler.
switch (args.item.text) {
case 'Import': select(`#${spreadsheet.element.id}_fileUpload`, spreadsheet.element).click();
break;
case 'XLSX': spreadsheet.save({ saveType: 'Xlsx' });
break;
case 'XLS': spreadsheet.save({ saveType: 'Xls' });
break;
case 'CSV': spreadsheet.save({ saveType: 'Csv' });
break;
}
},
appendDropdownBtn: function (id) {
let ddlItems = [
{
text: 'Download Excel',
},
{
text: 'Download CSV',
},
];
let btnObj = new DropDownButton({
items: ddlItems,
content: 'Download',
iconCss: 'e-icons e-download',
select: function (args) {
alert(args.item.text + ' clicked');
},
});
btnObj.appendTo(createElement('button', { id: id }));
return btnObj.element;
}
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/tailwind3.css";
</style>Note
You can refer to our Vue Spreadsheet Editor feature tour page for its groundbreaking feature representations.