JavaScript/jQuery Toolbar - Overview

The Toolbar is a UI component containing items that usually manage screen content. Those items can be plain text or UI components.

View Demo

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

JavaScript
HTML
  • $(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'
  • }]
  • });
  • });
  • <div id="toolbarContainer"></div>

Note that field names in these data source items are conventional. This provides a default tile appearance, which can be customized later.

See Also