JavaScript
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Toolbar

The Toolbar control contains a group of commands that are aligned horizontally.

<div id="toolbar"/>
<script>
  var toolbarObj = new Toolbar();
  toolbarObj.appendTo("#toolbar");
</script>

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.

    <div id="Toolbar"> </div>
import { Toolbar } from '@syncfusion/ej2-navigations';
let toolbarObj: Toolbar = new Toolbar({
     items: [
        {
            prefixIcon: 'e-cut-icon', tooltipText: 'Cut'
        },
        {
            prefixIcon: 'e-copy-icon', tooltipText: 'Copy'
        },
        {
            prefixIcon: 'e-paste-icon', tooltipText: 'Paste'
        }],
        scrollStep:100
});
toolbarObj.appendTo('#ej2Toolbar');

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

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

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

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

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

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

Returns void

destroy

Removes the control from the DOM and also removes all its related events.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

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

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence 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

refresh

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

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

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

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

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

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.

Previous
Next