RibbonSubMenuItem Class

A ribbon sub-menu item.

Declaration

export class RibbonSubMenuItem extends RibbonItemBase

Remarks

The example below demonstrates how to add a custom drop-down menu to the Home tab:

Razor C#

<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>

Inherited Members

beginGroup

id

Inheritance

RibbonItemBase

RibbonSubMenuItem

constructor(id, text)

Initializes a new instance of the RibbonSubMenuItem class with specified settings.

Declaration

constructor(
    id: RibbonItemId,
    text: string,
    items?: RibbonSubMenuItem[],
    options?: RibbonSubMenuItemOptions
)

Parameters

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.

Properties

icon Property

Specifies the item icon’s identifier.

Declaration

icon?: string

Property Value

Type	Description
string	An icon identifier.

Remarks

Refer to the following help topic to view the full list of available icons and their identifiers: Built-In Icon Library.

items Property

Provides access to an array of the menu’s sub-items.

Declaration

items: RibbonSubMenuItem[]

Property Value

Type	Description
RibbonSubMenuItem[]	An array of sub-items.

localizationId Property

Specifies an identifier that allows you to localize the item’s text.

Declaration

localizationId?: string

Property Value

Type	Description
string	The item’s localization identifier.

Remarks

If the text property is specified, the item is not localized.

text Property

Specifies the item text.

Declaration

text: string

Property Value

Type	Description
string	The item text.

type Property

Returns the item’s type.

Declaration

readonly type = RibbonItemType.SubMenu

Property Value

Type	Description
SubMenu	Identifies the SubMenu item type.

Methods

convertToButton Method

Converts the sub-menu item to a button.

Declaration

convertToButton(): RibbonButtonItem

Returns

Type	Description
RibbonButtonItem	The converted item.

Remarks

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.

JS

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);
    }
});