JavaScript/jQuery Toolbar - Customize Item Appearance

For a minor customization of Toolbar items, you can define specific fields in item data objects. For example, the following code generates four toolbar items: the first is a UI component, the second is hidden, the third is disabled, the fourth is relocated.

HTML
TypeScript
  • <dx-toolbar>
  • <dxi-item
  • widget="dxButton"
  • location="before"
  • [options]="buttonOptions">
  • </dxi-item>
  • <dxi-item
  • text="Change"
  • locateInMenu="always"
  • [visible]="false">
  • </dxi-item>
  • <dxi-item
  • text="Remove"
  • locateInMenu="always"
  • [disabled]="true">
  • </dxi-item>
  • <dxi-item
  • text="Products"
  • location="center">
  • </dxi-item>
  • </dx-toolbar>
  • import { DxToolbarModule, DxButtonModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • buttonOptions = {
  • type: 'back',
  • text: 'Back'
  • };
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxToolbarModule,
  • DxButtonModule
  • ],
  • // ...
  • })

If you need a more flexible solution, define an itemTemplate and menuItemTemplate to customize toolbar items and commands in the overflow menu, respectively.

HTML
TypeScript
  • <dx-toolbar
  • [items]="toolbarItems"
  • itemTemplate="itemTemplate"
  • menuItemTemplate="menuItemTemplate">
  • <div *dxTemplate="let item of 'itemTemplate'">
  • <b style="color: green;">{{item.text}}</b>
  • </div>
  • <div *dxTemplate="let menuItem of 'menuItemTemplate'">
  • <b style="font-style: italic;">{{menuItem.text}}</b>
  • </div>
  • </dx-toolbar>
  • import { DxToolbarModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • toolbarItems = [{
  • text: 'Back',
  • location: 'before'
  • }, {
  • text: 'Change',
  • locateInMenu: 'always'
  • }, {
  • text: 'Remove',
  • locateInMenu: 'always'
  • }, {
  • text: 'Products',
  • location: 'center'
  • }];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxToolbarModule
  • ],
  • // ...
  • })
See Also