JavaScript/jQuery Toolbar - Getting Started
This tutorial shows how to add a Toolbar component to your application and configure its core features.
Each section in this tutorial describes a single configuration step. You can also find the full code in the GitHub repository.
You can add items to the Toolbar in four areas: left area, central area, right area, and overflow menu. Templates help you customize items displayed in any of these sections. Refer to the following tutorial steps for details:
Central area
Create a Toolbar and its ItemsLeft and right areas
Specify Item LocationOverflow menu
Create an Overflow MenuItem customization
Customize items
Create a Toolbar and its Items
To create a Toolbar, declare the component in the markup and add at least one item.
You can use the items array or specify a dataSource to populate a Toolbar with items. A Toolbar item can display plain text (text) or a UI component (widget). If the item is a UI component, declare its options.
The following list shows all UI components that you can use in the Toolbar:
- dxButton
- dxAutocomplete
- dxCheckBox
- dxDateBox
- dxMenu
- dxSelectBox
- dxTabs
- dxTextBox
- dxButtonGroup
- dxDropDownButton
The following code creates a Toolbar and adds a dxTextBox and dxButton. The button responds to user clicks. The Toolbar displays these items in the center.
- $(function() {
- function showMessage(name) {
- DevExpress.ui.notify(
- {
- message: `${name} button has been clicked!`,
- width: 300
- },
- 'info',
- 500
- );
- };
- $("#toolbar").dxToolbar({
- items: [
- {
- widget: 'dxTextBox',
- options: {
- placeholder: 'Search...',
- showClearButton: true
- }
- },
- {
- widget: 'dxButton',
- options: {
- icon: 'search',
- onClick() {
- showMessage('Search');
- }
- }
- }
- ]
- });
- });
- <html>
- <head>
- <!-- ... -->
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
- <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx.light.css">
- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.2.3/js/dx.all.js"></script>
- <script type="text/javascript" src="index.js"></script>
- <link rel="stylesheet" type="text/css" href="index.css">
- </head>
- <body>
- <div id="toolbar"></div>
- </body>
- </html>
Specify Item Location
Specify the location property for each item. The following location values are available:
"center" (default)
Places the item in the center of the toolbar."before"
Places the item before the central element(s)."after"
Places the item after the central element(s).
The following code snippet adds a button before the central elements and a button after.
- $(function() {
- // ...
- $("#toolbar").dxToolbar({
- items: [
- // ...
- {
- location: 'before',
- widget: 'dxButton',
- options: {
- icon: 'back',
- onClick() {
- showMessage('Back');
- }
- }
- },
- {
- location: 'after',
- widget: 'dxButton',
- options: {
- icon: 'info',
- text: 'About',
- onClick() {
- showMessage('About');
- }
- }
- }
- ]
- });
- });
Customize Items
To apply the same customization to all items, use an itemTemplate. To customize an individual item, specify the template property of the item.
The following code adds a custom item after the Back button.
- $(function() {
- // ...
- $("#toolbar").dxToolbar({
- items: [
- // ...
- {
- location: 'before',
- template: '<div id="back">Go back</div>'
- },
- ]
- });
- });
- #back {
- margin-left: 5px;
- }
Create an Overflow Menu
The Toolbar can render its items in the overflow menu. Specify the locateInMenu property for an item. Use one of the following values:
"always"
Always places the item in the overflow menu. You can specify the order of items in the overflow menu."never" (default)
Places the item outside of the overflow menu."auto"
Places the item outside of the overflow menu. If all items cannot fit within the width of the Toolbar, it renders this item in the overflow menu. The Toolbar component determines the order of items in the overflow menu automatically.
If you want to customize an item in the overflow menu, specify menuItemTemplate.
locateInMenu="auto"
, define menuItemTemplate explicitly at the item level.The following code specifies locateInMenu="auto"
for the About button and creates an overflow menu with three items. It also specifies the Toolbar width.
- $(function() {
- // ...
- $("#toolbar").dxToolbar({
- width: 500,
- items: [
- // ...
- {
- location: 'after',
- widget: 'dxButton',
- locateInMenu: 'auto',
- options: {
- icon: 'info',
- text: 'About',
- onClick() {
- showMessage('About');
- }
- }
- },
- // ...
- {
- location: 'after',
- locateInMenu: 'always',
- template: '<div id="greeting">Hi <b>User</b>!</div>'
- },
- {
- location: 'after',
- widget: 'dxButton',
- locateInMenu: 'always',
- options: {
- icon: 'user',
- text: 'Profile',
- onClick() {
- showMessage('Profile');
- }
- }
- },
- {
- location: 'after',
- widget: 'dxButton',
- locateInMenu: 'always',
- options: {
- icon: 'preferences',
- text: 'Settings',
- onClick() {
- showMessage('Settings');
- }
- }
- }
- ]
- });
- });
- // ...
- #greeting {
- text-align: center;
- margin: 7px;
- }
If you have technical questions, please create a support ticket in the DevExpress Support Center.