How to Customize Ribbon in ASP.NET MVC DOCX Editor
14 Aug 202614 minutes to read
The Syncfusion DOCX Editor provides an extensive and flexible API to customize the built-in ribbon UI. You can:
- Customize the File menu.
- Add the Backstage menu instead of File menu.
- Show, hide, or add Ribbon tabs.
- Show, hide, or add groups within tabs.
- Show, hide, add, enable, or disable items within groups.
Below are detailed examples for each ribbon customization scenario.
File Menu Customization
DOCX Editor provides APIs to remove existing File menu items and add new custom items based on your requirements. You can modify the File menu using the fileMenuItems property.
In the example below, the “Open” and “Export” items have been removed from the File menu items, and new custom items have been added.
@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").EnableToolbar(true).FileMenuItems(new object[] {
"New",
"Print",
new { text = "Export", id = "custom_item", iconCss = "e-icons e-export" }
}).FileMenuItemClick("onFileMenuItemClick").Render()
<script>
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
function onFileMenuItemClick(args) {
if (args.item.id) {
document.getElementById('container').ej2_instances[0].documentEditor.save('Sample', 'Docx');
}
}
</script>Backstage Menu Customization
The DOCX Editor provides a backStageMenu API to add a backstage menu. When the backstage menu is enabled, the default File menu items are automatically hidden.
The following code example shows how to add the backstage menu items.
@Html.EJS().DocumentEditorContainer("container").ToolbarMode("Ribbon").EnableToolbar(true).BackstageMenu(new {
text = "File",
backButton = new { text = "close" },
items = new object[] {
new { id = "new", text = "New", iconCss = "e-icons e-de-ctnr-new" }
}
}).Render()
<script>
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
</script>Refer to this documentation to know more about backstage items.
Tab Customization
You can customize the ribbon tabs in the DOCX Editor by showing, hiding, or adding tabs according to your application’s requirements.
Show/Hide Tab
DOCX Editor provides the showTab API to show and hide the existing tab using existing RibbonTabType and tabId.
The following code example shows how to show or hide an existing tab using the tab type and tab id.
// To hide the Home tab using the built-in `RibbonTabType`
container.ribbon.showTab('Home', false);
// To hide a tab by its tab id (for example, a custom tab)
container.ribbon.showTab('custom_tab', false);Add Tab
The DOCX Editor provides the addTab API, which allows you to insert a new custom tab either between existing tabs or at the end of the ribbon tabs.
<script>
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
// For initialization before adding ribbon tab
setTimeout(function () {
var container = document.getElementById('container').ej2_instances[0];
// To add the tab at end of tab
var ribbonTab = {
header: 'Custom Tab',
id: 'custom_tab',
groups: [{
header: 'Custom Group',
collections: [{
items: [{
type: 'Button',
buttonSettings: {
content: 'New',
iconCss: 'e-icons e-de-ctnr-new',
clicked: function () {
container.documentEditor.openBlank();
}
}
}]
}]
}]
};
container.ribbon.addTab(ribbonTab);
// To add the tab before the Insert tab(exising tab)
container.ribbon.addTab(ribbonTab, 'Insert');
}, 100);
</script>Group Customization
You can also customize ribbon groups within a tab to better organize commands or add new functionalities as per your needs.
Show/Hide Group
DOCX Editor provides a showGroup API to show or hide existing groups within a ribbon tab.
The following code example shows how to show or hide the group using the group Id or RibbonGroupInfo.
// To hide the clipboard group using group index
container.ribbon.showGroup({tabId: 'Home', index: 1} , false);
// To show the clipboard group using group index
container.ribbon.showGroup({tabId: 'Home', index: 1} , true);
// To hide the group using id
container.ribbon.showGroup('custom_group', false);Add Group
To extend the ribbon’s functionality, you can add custom groups to any tab. This allows you to organize related commands together within a tab.
<script>
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
// For initialization before adding ribbon tab
setTimeout(function () {
var container = document.getElementById('container').ej2_instances[0];
// Add the new group at the end of the Home tab
var ribbonGroup = {
header: 'Custom Group',
collections: [{
items: [{
type: 'Button',
buttonSettings: {
content: 'New',
iconCss: 'e-icons e-de-ctnr-new',
clicked: function () {
container.documentEditor.openBlank();
}
}
}]
}]
};
container.ribbon.addGroup('Home', ribbonGroup);
// Add the new group at the specified index of the Home tab (before the Clipboard group)
container.ribbon.addGroup('Home', ribbonGroup, 1);
}, 100);
</script>Item Customization
You can customize individual items within ribbon groups. This includes showing, hiding, enabling, disabling, or adding new items to any group within a ribbon tab.
Show/Hide Item
Using the showItems API in the DOCX Editor ribbon, you can show or hide an existing item. Here, you can specify the item Id or RibbonItemInfo.
The following code example shows how to show or hide the item using the item Id or RibbonItemInfo.
// To hide the Bold and Italic items using ribbon item information
container.ribbon.showItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [5, 6] } , false);
// To show the Bold and Italic items using ribbon item information
container.ribbon.showItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [5, 6] } , true);
// To hide the item using item id
container.ribbon.showItems('custom_item', false);Enable/Disable Item
Using the enableItems API in the DOCX Editor ribbon, you can enable or disable an existing item.
// To disable the underline using ribbon item info
container.ribbon.enableItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [7] },false);
// To enable the underline using ribbon item info
container.ribbon.enableItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [7] },true);
// To disable the item using id
container.ribbon.enableItems('custom_item', false);Add Item
You can use the addItem API in the DOCX Editor ribbon to add a new item. Additionally, you can specify the target tab and group where the new item should be placed.
<script>
ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar, ej.documenteditor.Ribbon);
// For initialization before adding ribbon tab
setTimeout(function () {
var container = document.getElementById('container').ej2_instances[0];
// To add the item at the end of the specified group (the item will be added at the end of the Undo group)
var ribbonItem = {
type: 'Button',
buttonSettings: {
content: 'New',
iconCss: 'e-icons e-de-ctnr-new',
clicked: function () {
container.documentEditor.openBlank();
}
}
};
container.ribbon.addItem({ tabId: 'Home', index: 0 }, ribbonItem);
// To add the item before the specified item index (the item will be added before the Redo item in the Undo group)
container.ribbon.addItem({ tabId: 'Home', index: 0 }, ribbonItem, 1);
}, 100);
</script>Online Demo
Explore how to customize the ribbon in the ASP.NET MVC DOCX Editor for working with Word documents in this live demo here.