Overview
The Toolbar contains items that manage the page content. In this demo, the Toolbar manages the List.
Configure Toolbar Items
You can display Toolbar items from an items array or a dataSource. A Toolbar item may be plain text or a UI component. You should specify the text or the widget property depending on the item. If the item is a UI component, declare its options.
Specify Item Location
You can set the dataSource with location fields or specify the location property for each item. The location value can be one of the following:
-
"center"
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).
Additionally, the Toolbar can render its items in the overflow menu. Specify the locateInMenu property for each item with one of the following values:
-
"always"
Always places the item in the overflow menu. -
"never"
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.
Note that you cannot specify the order of the items with locateinMenu="auto" placed in the overflow menu.
Customize Item Appearance
You can define the itemTemplate to customize item appearance. To customize the items in the overflow menu, use the menuItemTemplate.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
<dx-toolbar>
<dxi-item location="before" widget="dxButton" [options]="backButtonOptions">
</dxi-item>
<dxi-item
location="before"
widget="dxButton"
locateInMenu="auto"
[options]="refreshButtonOptions"
>
</dxi-item>
<dxi-item location="center" widget="dxButton" locateInMenu="never">
<div *dxTemplate>
<div class="toolbar-label"><b>Tom's Club</b> Products</div>
</div>
</dxi-item>
<dxi-item
location="after"
widget="dxSelectBox"
locateInMenu="auto"
[options]="selectBoxOptions"
>
</dxi-item>
<dxi-item
location="after"
widget="dxButton"
locateInMenu="auto"
[options]="addButtonOptions"
>
</dxi-item>
<dxi-item
widget="dxButton"
locateInMenu="always"
[options]="saveButtonOptions"
>
</dxi-item>
<dxi-item
widget="dxButton"
locateInMenu="always"
[options]="printButtonOptions"
>
</dxi-item>
<dxi-item
widget="dxButton"
locateInMenu="always"
[options]="settingsButtonOptions"
>
</dxi-item>
</dx-toolbar>
<dx-list id="products" [dataSource]="productsStore"> </dx-list>
import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {
DxListModule, DxToolbarModule, DxSelectBoxModule, DxTemplateModule,
} from 'devextreme-angular';
import DataSource from 'devextreme/data/data_source';
import notify from 'devextreme/ui/notify';
import { ProductType, Service } from './app.service';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
providers: [Service],
})
export class AppComponent {
items: any[];
productTypes: ProductType[];
productsStore: any;
backButtonOptions: any;
refreshButtonOptions: any;
selectBoxOptions: any;
addButtonOptions: any;
saveButtonOptions: any;
printButtonOptions: any;
settingsButtonOptions: any;
constructor(service: Service) {
this.productTypes = service.getProductTypes();
this.productsStore = new DataSource(service.getProducts());
this.backButtonOptions = {
icon: 'back',
onClick: () => {
notify('Back button has been clicked!');
},
};
this.refreshButtonOptions = {
icon: 'refresh',
onClick: () => {
notify('Refresh button has been clicked!');
},
};
this.selectBoxOptions = {
width: 140,
items: this.productTypes,
valueExpr: 'id',
displayExpr: 'text',
value: this.productTypes[0].id,
inputAttr: { 'aria-label': 'Categories' },
onValueChanged: (args) => {
if (args.value > 1) {
this.productsStore.filter('type', '=', args.value);
} else {
this.productsStore.filter(null);
}
this.productsStore.load();
},
};
this.addButtonOptions = {
icon: 'plus',
onClick: () => {
notify('Add button has been clicked!');
},
};
this.saveButtonOptions = {
text: 'Save',
onClick: () => {
notify('Save option has been clicked!');
},
};
this.printButtonOptions = {
text: 'Print',
onClick: () => {
notify('Print option has been clicked!');
},
};
this.settingsButtonOptions = {
text: 'Settings',
onClick: () => {
notify('Settings option has been clicked!');
},
};
}
}
@NgModule({
imports: [
BrowserModule,
BrowserTransferStateModule,
DxListModule,
DxToolbarModule,
DxSelectBoxModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
::ng-deep .toolbar-label,
::ng-deep .toolbar-label > b {
font-size: 16px;
}
::ng-deep #products {
margin-top: 10px;
}
import { Injectable } from '@angular/core';
export class ProductType {
id: number;
text: string;
}
export class Product {
text: string;
type: number;
}
const productTypes: ProductType[] = [{
id: 1,
text: 'All',
}, {
id: 2,
text: 'Video Players',
}, {
id: 3,
text: 'Televisions',
}, {
id: 4,
text: 'Monitors',
}, {
id: 5,
text: 'Projectors',
}];
const products: Product[] = [{
text: 'HD Video Player',
type: 2,
}, {
text: 'SuperHD Video Player',
type: 2,
}, {
text: 'SuperLCD 42',
type: 3,
}, {
text: 'SuperLED 42',
type: 3,
}, {
text: 'SuperLED 50',
type: 3,
}, {
text: 'SuperLCD 55',
type: 3,
}, {
text: 'DesktopLCD 19',
type: 4,
}, {
text: 'DesktopLCD 21',
type: 4,
}, {
text: 'DesktopLED 21',
type: 4,
}, {
text: 'Projector Plus',
type: 5,
}, {
text: 'Projector PlusHD',
type: 5,
}];
@Injectable()
export class Service {
getProductTypes(): ProductType[] {
return productTypes;
}
getProducts(): Product[] {
return products;
}
}
// In real applications, you should not transpile code in the browser.
// You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
},
meta: {
'typescript': {
'exports': 'ts',
},
'devextreme/localization.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'@angular/core': 'npm:@angular/core@12.2.17',
'@angular/platform-browser': 'npm:@angular/platform-browser@12.2.17',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@12.2.17',
'@angular/forms': 'npm:@angular/forms@12.2.17',
'@angular/common': 'npm:@angular/common@12.2.17',
'@angular/compiler': 'npm:@angular/compiler@12.2.17',
'tslib': 'npm:tslib@2.3.1/tslib.js',
'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js',
'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.1.5/cjs',
'devextreme/bundles/dx.all': 'npm:devextreme@23.1.5/bundles/dx.all.js',
'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.2/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.1',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.48',
'devextreme-angular': 'npm:devextreme-angular@23.1.5',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts',
},
'devextreme': {
defaultExtension: 'js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
'rxjs': {
defaultExtension: 'js',
},
'rxjs/operators': {
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.11/inferno/package.json',
'npm:@angular/*/package.json',
'npm:@angular/common@12.2.17/*/package.json',
'npm:rxjs@7.5.3/package.json',
'npm:rxjs@7.5.3/operators/package.json',
'npm:devextreme-angular@23.1.5/*/package.json',
'npm:devextreme-angular@23.1.5/ui/*/package.json',
'npm:devextreme-angular@23.1.5/package.json',
'npm:devexpress-diagram@2.2.1/package.json',
'npm:devexpress-gantt@4.1.48/package.json',
],
};
System.config(window.config);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.12.0/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.13/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import("app").catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>