Configuration buttons[]

Specifies items displayed on the top or bottom toolbar of the popup window.

Type: Array

Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div class="button" dx-button="{ text:'Show popup', onClick:showPopup }"></div>
    <div dx-popup="{ 
        buttons: buttonItems,
        showCloseButton: false,
        fullScreen: true,
        bindingOptions: {
            visible:'popupVisible'
        }
    }">
        <div data-options="dxTemplate:{ name: 'content' }">
            <div class="button" dx-button="{
                text: 'Hide popup',
                onClick: hidePopup
            }"></div>
            <p>The popup content.</p>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.buttonItems = [
        { toolbar: 'top', location: 'before', widget: 'button', options: { type: 'back', text: 'Back' } },
        { toolbar: 'top', location: 'center', text: 'Products' },
        { toolbar: 'top', location: 'menu', text: 'Add' },
        { toolbar: 'top', location: 'menu', text: 'Remove' },
        { toolbar: 'top', location: 'menu', text: 'Clear' },
        { toolbar: 'bottom', location: 'before', widget: 'button', options: { text: 'Load' } },
        { toolbar: 'bottom', location: 'before', widget: 'button', options: { text: 'Save' } }
    ];
    $scope.popupVisible = false;
    $scope.showPopup = function () {
        $scope.popupVisible = true;
    };
    $scope.hidePopup = function () {
        $scope.popupVisible = false;
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}
<div class="button" data-bind="dxButton:{ text:'Show popup', onClick:showPopup }"></div>
<div data-bind="dxPopup:{
    visible:popupVisible,
    buttons: buttonItems,
    showCloseButton: false,
    fullScreen: true
}">
    <div data-options="dxTemplate:{ name: 'content'}">
        <div class="button" data-bind="dxButton: { text: 'Hide popup', onClick: hidePopup }"></div>
        <p>The popup content.</p>
    </div>
</div>
var myViewModel = {
    buttonItems: [
        { toolbar: 'top', location: 'before', widget: 'button', options: { type: 'back', text: 'Back' } },
        { toolbar: 'top', location: 'center', text: 'Products' },
        { toolbar: 'top', location: 'menu', text: 'Add' },
        { toolbar: 'top', location: 'menu', text: 'Remove' },
        { toolbar: 'top', location: 'menu', text: 'Clear' },
        { toolbar: 'bottom', location: 'before', widget: 'button', options: { text: 'Load' } },
        { toolbar: 'bottom', location: 'before', widget: 'button', options: { text: 'Save' } }
    ],
    popupVisible: ko.observable(false),
    showPopup: function () {
        this.popupVisible(true);
    },
    hidePopup: function () {
        this.popupVisible(false);
    }
}
ko.applyBindings(myViewModel);
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}
<div class="button" id="showButton"></div>
<div id="myPopup"></div>
$("#myPopup").dxPopup({
    fullScreen: true,
    buttons: [
        { toolbar: 'top', location: 'before', widget: 'button', options: { type: 'back', text: 'Back' } },
        { toolbar: 'top', location: 'center', text: 'Products' },
        { toolbar: 'top', location: 'menu', text: 'Add' },
        { toolbar: 'top', location: 'menu', text: 'Remove' },
        { toolbar: 'top', location: 'menu', text: 'Clear' },
        { toolbar: 'bottom', location: 'before', widget: 'button', options: { text: 'Load' } },
        { toolbar: 'bottom', location: 'before', widget: 'button', options: { text: 'Save' } }
    ],
    contentTemplate: function (contentElement) {
        var hideButton = $("<div class='button' id='hideButton'>").dxButton({
            text: "Hide popup",
            onClick: function () {
                $("#myPopup").dxPopup("instance").hide();
            }
        });
        contentElement.append(hideButton);
        contentElement.append("<p>The popup content.</p>");
    }
});
$("#showButton").dxButton({
    text: 'Show popup',
    onClick: function () {
        $("#myPopup").dxPopup("instance").show();
    }
});
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}

disabled

Specifies whether or not a toolbar item must be displayed 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: 'before' | 'after' | 'center'

options

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

Type: Object

template

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

Type: String| function |DOM Node|jQuery

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 string containing the name of the required template.
  • 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.
See Also

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
Accepted Values: 'bottom' | 'top'

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: 'button' | 'tabs' | 'dropDownMenu'