Back to Devexpress

Ribbon Class

aspnetcore-js-devexpress-dot-richedit-edb874be.md

latest6.8 KB
Original Source

Ribbon Class

Contains ribbon settings.

Declaration

ts
export class Ribbon

See Also

Ribbon Customization

Properties

activeTabIndex Property

Specifies the active tab by its index.

Declaration

ts
activeTabIndex: number

Property Value

TypeDescription
number

A zero-based tab index.

|

Remarks

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

visible Property

Sets ribbon visibility.

Declaration

ts
visible: boolean

Property Value

TypeDescription
boolean

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

|

Remarks

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

Methods

clearTabs Method

Removes all ribbon tabs.

Declaration

ts
clearTabs(): void

Remarks

javascript
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

ts
getTab(
    id: RibbonTabId
): RibbonTab | null

Parameters

NameTypeDescription
idRibbonTabId

The ribbon tab identifier.

|

Returns

TypeDescription
RibbonTab

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

|

Remarks

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

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

Parameters

NameTypeDescription
tabRibbonTab

A ribbon tab to insert.

| | index | number |

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

|

Returns

TypeDescription
RibbonTab

The inserted tab.

|

Remarks

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

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

Parameters

NameTypeDescription
tabRibbonTab

A ribbon tab to insert.

| | target | RibbonTab | RibbonTabId |

The target tab or its identifier.

|

Returns

TypeDescription
RibbonTab

The tab that was inserted.

|

Remarks

javascript
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

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

Parameters

NameTypeDescription
tabRibbonTab

A ribbon tab to insert.

| | target | RibbonTab | RibbonTabId |

The target tab or its identifier.

|

Returns

TypeDescription
RibbonTab

The tab that was inserted.

|

Remarks

javascript
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

ts
removeTab(
    id: RibbonTabId
): RibbonTab | null

Parameters

NameTypeDescription
idRibbonTabId

The ribbon tab identifier.

|

Returns

TypeDescription
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.

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

ts
removeTab(
    tab: RibbonTab
): RibbonTab | null

Parameters

NameTypeDescription
tabRibbonTab

The tab to remove.

|

Returns

TypeDescription
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.

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