Vue Popup - 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.vue
  • <template>
  • <DxPopup ... >
  • <p>Popup content</p>
  • <DxToolbarItem
  • text="Title"
  • location="before">
  • </DxToolbarItem>
  • <DxToolbarItem
  • widget="dxButton"
  • :options="buttonOptions"
  • location="after">
  • </DxToolbarItem>
  • </DxPopup>
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxPopup, { DxToolbarItem } from 'devextreme-vue/popup';
  •  
  • export default {
  • components: {
  • DxPopup
  • },
  • data() {
  • return {
  • buttonOptions: {
  • text: 'Refresh',
  • onClick: function(e) { /* ... */ }
  • }
  • }
  • }
  • }
  • </script>

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