React Popup - toolbarItems

Configures toolbar items.

Type:

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

jQuery

index.js

index.html

$(function() {
    $("#popupContainer").dxPopup({
        // ...
        toolbarItems: [{
            text: "Title",
            location: "before"
        }, {
            widget: "dxButton",
            location: "after",
            options: { 
                text: "Refresh", 
                onClick: function(e) { /* ... */ }
            }
        }]
    });
});

<div id="popupContainer">
    <p>Popup content</p>
</div>

Angular

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 { }

ASP.NET MVC Controls

Index.cshtml

@(Html.DevExtreme().Popup()
    <!-- ... -->
    .ContentTemplate(@<text>
        <p>Popup content</p>
    </text>)
    .ToolbarItems(ti => {
        ti.Add()
            .Text("Title")
            .Location(ToolbarItemLocation.Before);
        ti.Add()
            .Widget(w => w.Button()
                .Text("Refresh")
                .OnClick("refresh"))
            .Location(ToolbarItemLocation.After);
    }
)

<script type="text/javascript">
    function refresh() { /* ... */ }
</script>

Vue

DxComponent.vue

App.vue

<template> 
    <dx-popup ... >
        <p>Popup content</p>
        <dx-toolbar-item 
            text="Title" 
            location="before">
        </dx-toolbar-item>
        <dx-toolbar-item 
            widget="dxButton" 
            :options="buttonOptions" 
            location="after">
        </dx-toolbar-item>
    <dx-popup>
</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>

<template> 
    <dx-component />
</template>

<script>
import DxComponent from './components/DxComponent';

export default {
    components: {
        DxComponent
    }
}
</script>

React

DxComponent.js

App.js

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Popup, ToolbarItem } from 'devextreme-react/popup';

class DxComponent extends React.Component {
    constructor() {
        this.buttonOptions = {
            text: 'Refresh',
            onClick: function(e) { /* ... */ }
        };
    }
    render() {
        return (
            <Popup ... >
                <p>Popup Content</p>
                <ToolbarItem 
                    text="Title" 
                    location="before">
                </ToolbarItem>
                <ToolbarItem 
                    widget="dxButton" 
                    location="after" 
                    options={this.buttonOptions}>
                </ToolbarItem>
            </Popup>
        );
    }
}
export default DxComponent;

import React, { Component } from 'react';
import './App.css';

import DxComponent from './DxComponent';

class App extends Component {
    render() {
        return (
            <div>
                <DxComponent />
            </div>
        );
    }
}

export default App;

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

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