Search results

Ribbon

The Ribbon Component is a structured layout to manage tools with tabs and groups.

Properties

activeLayout

RibbonLayout | string

Specifies the active layout of the ribbon. Accepts one of the below values.

  • Classic – Renders the ribbon tab contents in classic layout.
  • Simplified – Renders the ribbon tab contents in single row.

Defaults to RibbonLayout.Classic

cssClass

string

Defines one or more CSS classes to customize the appearance of ribbon.

Defaults to

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

fileMenu

FileMenuSettingsModel

Defines the properties of ribbon file menu.

Defaults to {}

helpPaneTemplate

string | HTMLElement

Specifies the template content for the help pane of ribbon. The help pane appears on the right side of the ribbon header row.

Defaults to

isMinimized

boolean

Specifies whether the ribbon is minimized or not. When minimized, only the tab header is shown.

Defaults to false

launcherIconCss

string

Defines the icon CSS for the launcher icon button in group header.

Defaults to

locale

string

Provides the localization value for the controls present in ribbon items.

Defaults to ‘en-us’

ribbonButtonModule

RibbonButton

The ribbonButtonModule is used to create and manipulate buttons in ribbon item.

ribbonCheckBoxModule

RibbonCheckBox

The ribbonCheckBoxModule is used to create and manipulate checkbox in ribbon item.

ribbonColorPickerModule

RibbonColorPicker

The ribbonColorPickerModule is used to create and manipulate color picker in ribbon item.

ribbonComboBoxModule

RibbonComboBox

The ribbonComboBoxModule is used to create and manipulate combobox in ribbon item.

ribbonDropDownModule

RibbonDropDown

The ribbonDropDownModule is used to create and manipulate dropdown buttons in ribbon item.

ribbonFileMenuModule

RibbonFileMenu

The ribbonFileMenuModule is used to create and manipulate the ribbon file menu.

ribbonSplitButtonModule

RibbonSplitButton

The ribbonSplitButtonModule is used to create and manipulate split buttons in ribbon item.

selectedTab

number

Specifies the index of the current active tab.

Defaults to 0

tabAnimation

TabAnimationSettingsModel

Specifies the animation configuration settings for showing the content of the Ribbon Tab.

Defaults to { previous: { effect: ‘SlideLeftIn’, duration: 600, easing: ‘ease’ },next: { effect: ‘SlideRightIn’, duration: 600, easing: ‘ease’ } }

tabs

RibbonTabModel[]

Defines the list of ribbon tabs.

Defaults to []

width

string | number

Specifies the width of the ribbon.

Defaults to ‘100%’

Methods

addCollection

adds the ribbon collection.

Parameter Type Description
groupId string Gets the ribbon group ID.
collection RibbonCollectionModel Gets the ribbon collection model.
targetId (optional) string Gets the ID of the target collection to add the new collection.
isAfter (optional) boolean Defines whether the collection is added before or after the target.

Returns void

addEventListener

Adds the handler to the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

addGroup

Adds the ribbon group.

Parameter Type Description
tabId string Gets the tab ID.
group RibbonGroupModel Gets the ribbon group model.
targetId (optional) string Gets the ID of the target group to add the new group.
isAfter (optional) boolean Defines whether the group is added before or after the target.

Returns void

addItem

Adds ribbon item.

Parameter Type Description
collectionId string Gets the collection ID.
item RibbonItemModel Gets the ribbon item model.
targetId (optional) string Gets the ID of the target item to add the new item.
isAfter (optional) boolean Defines whether the item is added before or after the target.

Returns void

addTab

Adds the ribbon tab.

Parameter Type Description
tab RibbonTabModel Gets the ribbon tab model
targetId (optional) string Gets the ID of the target tab to add the new tab.
isAfter (optional) boolean Defines whether the tab is added before or after the target.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

disableItem

Disables ribbon item.

Parameter Type Description
itemId string Gets the item ID.

Returns void

enableItem

Enables ribbon item.

Parameter Type Description
itemId string Gets the item ID.

Returns void

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

refresh

Applies all the pending property changes and render the component again.

Returns void

refreshLayout

Refreshes the layout.

Returns void

removeCollection

Removes the ribbon collection.

Parameter Type Description
collectionId string Gets the collection ID.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

removeGroup

Removes the ribbon group.

Parameter Type Description
groupId string -Gets the group ID.

Returns void

removeItem

Removes ribbon item.

Parameter Type Description
itemId string Gets the item ID.

Returns void

removeTab

Removes the ribbon tab.

Parameter Type Description
tabId string Gets the tab ID

Returns void

selectTab

Selects the tab

Parameter Type Description
tabId string Gets the tab ID

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

Returns void

Events

launcherIconClick

EmitType<LauncherClickEventArgs>

Event triggers when the launcher icon of the group is clicked.

ribbonCollapsing

EmitType<ExpandCollapseEventArgs>

Event triggers before collapsing the ribbon.

ribbonExpanding

EmitType<ExpandCollapseEventArgs>

Event triggers before expanding the ribbon.

tabSelected

EmitType<TabSelectedEventArgs>

Event triggers after selecting the tab item.

tabSelecting

EmitType<TabSelectingEventArgs>

Event triggers before selecting the tab item.