aspnetcore-js-devexpress-dot-richedit-57afc4db.md
A ribbon sub-menu item.
export class RibbonSubMenuItem extends RibbonItemBase
The example below demonstrates how to add a custom drop-down menu to the Home tab:
<div id="richEditContainer"></div>
<script>
var ribbonMenu = new DevExpress.RichEdit.RibbonMenuItem;
ribbonMenu.id = "myMenu";
ribbonMenu.beginGroup = true;
ribbonMenu.icon = "favorites";
ribbonMenu.showText = true;
ribbonMenu.text = "Menu";
ribbonMenu.items = [{id: 'subItem1', icon: "user", text: "item 1"},
{id: 'subItem2', icon: "chevronright", text: "item 2", items: [
{id: 'subItem3', icon: "image", text: "item 2.1"},
{id: 'subItem4', icon: "image", text: "item 2.2"}
]}];
var options = DevExpress.RichEdit.createOptions();
options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.Home).insertItem(ribbonMenu,3);
options.events.customCommandExecuted = function(s, e) {
switch (e.commandName) {
case 'subItem1':
console.log(e.parameter)
}
};
var container = document.getElementById("richEditContainer");
const richEdit = DevExpress.RichEdit.create(container, options);
</script>
RibbonItemBase RibbonSubMenuItem
See Also
Initializes a new instance of the RibbonSubMenuItem class with specified settings.
constructor(
id: RibbonItemId,
text: string,
items?: RibbonSubMenuItem[],
options?: RibbonSubMenuItemOptions
)
| Name | Type | Description |
|---|---|---|
| id | RibbonItemId |
The item identifier.
| | text | string |
The item text.
| | items | RibbonSubMenuItem[] |
An array of sub-items.
| | options | RibbonSubMenuItemOptions |
The item options.
|
Specifies the item icon’s identifier.
icon?: string
| Type | Description |
|---|---|
| string |
An icon identifier.
|
Refer to the following help topic to view the full list of available icons and their identifiers: Built-In Icon Library.
Provides access to an array of the menu’s sub-items.
items: RibbonSubMenuItem[]
| Type | Description |
|---|---|
| RibbonSubMenuItem[] |
An array of sub-items.
|
Specifies an identifier that allows you to localize the item’s text.
localizationId?: string
| Type | Description |
|---|---|
| string |
The item’s localization identifier.
|
If the text property is specified, the item is not localized.
See Also
Angular Application - Custom Localization Strings
Specifies the item text.
text: string
| Type | Description |
|---|---|
| string |
The item text.
|
Returns the item’s type.
readonly type = RibbonItemType.SubMenu
| Type | Description |
|---|---|
| SubMenu |
Identifies the SubMenu item type.
|
Converts the sub-menu item to a button.
convertToButton(): RibbonButtonItem
| Type | Description |
|---|---|
| RibbonButtonItem |
The converted item.
|
A ribbon tab can contain items of first-level types only. Use the convertToButton method to convert the sub-menu item to a button that can be added to a ribbon tab.
richEdit.updateRibbon(function (ribbon) {
var pageLayoutTab = ribbon.getTab(DevExpress.RichEdit.RibbonTabType.PageLayout);
var subMenuItem = pageLayoutTab.getItem(DevExpress.RichEdit.PageLayoutTabItemId.InsertPageBreak);
if (subMenuItem) {
pageLayoutTab.removeItem(DevExpress.RichEdit.PageLayoutTabItemId.InsertPageBreak);
var insertTab = ribbon.getTab(DevExpress.RichEdit.RibbonTabType.Insert);
insertTab.insertItem(subMenuItem.convertToButton(), 0);
}
});