UI Widgets Toolbar

A toolbar widget.

Type: Object

The dxToolbar widget displays a set of widgets usually used to manage screen content. To create a dxToolbar widget, add a div element with dxToolbar Knockout binding within the body of the required view.

HTML
<div data-bind="dxToolbar:{dataSource: toolbarItems}"></div>

The toolbar items are loaded from an array specified by the dataSource configuration option. You can specify an array of objects as a toolbar data source.

JavaScript
toolbarItems = [
    { location: 'left', widget: 'button', options: { type: 'back', text: 'Back', click: showText }},
    { location: 'right', widget: 'button', options: { icon: 'find' }},
    { location: 'menu', text: 'Add' },
    { location: 'center', text: 'Products' }
];

To display toolbar items, a default template is applied based on the following fields of the data source item objects.

  • disabled
  • visible
  • html
  • text
  • widget
  • options
  • location

The toolbar can contain plain text items and items representing a widget. To create a toolbar item representing a widget, add an item containing the widget field to the array of toolbar items. You can assign one of the following values to this field:

To configure the widget representing a toolbar item, use the options field of the data source item object. Set the options that are exposed by the specified widget.

To set a location of toolbar items, use the location option of the data source item object. You can assign one of the following values: left, right, center or menu. When menu is set, the toolbar item is added to the toolbar's overflow menu. This menu is displayed by the dxDropDownMenu, dxPopover, dxActionSheet or application bar widget based on the device on which the application is running. You can introduce a custom template for menu items using the menuItemTemplate or menuItemRender option.

You can introduce a custom template for toolbar items. To learn how to do this, refer to the Customize Widget Item Appearance topic.

Refer to the Add a widget documentation section to learn how to create widgets in detail.

Show Example:
jQuery
<div data-bind="dxToolbar: { dataSource: toolbarItems }"></div>
showText = function(e) {
    DevExpress.ui.notify( "Back button clicked", "success", 5000 );
};
menuItemClicked = function (e) {
    DevExpress.ui.notify(e.itemData + " item clicked", "success", 2000);
};
toolbarItems = [
  { location: 'left', widget: 'button', options: { type: 'back', text: 'Back', clickAction: showText }},
  {
      location: 'right', widget: 'dropDownMenu', options: {
          items: ["Add", "Change", "Remove"],
          itemClickAction: menuItemClicked
      }
  },
  { location: 'center', text: 'Products' }
];

Configuration

An object defining configuration options for the dxToolbar widget.

Methods

This section describes methods that can be used to manipulate a widget.

Events

This section describes events fired by this component.