DevExtreme jQuery/JS - 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
JavaScript
  • <div id="toolbarContainer"></div>
  • $(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