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.component.html
app.component.ts
app.module.ts
  • <dx-popup ... >
  • <div *dxTemplate="let data of 'content'">
  • <p>Popup content</p>
  • </div>
  • <dxi-toolbar-item
  • text="Title"
  • location="before">
  • </dxi-toolbar-item>
  • <dxi-toolbar-item
  • widget="dxButton"
  • location="after"
  • [options]="{
  • text: 'Refresh',
  • onClick: refresh
  • }">
  • </dxi-toolbar-item>
  • </dx-popup>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • refresh () { /* ... */ }
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxPopupModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxPopupModule
  • ],
  • providers: [],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }

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 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 Controls, configure the widget with a lambda expression in the following manner.

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

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 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'

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

When using ASP.NET MVC Controls, configure the widget with a lambda expression in the following manner.

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