Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

RibbonTab Class

A ribbon tab.

#Declaration

TypeScript
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

TypeScript
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

TypeScript
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

TypeScript

#Property Value

Type Description
RibbonTabId

The tab identifier.

#items Property

Provides access to the tab’s item collection.

#Declaration

TypeScript

#Property Value

Type Description
FirstLevelRibbonItem[]

An array of items.

#localizationId Property

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

#Declaration

TypeScript
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

TypeScript
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

TypeScript
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

TypeScript
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

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

TypeScript
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

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

#Parameters

Name Type Description
item RibbonItem

A ribbon item to insert.

target CommandId | RibbonItemId | RibbonItem

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

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

#Parameters

Name Type Description
item RibbonItem

A ribbon item to insert.

target CommandId | RibbonItemId | RibbonItem

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

TypeScript
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

TypeScript
removeItem(
    item: RibbonItem
): void

#Parameters

Name Type Description
item RibbonItem

The item to remove.