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" style="height: 100%;">
    <div dx-button="{ onClick: togglePopover, text: 'Choose item' }"></div>
    <div dx-popover="{
        width: 250,
        height: 'auto',
        target: '.dx-button',
        buttons: buttonItems,
        bindingOptions: {
            visible: 'visible'
        }
    }">
        <div data-options="dxTemplate: { name: 'content' }">
            <div dx-list="{ dataSource: items, onItemClick: togglePopover }"></div>
        </div>
    </div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.visible = false;
    $scope.items = ["item1", "item2", "item3"];
    $scope.showTitleValue = false;
    $scope.togglePopover = function () {
        $scope.visible = !$scope.visible;
    };
    $scope.buttonItems = [
        { toolbar: 'top', location: 'before', widget: 'button', options: { type: 'back', text: 'Back' } },
        { toolbar: 'top', location: 'center', text: 'Items' },
        { 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' } }
    ];
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body{
    text-align: center;
}
<div data-bind="dxButton:{
    onClick: togglePopover,
    text: 'Choose item'
}"></div>
<div data-bind="dxPopover: {
    width: 250,
    height: 'auto',
    visible: visible,
    target: '.dx-button',
    buttons: buttonItems
}">
    <div data-options="dxTemplate: {name: 'content'}">
        <div data-bind="dxList:{
            dataSource: items,
            onItemClick: togglePopover
        }"></div>
    </div>
</div>
var myViewModel = {
    visible: ko.observable(false),
    items: ["item1", "item2", "item3"],
    showTitleValue: ko.observable(false),
    togglePopover: function () {
        this.visible(!this.visible());
    },
    buttonItems: [
        { toolbar: 'top', location: 'before', widget: 'button', options: { type: 'back', text: 'Back' } },
        { toolbar: 'top', location: 'center', text: 'Items' },
        { 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' } }
    ]
}
ko.applyBindings(myViewModel);
body{
    text-align: center;
}
<div id="toggleButton"></div>
<div id="myPopover"></div>
$(function () {
    $("#myPopover").dxPopover({
        width: 250,
        height: 'auto',
        target: '#toggleButton',
        buttons: [
            { toolbar: 'top', location: 'before', widget: 'button', options: { type: 'back', text: 'Back' } },
            { toolbar: 'top', location: 'center', text: 'Items' },
            { 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 list = $("<div>");
            contentElement.append(list);
            list.dxList({
                dataSource: ["item1", "item2", "item3"],
                onItemClick: function () {
                    $("#myPopover").dxPopover("instance").hide();
                }
            })
        }
    });
    $("#toggleButton").dxButton({
        text: 'Choose item',
        onClick: function () {
            $("#myPopover").dxPopover("instance").show();
        }
    });
});
body{
    text-align: center;
}

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'