ToolbarModel

23 Sep 20252 minutes to read

Interface for a class Toolbar

Properties

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.

allowKeyboard boolean

When this property is set to true, it allows the keyboard interaction in toolbar.

cssClass string

Sets the CSS classes to root element of the Tab that helps to customize component styles.

enableCollision boolean

Enable or disable the popup collision.

enableHtmlSanitizer boolean

Defines whether to allow the cross-scripting site or not.

enablePersistence boolean

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

enableRtl boolean

Enable or disable rendering component in right to left direction.

height string|number

Specifies the height of the Toolbar in pixels/number/percentage. Number value is considered as pixels.

items ItemModel[]

An array of items that is used to configure Toolbar commands.

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

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.

scrollStep number

Specifies the scrolling distance in scroller.

<ejs-toolbar #tabObj scrollStep='200'></ejs-toolbar>

width string|number

Specifies the width of the Toolbar in pixels/numbers/percentage. Number value is considered as pixels.