React Popover - toolbarItems

Configures toolbar items.

Type:

Array<Object>

In the following code, two items are defined on the toolbar: one is plain text, another is the Button widget:

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { Popover, ToolbarItem } from 'devextreme-react/popover';
  •  
  • class App extends React.Component {
  • constructor() {
  • this.buttonOptions = {
  • text: 'Refresh',
  • onClick: function(e) { /* ... */ }
  • };
  • }
  • render() {
  • return (
  • <Popover ... >
  • <p>Popover Content</p>
  • <ToolbarItem
  • text="Title"
  • location="before">
  • </ToolbarItem>
  • <ToolbarItem
  • widget="dxButton"
  • location="after"
  • options={this.buttonOptions}>
  • </ToolbarItem>
  • </Popover>
  • );
  • }
  • }
  • export default App;

component

An alias for the template option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

disabled

Specifies whether a toolbar item should be disabled.

Type:

Boolean

Default Value: false

html

Specifies html code inserted into the toolbar item element.

Type:

String

location

Specifies a location for the item on the toolbar.

Type:

String

Default Value: 'center'
Accepted Values: 'after' | 'before' | 'center'

Use the ToolbarItemLocation enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Before, After, and Center.

options

Specifies a configuration object for the widget that presents a toolbar item.

Type:

Object

When using ASP.NET MVC 5 Controls or DevExtreme-Based ASP.NET Core Controls, configure the widget with a lambda expression as follows:

Razor C#
Razor VB
  • // Instead of Popup here you can use Popover
  • @(Html.DevExtreme().Popup()
  • .ToolbarItems(items => {
  • items.Add().Widget(w => w
  • // Instead of Button here can be any other widget
  • .Button()
  • .Text("Back")
  • );
  • })
  • )
  • ' Instead of Popup here you can use Popover
  • @(Html.DevExtreme().Popup() _
  • .ToolbarItems(Sub(items)
  • items.Add().Widget(Function(w)
  • ' Instead of Button here can be any other widget
  • Return w.Button().Text("Back")
  • End Function)
  • End Sub)
  • )

render

An alias for the template option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

template

Specifies an item template that should be used to render this item only.

Type:

template

Template Data: undefined

Whether you use a default or a custom template for widget items, you can specify a specific template for a particular item. To do so, set the template field for the data source object of this item. The following types of the specified value are available.

  • Assign a jQuery object of the template's container.
  • Assign a DOM Node of the template's container.
  • Assign a function that returns the jQuery object or a DOM Node of the template's container.
NOTE
The dxTemplate component can not be used as a toolbarItems template.

text

Specifies text displayed for the toolbar item.

Type:

String

toolbar

Specifies whether the item is displayed on a top or bottom toolbar.

Type:

String

Default Value: 'top'
Accepted Values: 'bottom' | 'top'

Use the Toolbar enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Top and Bottom.

visible

Specifies whether or not a widget item must be displayed.

Type:

Boolean

Default Value: true

widget

A widget that presents a toolbar item.

Type:

String

Accepted Values: 'dxAutocomplete' | 'dxButton' | 'dxCheckBox' | 'dxDateBox' | 'dxMenu' | 'dxSelectBox' | 'dxTabs' | 'dxTextBox' | 'dxButtonGroup' | 'dxDropDownButton'

NOTE
Import the specified widget's module when using DevExtreme modules.

When using ASP.NET MVC 5 Controls or DevExtreme-Based ASP.NET Core Controls, configure the widget with a lambda expression as follows:

Razor C#
Razor VB
  • // Instead of Popup here you can use Popover
  • @(Html.DevExtreme().Popup()
  • .ToolbarItems(items => {
  • items.Add().Widget(w => w
  • // Instead of Button here can be any other widget
  • .Button()
  • .Text("Back")
  • );
  • })
  • )
  • ' Instead of Popup here you can use Popover
  • @(Html.DevExtreme().Popup() _
  • .ToolbarItems(Sub(items)
  • items.Add().Widget(Function(w)
  • ' Instead of Button here can be any other widget
  • Return w.Button().Text("Back")
  • End Function)
  • End Sub)
  • )