ToolbarComponent
23 Sep 20255 minutes to read
Represents the Angular Toolbar Component.
<ejs-toolbar></ejs-toolbar>Properties
allowKeyboard boolean
When this property is set to true, it allows the keyboard interaction in toolbar.
Defaults to true
cssClass string
Sets the CSS classes to root element of the Tab that helps to customize component styles.
Defaults to ’’
enableCollision boolean
Enable or disable the popup collision.
Defaults to true
enableHtmlSanitizer boolean
Defines whether to allow the cross-scripting site or not.
Defaults to true
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
height string|number
Specifies the height of the Toolbar in pixels/number/percentage. Number value is considered as pixels.
Defaults to ‘auto’
items ItemModel[]
An array of items that is used to configure Toolbar commands.
Defaults to []
locale string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ’’
overflowMode OverflowMode
Specifies the Toolbar display mode when Toolbar content exceeds the viewing area.
The possible values for this property as follows
- Scrollable: All the elements are displayed in a single line with horizontal scrolling enabled.
- Popup: Prioritized elements are displayed on the Toolbar and the rest of elements are moved to the popup.
- MultiRow: Displays the overflow toolbar items as an in-line of a toolbar.
- Extended: Hide the overflowing toolbar items in the next row. Show the overflowing toolbar items when you click the expand icons.
If the popup content overflows the height of the page, the rest of the elements will be hidden.
Defaults to ‘Scrollable’
scrollStep number
Specifies the scrolling distance in scroller.
<ejs-toolbar #tabObj scrollStep='200'></ejs-toolbar>Defaults to null
width string|number
Specifies the width of the Toolbar in pixels/numbers/percentage. Number value is considered as pixels.
Defaults to ‘auto’
Methods
addItems
Adds new items to the Toolbar that accepts an array as Toolbar items.
| Parameter | Type | Description |
|---|---|---|
| items | ItemModel[] |
DOM element or an array of items to be added to the Toolbar. |
| index (optional) | number |
Number value that determines where the command is to be added. By default, index is 0. |
Returns void
destroy
Removes the control from the DOM and also removes all its related events.
Returns void
disable
Specifies the value to disable/enable the Toolbar component.
When set to true, the component will be disabled.
| Parameter | Type | Description |
|---|---|---|
| value | boolean |
Based on this Boolean value, Toolbar will be enabled (false) or disabled (true). |
Returns void
enableItems
Enables or disables the specified Toolbar item.
| Parameter | Type | Description |
|---|---|---|
| items |
number | HTMLElement | NodeList
|
DOM element or an array of items to be enabled or disabled. |
| isEnable (optional) | boolean |
Boolean value that determines whether the command should be enabled or disabled. By default, isEnable is set to true. |
Returns void
hideItem
Shows or hides the Toolbar item that is in the specified index.
| Parameter | Type | Description |
|---|---|---|
| index |
number | HTMLElement | Element
|
Index value of target item or DOM element of items to be hidden or shown. |
| value (optional) | boolean |
Based on this Boolean value, item will be hide (true) or show (false). By default, value is false. |
Returns void
refreshOverflow
Refresh the whole Toolbar component without re-rendering.
- It is used to manually refresh the Toolbar overflow modes such as scrollable, popup, multi row, and extended.
- It will refresh the Toolbar component after loading items dynamically.
Returns void
removeItems
Removes the items from the Toolbar. Acceptable arguments are index of item/HTMLElement/node list.
| Parameter | Type | Description |
|---|---|---|
| args |
number | HTMLElement | NodeList | Element | HTMLElement[]
|
Index or DOM element or an Array of item which is to be removed from the Toolbar. |
Returns void
Events
beforeCreate EmitType<BeforeCreateArgs>
The event will be fired before the control is rendered on a page.
clicked EmitType<ClickEventArgs>
The event will be fired on clicking the Toolbar elements.
created EmitType<Event>
The event will be fired when the control is rendered.
destroyed EmitType<Event>
The event will be fired when the control gets destroyed.
keyDown EmitType<KeyDownEventArgs>
The event will be fired when the keyboard interaction occurs on the Toolbar.