JavaScript/jQuery Popup - Specify Toolbar Items

The JavaScript Popup has two toolbars: top and bottom. Items on these toolbars can be plain text or UI components. To configure the items, populate the toolbarItems array with objects. Each object configures an individual toolbar item. For example, the following code adds two toolbar items to the JavaScript Popup: one is plain text, another is the JavaScript Button UI component. They both occupy the top toolbar, because their toolbar property assumes its default value.

jQuery
HTML
JavaScript
<div id="popupContainer">
    <p>JavaScript Popup content</p>
</div>
$(function() {
    $("#popupContainer").dxPopup({
        title: "JavaScript Popup Title",
        visible: true,
        toolbarItems: [{
            text: "Title",
            location: "before"
        }, {
            widget: "dxButton",
            location: "after",
            options: { 
                text: "Refresh", 
                onClick: function() {
                    // ...
                }
            }
        }]
    });
});
Angular
HTML
TypeScript
<dx-popup
    title="JavaScript Popup Title"
    [(visible)]="isPopupVisible">
    <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 { DxPopupModule, DxButtonModule } from "devextreme-angular";
// ...
export class AppComponent {
    isPopupVisible: boolean = true;
    refresh () {
        // ...
    }
}
@NgModule({
    imports: [
        // ...
        DxPopupModule,
        DxButtonModule
    ],
    // ...
})
Vue
<template>
    <DxPopup
        :visible="isPopupVisible"
        title="JavaScript Popup Title">
        <template>
            <p>JavaScript Popup content</p>
        </template>
        <DxToolbarItem
            text="Title"
            location="before"
        />
        <DxToolbarItem
            :options="buttonOptions"
            widget="dxButton"
            location="after"
        />
    </DxPopup>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import {
    DxPopup,
    DxToolbarItem
} from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup,
        DxToolbarItem
    },
    data() {
        return {
            isPopupVisible: true,
            buttonOptions: {
                text: 'Refresh',
                onClick: function() {
                    // ...
                }
            }
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

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

const buttonOptions = {
    text: 'Refresh',
    onClick: function() {
        // ...
    }
};

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isPopupVisible: true
        };

        this.onHiding = this.onHiding.bind(this);
    }

    onHiding() {
        this.setState({
            isPopupVisible: false
        });
    }

    render() {
        return (
            <JavaScript Popup
                visible={this.state.isPopupVisible}
                title="JavaScript Popup Title"
                onHiding={this.onHiding}>
                <ToolbarItem
                    text="Title"
                    location="before"
                />
                <ToolbarItem
                    options={buttonOptions}
                    widget="dxButton"
                    location="after"
                />
            </Popup>
        );
    }
}

export default App;
See Also