A toolbar widget.

Type: Object

The dxToolbar widget displays a set of widgets usually used to manage screen content. 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.

var toolbarItems = [
    { align: 'left', widget: 'button', options: { type: 'back', text: 'Back', click: showText }},
    { align: 'right', widget: 'button', options: { icon: 'plus' }},
    { align: 'right', widget: 'button', options: { icon: 'find' }},
    { align: 'center', text: 'Products' }

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 or toolbar items. You can assign one of the following values to this field:

The options field specifies configuration options of the appropriate widget. The align field specifies which toolbar part the item should be aligned by. The available values of the align field are "left", "right" and "center".

To create a dxToolbar widget, add a div element with dxToolbar Knockout binding within the body of the required view.

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

See the Customize Widget Item Appearance topic to learn how to adjust the appearance of widget items.

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

Show Example:


An object defining configuration options for the dxToolbar widget.


This section describes members used to manipulate the object.