React Toolbar - Specify Item Location

To set the location of items on a toolbar, use the location property. It accepts one of the following values.

  • "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).

Toolbar items with identical location preserve the order they have in the data source. For example, items produced by the code below will have the following order: "Add", "Edit", "Products", "Suppliers", "Delete", "About".

jQuery
JavaScript
HTML
$(function() {
    $("#toolbarContainer").dxToolbar({
        items: [
            { text: 'Delete', location: 'after' },
            { text: 'About', location: 'after' },
            { text: 'Products', location: 'center' },
            { text: 'Suppliers', location: 'center' },
            { text: 'Add', location: 'before' },
            { text: 'Edit', location: 'before' }
        ]
    });
});
<div id="toolbarContainer"></div>
Angular
HTML
TypeScript
<dx-toolbar>
    <dxi-item text="Delete" location="after"></dxi-item>
    <dxi-item text="About" location="after"></dxi-item>
    <dxi-item text="Products" location="center"></dxi-item>
    <dxi-item text="Suppliers" location="center"></dxi-item>
    <dxi-item text="Add" location="before"></dxi-item>
    <dxi-item text="Edit" location="before"></dxi-item>
</dx-toolbar>
import { DxToolbarModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxToolbarModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxToolbar>
        <DxItem text="Delete" location="after"/>
        <DxItem text="About" location="after"/>
        <DxItem text="Products" location="center"/>
        <DxItem text="Suppliers" location="center"/>
        <DxItem text="Add" location="before"/>
        <DxItem text="Edit" location="before"/>
    </DxToolbar>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
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.common.css';
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="after"/>
                <Item text="About" location="after"/>
                <Item text="Products" location="center"/>
                <Item text="Suppliers" location="center"/>
                <Item text="Add" location="before"/>
                <Item text="Edit" location="before"/>
            </Toolbar>
        );
    }
}

export default App;

When there is not enough width for all toolbar items, or if certain toolbar items are secondary, they can be rendered as commands on the overflow menu. This menu can be a Popover, an Action Sheet or a Drop-Down Menu, depending on which device the application is running on. To render a toolbar item as a command on the overflow menu, assign "always" or "auto" to the locateInMenu property.

jQuery
JavaScript
HTML
$(function() {
    $("#toolbarContainer").dxToolbar({
        items: [
            { text: 'Add', locateInMenu: 'auto' },
            { text: 'Change', locateInMenu: 'always' },
            { text: 'Remove', locateInMenu: 'always' }
        ]
    });
});
<div id="toolbarContainer"></div>
Angular
HTML
TypeScript
<dx-toolbar>
    <dxi-item text="Add" locateInMenu="auto"></dxi-item>
    <dxi-item text="Change" locateInMenu="always"></dxi-item>
    <dxi-item text="Remove" locateInMenu="always"></dxi-item>
</dx-toolbar>
import { DxToolbarModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxToolbarModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxToolbar>
        <DxItem text="Add" locate-in-menu="auto"/>
        <DxItem text="Change" locate-in-menu="always"/>
        <DxItem text="Remove" locate-in-menu="always"/>
    </DxToolbar>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
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.common.css';
import 'devextreme/dist/css/dx.light.css';

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

class App extends React.Component {
    render() {
        return (
            <Toolbar>
                <Item text="Add" locateInMenu="auto"/>
                <Item text="Change" locateInMenu="always"/>
                <Item text="Remove" locateInMenu="always"/>
            </Toolbar>
        );
    }
}

export default App;
See Also