Free Trial Buy

Specify Item Type

A Toolbar item may be plain text or a widget. Text items should have the text field specified.

jQuery
JavaScript
$(function() {
    $("#toolbarContainer").dxToolbar({
        items: [{
            text: 'Delete',
            location: 'before'
        }, {
            text: 'Products',
            location: 'center'
        }, {
            text: 'Add',
            location: 'after'
        }]
    });
});
Angular
HTML
TypeScript
<dx-toolbar>
    <dxi-item text="Delete" location="before"></dxi-item>
    <dxi-item text="Products" location="center"></dxi-item>
    <dxi-item text="Add" location="after"></dxi-item>
</dx-toolbar>
import { DxToolbarModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxToolbarModule
    ],
    // ...
})

Items that contain a widget should have the widget field specified. In addition, you need to declare the options object that will configure the widget. For a full list of fields this object has, refer to the API reference of the widget.

jQuery
JavaScript
$(function() {
    $("#toolbarContainer").dxToolbar({
        items: [{
            widget: 'dxButton',
            options: {
                type: 'back',
                text: 'Back',
                onClick: function () {
                    // ...
                }
            },
            location: 'before'
        }, {
            widget: 'dxSelectBox',
            options: {
                width: 140,
                items: ['All', 'Family', 'Favorites'],
                onItemClick: function (e) {
                    // ...
                }
            },
            location: 'after'
        },
        // ...  
        ]
    });
});
Angular
HTML
TypeScript
<dx-toolbar>
    <dxi-item
        widget="dxButton"
        [options]="buttonOptions"
        location="before">
    </dxi-item>
    <dxi-item
        widget="dxSelectBox"
        [options]="selectBoxOptions"
        location="after">
    </dxi-item>
</dx-toolbar>
import { DxToolbarModule, DxButtonModule, DxSelectBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    buttonOptions = {
        type: 'back',
        text: 'Back',
        onClick: function () {
            // ...
        }
    };
    selectBoxOptions = {
        width: 140,
        items: ['All', 'Family', 'Favorites'],
        onItemClick: function (e) {
            // ...
        }
    };
}
@NgModule({
    imports: [
        // ...
        DxToolbarModule,
        DxButtonModule,
        DxSelectBoxModule
    ],
    // ...
})
See Also