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:
<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>
#Inheritance
#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 | Ribbon |
The item identifier. |
text | string | The item text. |
items | Ribbon |
An array of sub-items. |
options | Ribbon |
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 |
---|---|
Ribbon |
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 |
---|---|
Sub |
Identifies the Sub |
#Methods
#convertToButton Method
Converts the sub-menu item to a button.
#Declaration
convertToButton(): RibbonButtonItem
#Returns
Type | Description |
---|---|
Ribbon |
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.
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);
}
});