DevExtreme jQuery - Specify Item Location
To set the location of items on a toolbar, use the location option. 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
$(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
<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
<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
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 option.
jQuery
$(function() {
$("#toolbarContainer").dxToolbar({
items: [
{ text: 'Add', locateInMenu: 'auto' },
{ text: 'Change', locateInMenu: 'always' },
{ text: 'Remove', locateInMenu: 'always' }
]
});
});<div id="toolbarContainer"></div>
Angular
<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
<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
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;