RibbonTab Class

A ribbon tab.

Declaration

export class RibbonTab

Remarks

javascript

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

get 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 if an item with the specified ID is not found.

Remarks

javascript

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

javascript

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:[email protected]?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.

The target item or its identifier.

Returns

Type	Description
RibbonItem

The item that was inserted.

Remarks

javascript

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:[email protected]?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.

The target item or its identifier.

Returns

Type	Description
RibbonItem

The item that was inserted.

Remarks

javascript

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:[email protected]?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

javascript

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.