Ribbon in Spreadsheet control
29 Dec 202217 minutes to read
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.
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.
<ejs-spreadsheet id="spreadsheet" created="created" fileMenuItemSelect="fileMenuItemSelect" fileMenuBeforeOpen="fileMenuBeforeOpen" showFormulaBar="false" showSheetTabs="false" allowInsert="false" allowDelete="false" allowMerge="false" openUrl="Home/open" saveUrl="Home/Save">
<e-spreadsheet-sheets>
<e-spreadsheet-sheet name="Shipment Details">
<e-spreadsheet-ranges>
<e-spreadsheet-range dataSource="ViewBag.DefaultData"></e-spreadsheet-range>
</e-spreadsheet-ranges>
<e-spreadsheet-columns>
<e-spreadsheet-column width="130"></e-spreadsheet-column>
<e-spreadsheet-column width="140"></e-spreadsheet-column>
<e-spreadsheet-column width="90"></e-spreadsheet-column>
<e-spreadsheet-column width="140"></e-spreadsheet-column>
<e-spreadsheet-column width="90"></e-spreadsheet-column>
<e-spreadsheet-column width="100"></e-spreadsheet-column>
<e-spreadsheet-column width="100"></e-spreadsheet-column>
</e-spreadsheet-columns>
</e-spreadsheet-sheet>
</e-spreadsheet-sheets>
</ejs-spreadsheet>
<script>
function created() {
this.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:F1');
// Hiding the `Insert` from ribbon.
this.hideRibbonTabs(['Insert']);
// Set disabled state to `View` ribbon tab.
this.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.addRibbonTabs([{
header: { text: 'Help' }, content: [{
text: 'Feedback', tooltipText: 'Feedback',
click: (args) => { /* Any click action for this toolbar item will come here. */ }
}]
}]);
// Hiding the unwanted toolbar items from `Home` by specifying its index.
this.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.enableToolbarItems('Home', [`${this.element.id}_underline`, `${this.element.id}_wrap`], false);
// Set disable state to `Protect Sheet` toolbar item from `Data` by mentioning its index.
this.enableToolbarItems('Data', [0], false);
// Adding the new `Custom Formulas` toolbar item under `Formulas` tab for adding custom formulas.
this.addToolbarItems(
'Formulas', [{ type: 'Separator' }, {
text: 'Custom Formulas', tooltipText: 'Custom Formulas',
// You can set click handler for each new custom toolbar item
click: (args) => {
// 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.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.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);
}
function 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.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.enableFileMenuItems([`${this.element.id}_New`], false, true);
}
function fileMenuItemSelect(args) {
// Custom file menu items select handler
switch (args.item.text) {
case 'Import': select(`#${this.element.id}_fileUpload`, this.element).click();
break;
case 'XLSX': this.save({ saveType: 'Xlsx' });
break;
case 'XLS': this.save({ saveType: 'Xls' });
break;
case 'CSV': this.save({ saveType: 'Csv' });
break;
}
}
</script>public IActionResult Index()
{
List<object> data = new List<object>()
{
new { CustomerName= "Romona Heaslip", Model= "Taurus", Color= "Aquamarine", PaymentMode= "Debit Card", DeliveryDate= "07/11/2015", Amount= "8529.22" },
new { CustomerName= "Clare Batterton", Model= "Sparrow", Color= "Pink", PaymentMode= "Cash On Delivery", DeliveryDate= "7/13/2016", Amount= "17866.19" },
new { CustomerName= "Eamon Traise", Model= "Grand Cherokee", Color= "Blue", PaymentMode= "Net Banking", DeliveryDate= "09/04/2015", Amount= "13853.09" },
new { CustomerName= "Julius Gorner", Model= "GTO", Color= "Aquamarine", PaymentMode= "Credit Card", DeliveryDate= "12/15/2017", Amount= "2338.74" },
new { CustomerName= "Jenna Schoolfield", Model= "LX", Color= "Yellow", PaymentMode= "Credit Card", DeliveryDate= "10/08/2014", Amount= "9578.45" },
new { CustomerName= "Marylynne Harring", Model= "Catera", Color= "Green", PaymentMode= "Cash On Delivery", DeliveryDate= "7/01/2017", Amount= "19141.62" },
new { CustomerName= "Vilhelmina Leipelt", Model= "7 Series", Color= "Goldenrod", PaymentMode= "Credit Card", DeliveryDate= "12/20/2015", Amount= "6543.30" },
new { CustomerName= "Barby Heisler", Model= "Corvette", Color= "Red", PaymentMode= "Credit Card", DeliveryDate= "11/24/2014", Amount= "13035.06" },
new { CustomerName= "Karyn Boik", Model= "Regal", Color= "Indigo", PaymentMode= "Debit Card", DeliveryDate= "05/12/2014", Amount= "18488.80" },
new { CustomerName= "Jeanette Pamplin", Model= "S4", Color= "Fuscia", PaymentMode= "Net Banking", DeliveryDate= "12/30/2014", Amount= "12317.04" },
new { CustomerName= "Cristi Espinos", Model= "TL", Color= "Aquamarine", PaymentMode= "Credit Card", DeliveryDate= "12/18/2013", Amount= "6230.13" },
new { CustomerName= "Issy Humm", Model= "Club Wagon", Color= "Pink", PaymentMode= "Cash On Delivery", DeliveryDate= "02/02/2015", Amount= "9709.49" },
new { CustomerName= "Tuesday Fautly", Model= "V8 Vantage", Color= "Crimson", PaymentMode= "Debit Card", DeliveryDate= "11/19/2014", Amount= "9766.10" },
new { CustomerName= "Rosemaria Thomann", Model= "Caravan", Color= "Violet", PaymentMode= "Net Banking", DeliveryDate= "02/08/2014", Amount= "7685.49" },
};
ViewBag.DefaultData = data;
return View();
}