Vue Gantt - toolbar

Configures toolbar settings.

Selector: DxToolbar
Default Value: null

items[]

Configures toolbar items' settings.

Selector: DxItem
Accepted Values: 'separator' | 'undo' | 'redo' | 'expandAll' | 'collapseAll' | 'addTask' | 'deleteTask' | 'zoomIn' | 'zoomOut'

The Gantt UI component allows you to add default and create custom toolbar items.

App.vue
  • <template>
  • <DxGantt>
  • <DxToolbar>
  • <DxItem name="undo"/>
  • <DxItem name="redo"/>
  • <DxItem name="separator"/>
  • <DxItem
  • :options="aboutButtonOptions"
  • widget="dxButton"
  • />
  • </DxToolbar>
  • </DxGantt>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  • import 'devexpress-gantt/dist/dx-gantt.css';
  •  
  • import {
  • DxGantt, DxToolbar, DxItem
  • // ...
  • } from 'devextreme-vue/gantt';
  •  
  • export default {
  • components: {
  • DxGantt, DxToolbar, DxItem
  • }
  • data() {
  • return {
  • aboutButtonOptions: {
  • text: 'About',
  • icon: 'info',
  • stylingMode: 'text',
  • onClick: () => {
  • // ...
  • }
  • }
  • };
  • }
  • };
  • </script>