RibbonTab Class

A ribbon tab.

Declaration

export class RibbonTab

Remarks

var options = DevExpress.RichEdit.createOptions();
var homeTab = options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.Home);
var ribbonItemUndo = homeTab.getItem(DevExpress.RichEdit.HomeTabItemId.Undo);
var ribbonItemRedo = homeTab.getItem(DevExpress.RichEdit.HomeTabItemId.Redo);
var ribbonTab = new DevExpress.RichEdit.RibbonTab;
ribbonTab.id = "myHistoryTab";
ribbonTab.title = "History";
ribbonTab.items =[ribbonItemUndo, ribbonItemRedo];
options.ribbon.clearTabs();
options.ribbon.insertTab(ribbonTab);

constructor(title, id)

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

Declaration

constructor(
    title: string,
    id: RibbonTabId,
    items?: FirstLevelRibbonItem[],
    localizationId?: string
)

Parameters

Name	Type	Description
title	string	The tab title.
id	RibbonTabId	The tab identifier.
items	FirstLevelRibbonItem[]	An array of items.
localizationId	string	The tab’s localization identifier.

Properties

contextTab Property

Identifies whether the tab is a context tab.

Declaration

readonly contextTab: boolean

Property Value

Type	Description
boolean	true - if the current tab is a context tab; otherwise, false.

id Property

Specifies the ribbon tab identifier.

Declaration

id: RibbonTabId

Property Value

Type	Description
RibbonTabId	The tab identifier.

items Property

Provides access to the tab’s item collection.

Declaration

items: FirstLevelRibbonItem[]

Property Value

Type	Description
FirstLevelRibbonItem[]	An array of items.

localizationId Property

Specifies an identifier that allows you to localize the tab’s title.

Declaration

localizationId?: string

Property Value

Type	Description
string	The tab’s localization identifier.

Remarks

If the title property is specified, the tab is not localized.

title Property

Specifies the tab title.

Declaration

title: string

Property Value

Type	Description
string	The tab title.

Methods

forEachItem(callback) Method

Performs the specified action on each item in the tab.

Declaration

forEachItem(
    callback: (item: RibbonItem,
    index: number,
    parent: RibbonItemParent) => void,
    recursive?: boolean
): void

Parameters

Name	Type	Description
callback	(item: RibbonItem, index: number, parent: RibbonItemParent) => void	The action to perform on each item of the collection.
recursive	boolean	true - to iterate through items recursively; otherwise, false.

getItem(id) Method

Returns a ribbon item with the specified ID.

Declaration

getItem(
    id: RibbonItemId
): RibbonItem | null

Parameters

Name	Type	Description
id	RibbonItemId	The ribbon item identifier.

Returns

Type	Description
RibbonItem	The item with the specified ID.
null	An item with the specified ID is not found.

Remarks

//move the Undo and Redo commands
var options = DevExpress.RichEdit.createOptions();
var homeTab = options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.Home);
var ribbonItemUndo = homeTab.getItem(DevExpress.RichEdit.HomeTabItemId.Undo);
var ribbonItemRedo = homeTab.getItem(DevExpress.RichEdit.HomeTabItemId.Redo);
ribbonItemUndo.beginGroup = true;
homeTab.removeItem(ribbonItemUndo);
homeTab.removeItem(ribbonItemRedo);
homeTab.insertItem(ribbonItemUndo,3);
homeTab.insertItem(ribbonItemRedo,4);

insertItem(item) Method

Inserts an item at the specified position.

Declaration

insertItem(
    item: RibbonItem,
    index?: number
): FirstLevelRibbonItem

Parameters

Name	Type	Description
item	RibbonItem	A ribbon item to insert.
index	number	The zero-based index at which the specified item should be inserted.

Returns

Type	Description
FirstLevelRibbonItem	The item that was inserted.

Remarks

var ribbonButton = new DevExpress.RichEdit.RibbonButtonItem("sendEmail", "Send Email",
  {icon: "email", showText: true, beginGroup: true});

var options = DevExpress.RichEdit.createOptions();
options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.Home).insertItem(ribbonButton,2);
options.events.customCommandExecuted.addHandler(function(s, e) {
  switch (e.commandName) {
    case 'sendEmail':
      var text = s.document.getText();
      var mailto_link = 'mailto:bob@example.com?subject=Test&body=' + encodeURIComponent(text);
      window = window.open(mailto_link, 'emailWindow');
      if(window && window.open && !window.closed)
        window.close();
      break;
  }
});

insertItemAfter(item, target) Method

Inserts an item after the target item.

Declaration

insertItemAfter(
    item: RibbonItem,
    target: RibbonItem | RibbonItemId | CommandId
): RibbonItem

Parameters

Name	Type	Description
item	RibbonItem	A ribbon item to insert.
target	RibbonItem \| RibbonItemId \| CommandId	The target item or its identifier.

Returns

Type	Description
RibbonItem	The item that was inserted.

Remarks

var ribbonButton = new DevExpress.RichEdit.RibbonButtonItem("sendEmail", "Send Email",
  {icon: "email", showText: true, beginGroup: true});

var options = DevExpress.RichEdit.createOptions();
var homeTab = options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.Home);
homeTab.insertItemAfter(ribbonButton, DevExpress.RichEdit.HomeTabItemId.Paste);
options.events.customCommandExecuted.addHandler(function(s, e) {
  switch (e.commandName) {
    case 'sendEmail':
      var text = s.document.getText();
      var mailto_link = 'mailto:bob@example.com?subject=Test&body=' + encodeURIComponent(text);
      window = window.open(mailto_link, 'emailWindow');
      if(window && window.open && !window.closed)
        window.close();
      break;
  }
});

If the tab does not contain the target item, the control inserts an item at the last position.

insertItemBefore(item, target) Method

Inserts an item before the target item.

Declaration

insertItemBefore(
    item: RibbonItem,
    target: RibbonItem | RibbonItemId | CommandId
): RibbonItem

Parameters

Name	Type	Description
item	RibbonItem	A ribbon item to insert.
target	RibbonItem \| RibbonItemId \| CommandId	The target item or its identifier.

Returns

Type	Description
RibbonItem	The item that was inserted.

Remarks

var ribbonButton = new DevExpress.RichEdit.RibbonButtonItem("sendEmail", "Send Email",
  {icon: "email", showText: true, beginGroup: true});

var options = DevExpress.RichEdit.createOptions();
var homeTab = options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.Home);
homeTab.insertItemBefore(ribbonButton, DevExpress.RichEdit.HomeTabItemId.Cut);
options.events.customCommandExecuted.addHandler(function(s, e) {
  switch (e.commandName) {
    case 'sendEmail':
      var text = s.document.getText();
      var mailto_link = 'mailto:bob@example.com?subject=Test&body=' + encodeURIComponent(text);
      window = window.open(mailto_link, 'emailWindow');
      if(window && window.open && !window.closed)
        window.close();
      break;
  }
});

If the tab does not contain the target item, the control inserts an item at the last position.

removeItem(id) Method

Removes the item with the specified ID from the tab.

Declaration

removeItem(
    id: RibbonItemId
): void

Parameters

Name	Type	Description
id	RibbonItemId	The ribbon item identifier.

Remarks

var options = DevExpress.RichEdit.createOptions();
options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.Home).removeItem(
    DevExpress.RichEdit.HomeTabItemId.IncreaseFontSize);
});

removeItem(item) Method

Removes the specified item from the tab.

Declaration

removeItem(
    item: RibbonItem
): void

Parameters

Name	Type	Description
item	RibbonItem	The item to remove.