Search results

ToolbarComponent

Represents the Essential JS 2 Angular Toolbar Component.

<ejs-toolbar></ejs-toolbar>

Properties

enablePersistence

boolean

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

Defaults to false

enableRtl

boolean

Specifies the direction of the Toolbar commands. For cultures like Arabic, Hebrew, etc. direction can be switched to right to left.

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 undefined

overflowMode

string

Specifies the Toolbar display mode when Toolbar content exceeds the viewing area. Possible modes are:

  • 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’

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 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 Index value of target item.
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.