Ribbon Class

Contains ribbon settings.

Declaration

export class Ribbon

Properties

activeTabIndex Property

Specifies the active tab by its index.

Declaration

activeTabIndex: number

Property Value

Type	Description
number	A zero-based tab index.

Remarks

JS

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

visible Property

Sets ribbon visibility.

Declaration

visible: boolean

Property Value

Type	Description
boolean	true - to display the ribbon; false - to hide the ribbon.

Remarks

JS

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

Methods

clearTabs Method

Removes all ribbon tabs.

Declaration

clearTabs(): void

Remarks

JS

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

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

JS

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

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

JS

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

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

JS

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

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

JS

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

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.

JS

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

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.

JS

//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)
});