DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy

Specify Item Type

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

jQuery
JavaScript
HTML
$(function() {
    $("#toolbarContainer").dxToolbar({
        items: [{
            text: 'Delete',
            location: 'before'
        }, {
            text: 'Products',
            location: 'center'
        }, {
            text: 'Add',
            location: 'after'
        }]
    });
});
<div id="toolbarContainer"></div>
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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxToolbar>
        <DxItem text="Delete" location="before"/>
        <DxItem text="Products" location="center"/>
        <DxItem text="Add" location="after"/>
    </DxToolbar>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxToolbar, { DxItem } from 'devextreme-vue/toolbar';

export default {
    components: {
        DxToolbar,
        DxItem
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Toolbar, Item } from 'devextreme-react/toolbar';

class App extends React.Component {
    render() {
        return (
            <Toolbar>
                <Item text="Delete" location="before"/>
                <Item text="Products" location="center"/>
                <Item text="Add" location="after"/>
            </Toolbar>
        );
    }
}

export default App;

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

jQuery
JavaScript
HTML
$(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'
        }]
    });
});
<div id="toolbarContainer"></div>
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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxToolbar>
        <DxItem
            widget="dxButton"
            :options="buttonOptions"
            location="before"
        />
        <DxItem
            widget="dxSelectBox"
            :options="selectBoxOptions"
            location="after"
        />
    </DxToolbar>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxToolbar, { DxItem } from 'devextreme-vue/toolbar';
import 'devextreme-vue/select-box';

export default {
    components: {
        DxToolbar,
        DxItem
    },
    data() {
        return {
            buttonOptions: {
                type: 'back',
                text: 'Back',
                onClick: function() {
                    // ...
                }
            },
            selectBoxOptions: {
                width: 140,
                items: ['All', 'Family', 'Favorites'],
                onItemClick: function(e) {
                    // ...
                }
            }
        }
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Toolbar, Item } from 'devextreme-react/toolbar';
import { SelectBox } from 'devextreme-react/select-box';

const buttonOptions = {
    type: 'back',
    text: 'Back',
    onClick: function() {
        // ...
    } 
}

const selectBoxOptions = {
    width: 140,
    items: ['All', 'Family', 'Favorites'],
    onItemClick: function(e) {
        // ...
    }
}

class App extends React.Component {
    render() {
        return (
            <Toolbar>
                <Item
                    widget="dxButton"
                    options={buttonOptions}
                    location="before"
                />
                <Item
                    widget="dxSelectBox"
                    options={selectBoxOptions}
                    location="after"
                />
            </Toolbar>
        );
    }
}

export default App;
See Also