Search results

Item

An item object that is used to configure Toolbar commands.

Properties

align

string

Specifies the location for aligning Toolbar items on the Toolbar. Each command will be aligned according to the align property. Possible values are:

  • Left: To align commands to the left side of the Toolbar.
  • Center: To align commands at the center of the Toolbar.
  • Right: To align commands to the right side of the Toolbar.

    <div id="element"> </div>
    let toolbar: Toolbar = new Toolbar({
    items: [
        { text: "Home" },
        { text: "My Home Page" , align: 'Center' },
        { text: "Search", align: 'Right' }
        { text: "Settings", align: 'Right' }
    ]
    });
    toolbar.appendTo('#element');

Defaults to “Left”

cssClass

string

Defines single/multiple classes (separated by space) to be used for customization of commands.

Defaults to ""

htmlAttributes

Object

Defines htmlAttributes used to add custom attributes to Toolbar command. Supports HTML attributes such as style, class, etc.

Defaults to ‘null’

id

string

Specifies the unique ID to be used with button or input element of Toolbar items.

Defaults to ""

overflow

string

Specifies the Toolbar command display area when an element’s content is too large to fit available space. This is applicable only to popup mode. Possible values are:

  • Show: Always shows the item as the primary priority on the Toolbar.
  • Hide: Always shows the item as the secondary priority on the popup.
  • None: No priority for display, and as per normal order moves to popup when content exceeds.

Defaults to ‘None’

prefixIcon

string

Defines single/multiple classes separated by space used to specify an icon for the button. The icon will be positioned before the text content if text is available, otherwise the icon alone will be rendered.

Defaults to ""

showAlwaysInPopup

boolean

Defines the priority of items to display it in popup always. It allows to maintain toolbar item on popup always but it does not work for toolbar priority items.

Defaults to false

showTextOn

string

Specifies where the button text will be displayed on popup mode of the Toolbar. Possible values are:

  • Toolbar: Text will be displayed on Toolbar only.
  • Overflow: Text will be displayed only when content overflows to popup.
  • Both: Text will be displayed on popup and Toolbar.

Defaults to ‘Both’

suffixIcon

string

Defines single/multiple classes separated by space used to specify an icon for the button. The icon will be positioned after the text content if text is available.

Defaults to ""

template

string | Object

Specifies the HTML element/element ID as a string that can be added as a Toolbar command.

E.g - items: [{ template: '<input placeholder="Search"/>' },{ template: '#checkbox1' }]

Defaults to ""

text

string

Specifies the text to be displayed on the Toolbar button.

Defaults to ""

tooltipText

string

Specifies the text to be displayed on the Toolbar button.

Defaults to ""

type

string

Specifies the types of command to be rendered in the Toolbar. Supported types are:

  • Button: Creates the Button control with its given properties like text, prefixIcon, etc.
  • Separator: Adds a horizontal line that separates the Toolbar commands.
  • Input: Creates an input element that is applicable to template rendering with Syncfusion controls like DropDownList, AutoComplete, etc.

Defaults to ‘Button’

width

number | string

Specifies the width of the Toolbar button commands.

Defaults to ‘auto’

Events

click

EmitType<ClickEventArgs>

Event triggers when click the toolbar item.