JavaScript/jQuery Gantt - toolbar

Configures toolbar settings.

Default Value: null

items[]

Configures toolbar items' settings.

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

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  • import 'devexpress-gantt/dist/dx-gantt.css';
  •  
  • import Gantt, {
  • // ...
  • } from 'devextreme-react/gantt';
  •  
  • const App = () => {
  • const aboutButtonOptions = {
  • text: 'About',
  • icon: 'info',
  • stylingMode: 'text',
  • onClick: 'onItemClick'
  • };
  •  
  • const onItemClick = (e) => {
  • // ...
  • };
  •  
  • return (
  • <Gantt>
  • <Toolbar>
  • <Item name="undo" />
  • <Item name="redo" />
  • <Item name="separator" />
  • <Item widget="dxButton" options={this.aboutButtonOptions} />
  • </Toolbar>
  • {/* ... */}
  • </Gantt>
  • );
  • };
  •  
  • export default App;