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

Ribbon Class

Contains ribbon settings.

#Declaration

TypeScript
export class Ribbon
See Also

#Properties

#activeTabIndex Property

Specifies the active tab by its index.

#Declaration

TypeScript
activeTabIndex: number

#Property Value

Type Description
number

A zero-based tab index.

#Remarks

var options = DevExpress.RichEdit.createOptions();
options.ribbon.activeTabIndex=3;

#visible Property

Sets ribbon visibility.

#Declaration

TypeScript
visible: boolean

#Property Value

Type Description
boolean

true - to display the ribbon; false - to hide the ribbon.

#Remarks

richEdit.updateRibbon(function (ribbon) {
  ribbon.visible=false;
});

#Methods

#clearTabs Method

Removes all ribbon tabs.

#Declaration

TypeScript
clearTabs(): void

#Remarks

var options = DevExpress.RichEdit.createOptions();
var homeTab = options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.Home)
options.ribbon.clearTabs();
options.ribbon.insertTab(homeTab);
});

#getTab(id) Method

Returns a ribbon tab with the specified ID.

#Declaration

TypeScript
getTab(
    id: RibbonTabId
): RibbonTab | null

#Parameters

Name Type Description
id RibbonTabId

The ribbon tab identifier.

#Returns

Type Description
RibbonTab

The tab with the specified ID. null if a tab with the specified ID is not found.

#Remarks

//move the Home tab to the third position
var options = DevExpress.RichEdit.createOptions();
var homeTab = options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.Home)
options.ribbon.insertTab(options.ribbon.removeTab(homeTab), 2)
});

#insertTab(tab) Method

Inserts a tab at the specified position.

#Declaration

TypeScript
insertTab(
    tab: RibbonTab,
    index?: number
): RibbonTab

#Parameters

Name Type Description
tab RibbonTab

A ribbon tab to insert.

index number

The zero-based index at which the specified tab should be inserted.

#Returns

Type Description
RibbonTab

The inserted tab.

#Remarks

//move the Home tab to the third position
var options = DevExpress.RichEdit.createOptions();
options.ribbon.insertTab(options.ribbon.removeTab(DevExpress.RichEdit.RibbonTabType.Home),2);

#insertTabAfter(tab, target) Method

Inserts a tab after the target tab.

#Declaration

TypeScript
insertTabAfter(
    tab: RibbonTab,
    target: RibbonTab | RibbonTabId
): RibbonTab

#Parameters

Name Type Description
tab RibbonTab

A ribbon tab to insert.

target RibbonTab | RibbonTabId

The target tab or its identifier.

#Returns

Type Description
RibbonTab

The tab that was inserted.

#Remarks

var options = DevExpress.RichEdit.createOptions();
var mailMergeTab = options.ribbon.removeTab(DevExpress.RichEdit.RibbonTabType.MailMerge);
options.ribbon.insertTabAfter(mailMergeTab, DevExpress.RichEdit.RibbonTabType.Home);

If the ribbon does not contain the target tab, the control inserts a tab at the last position.

#insertTabBefore(tab, target) Method

Inserts a tab before the target tab.

#Declaration

TypeScript
insertTabBefore(
    tab: RibbonTab,
    target: RibbonTab | RibbonTabId
): RibbonTab

#Parameters

Name Type Description
tab RibbonTab

A ribbon tab to insert.

target RibbonTab | RibbonTabId

The target tab or its identifier.

#Returns

Type Description
RibbonTab

The tab that was inserted.

#Remarks

var options = DevExpress.RichEdit.createOptions();
var mailMergeTab = options.ribbon.removeTab(DevExpress.RichEdit.RibbonTabType.MailMerge);
options.ribbon.insertTabBefore(mailMergeTab, DevExpress.RichEdit.RibbonTabType.Home);

If the ribbon does not contain the target tab, the control inserts a tab at the last position.

#removeTab(id) Method

Removes the tab with the specified ID from the ribbon.

#Declaration

TypeScript
removeTab(
    id: RibbonTabId
): RibbonTab | null

#Parameters

Name Type Description
id RibbonTabId

The ribbon tab identifier.

#Returns

Type Description
RibbonTab

The tab that was removed. null if a tab with the specified ID is not found.

#Remarks

The code sample below moves the Home tab to the first position in the ribbon.

//move the Home tab to the third position
var options = DevExpress.RichEdit.createOptions();
options.ribbon.insertTab(options.ribbon.removeTab(DevExpress.RichEdit.RibbonTabType.Home),2);

#removeTab(tab) Method

Removes the specified tab from the ribbon.

#Declaration

TypeScript
removeTab(
    tab: RibbonTab
): RibbonTab | null

#Parameters

Name Type Description
tab RibbonTab

The tab to remove.

#Returns

Type Description
RibbonTab

The tab that was removed. null if a tab with the specified ID is not found.

#Remarks

The code sample below moves the Home tab to the first position in the ribbon.

//move the Home tab to the third position
var options = DevExpress.RichEdit.createOptions();
var homeTab = options.ribbon.getTab(DevExpress.RichEdit.RibbonTabType.Home)
options.ribbon.insertTab(options.ribbon.removeTab(homeTab), 2)
});