UI Widgets Toolbar

A toolbar widget.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js

The dxToolbar widget displays a set of widgets usually used to manage screen content.

This widget, like any other DevExtreme UI widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxToolbar widget using the Knockout approach.

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: 'before', widget: 'button', options: { type: 'back', text: 'Back', click: showText }},
    { location: 'after', 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: before, after, 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.

To learn more about the fields used in the default item template, refer to the Default Item Template reference section of the widget.

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

See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
  • The dxToolbar widget is related to the Collection Containers category. So read an overview of the features that are common for collection container widgets in the Common Tasks topic of the Collection Containers article.
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: 'before', widget: 'button', options: { type: 'back', text: 'Back', clickAction: showText }},
  {
      location: 'after', 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 members used to manipulate the widget.

Events

This section describes events fired by this component.

Default Item Template

This section lists the data source fields that are used in a default template for toolbar items.

By default, a predefined item template is applied to display items of DevExtreme collection widgets. This template is based on certain fields of the data source provided for a widget. Below is the list of the fields that take part in a default item template for the dxToolbar widget. If the default item template is not appropriate for your task, implement a custom item template based on these or other fields of your data source. For details refer to the Customize Widget Item Appearance topic.