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);
See Also

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.

See Also

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

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.