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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.