Overview

The Toolbar is a widget containing items that usually manage screen content. Those items can be plain text or widgets.

View Demo

The following code adds a simple Toolbar to your page. Three items are plain text and one is a Button widget.

HTML
<div id="toolbarContainer"></div>
JavaScript
$(function() {
    $("#toolbarContainer").dxToolbar({
        items: [{
            widget: 'dxButton',
            options: {
                type: 'back',
                text: 'Back'
            },
            location: 'before'
        }, {
            text: 'Add',
            locateInMenu: 'always'
        }, {
            text: 'Change',
            locateInMenu: 'always'
        }, {
            text: 'Products',
            location: 'center'
        }]
    });
});

Note that all data source objects in the code above follow the Default Item Template pattern. This provides a default appearance for toolbar items, which can be customized later.

See Also