Popover Configuration

An object defining configuration options for the dxPopover widget.

animation

An object defining animation options of the widget.

Type: animation configuration

The option takes on the following object by default.

JavaScript
animationOptions = { 
    show: { 
        type: "fade", 
        to: 1 
    }, 
    hide: { 
        type: "fade", 
        to: 0 
    } 
}
Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show popup', clickAction: showPopup }"></div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div style="width: 70%" class="dx-field-label">Animation Type</div>
    <div style="width: 30%" class="dx-field-value" data-bind="dxLookup: {
      dataSource: animationTypes,
      value: animationType,
      valueChangeAction: typeChanged
    }"></div>
  </div>
</div>
<div id="myPopup" data-bind="dxPopover: { title: 'My dxPopover', visible: popupVisible, animation: animationConfig, target: '.button' }">
      <p>The popup text.</p>
      <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup }"></div>
</div>
animationTypes = [
  "fade",
  "pop",
  "slide"
];
popupVisible = ko.observable(false);
animationType = ko.observable(animationTypes[0]);
animationConfig = ko.observable({});
typeChanged = function () {
  switch (animationType()) {
    case "slide":
      animationConfig({
        show: { type: "slide", from: { opacity: 1, top: -$(window).height() }, to: { top: 0 } },
        hide: { type: "slide", from: { top: 0 }, to: { top: -$(window).height() } }
      });
      break;
    case "pop":
      animationConfig({
        show: { type: "pop", from: { opacity: 1, scale: 0 }, to: { scale: 1 } },
        hide: { type: "pop", from: { scale: 1 }, to: { scale: 0 } }
      });
      break;
    case "fade":
      animationConfig({
        show: { type: "fade", from: 0, to: 1 },
        hide: { type: "fade", from: 1, to: 0 }
      });
      break;
    default:
      animationConfig({});
  }
}
showPopup = function () {
    popupVisible(true);
};
hidePopup = function () {
  popupVisible(false);
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}

clickAction

An action performed when a widget is clicked.

Type: Action
Default Value: null

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show popup', clickAction: showPopup }"></div>
<div data-bind="dxPopover: { visible: popupVisible, fullScreen: true, clickAction: processClick, target: '.button' }">
    <div data-options="dxTemplate:{name: 'content'}">
        <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup }"></div>
        <p>The popup contents.</p>
    </div>
</div>
popupVisible = ko.observable(false);
showPopup = function () {
  popupVisible(true);
};
hidePopup = function () {
  popupVisible(false);
};
processClick = function () {
  DevExpress.ui.notify("The widget has been clicked", "info", 1000);
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}

contentReadyAction

An action performed when widget content is ready.

Type: Action
Default Value: null

deferRendering

Specifies whether widget content is rendered when the widget is shown or when rendering the widget.

Type: Boolean
Default Value: true

If this option is set to true, widget content is rendered when showing the widget. Otherwise, widget content is rendered when rendering the widget.

disabled

A Boolean value specifying whether or not the widget can respond to user interaction.

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the widget at runtime.

height

Specifies the height of the widget.

Type: Number|String|function
Return Value: Number|String
The widget height.
Default Value: "auto"

The option can hold a value of the following types.

  • numeric - the height of the widget in pixels
  • string - a CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit")
  • function - a function returning the widget height (e.g., height:function(){ return baseHeight - 10 + "%"; })

hiddenAction

An action performed after the widget is hidden.

Type: Action
Default Value: null

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show popup', clickAction: showPopup }"></div>
<div data-bind="dxPopover: { visible: popupVisible, hiddenAction: processHiding, target: '.button' }">
    <div data-options="dxTemplate:{ name: 'content' }">
        <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup }"></div>
        <p>The popup contents.</p>
    </div>
</div>
popupVisible = ko.observable(false);
showPopup = function () {
    popupVisible(true);
};
hidePopup = function () {
    popupVisible(false);
};
processHiding = function () {
  DevExpress.ui.dialog.alert("The widget has been hidden", "Action executed");
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}

hidingAction

An action performed before hiding the widget.

Type: Action
Default Value: null

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show popup', clickAction: showPopup }"></div>
<div data-bind="dxPopover: { visible: popupVisible, hidingAction: processHiding, target: '.button' }">
    <div data-options="dxTemplate:{ name: 'content' }">
        <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup }"></div>
        <p>The popup contents.</p>
    </div>
</div>
popupVisible = ko.observable(false);
showPopup = function () {
    popupVisible(true);
};
hidePopup = function () {
    popupVisible(false);
};
processHiding = function () {
  DevExpress.ui.dialog.alert("The widget is being hidden", "Action executed");
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}

shading

A Boolean value specifying whether or not the main screen is inactive while the overlay is active.

Type: Boolean
Default Value: false

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show popup', clickAction: showPopup }"></div>
<div data-bind="dxPopover: { visible: popupVisible, shading: popupShading, target: '.button' }">
    <div data-options="dxTemplate:{ name: 'content' }">
        <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup }"></div>
        <p>The popup contents.</p>
    </div>
</div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Shading</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: popupShading }"></div>
  </div>
</div>
popupVisible = ko.observable(false);
popupShading = ko.observable(true);
showPopup = function () {
    popupVisible(true);
};
hidePopup = function () {
    popupVisible(false);
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}

shadingColor

Specifies the shading color.

Type: String
Default Value: ''

This option makes sense only if the shading option is set to true.

showingAction

An action performed before showing the overlay.

Type: Action
Default Value: null

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show popup', clickAction: showPopup }"></div>
<div data-bind="dxPopover: { visible: popupVisible, showingAction: processShowing, target: '.button' }">
    <div data-options="dxTemplate:{ name: 'content' }">
        <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup }"></div>
        <p>The popup contents.</p>
    </div>
</div>
popupVisible = ko.observable(false);
showPopup = function () {
    popupVisible(true);
};
hidePopup = function () {
    popupVisible(false);
};
processShowing = function () {
  DevExpress.ui.dialog.alert("The widget is being shown", "Action executed");
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}

shownAction

An action performed after the widget is shown.

Type: Action
Default Value: null

Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Show popup', clickAction: showPopup }"></div>
<div data-bind="dxPopover: { visible: popupVisible, shownAction: processShowing, target: '.button' }">
    <div data-options="dxTemplate:{ name: 'content' }">
        <div class="button" data-bind="dxButton: { text: 'Hide popup', clickAction: hidePopup }"></div>
        <p>The popup contents.</p>
    </div>
</div>
popupVisible = ko.observable(false);
showPopup = function () {
    popupVisible(true);
};
hidePopup = function () {
    popupVisible(false);
};
processShowing = function () {
  DevExpress.ui.dialog.alert("The widget has been shown", "Action executed");
};
body{
  text-align: center;
}
.button{
  margin: 10px;
}

showTitle

A Boolean value specifying whether or not to display the title in the overlay window.

Type: Boolean
Default Value: false

target

The target element associated with popover.

title

The title in the overlay window.

Type: String
Default Value: ""

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: false

You can show and hide the widget by changing the value of an observable variable passed to this option.

Show Example:
jQuery
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Visible</div>
    <div id="target" class="dx-field-value" data-bind="dxCheckBox: { checked: popupVisible }"></div>
  </div>
</div>
<div data-bind="dxPopover: { visible: popupVisible, title: 'My popup', target: '.dx-field-value' }">
    <div data-options="dxTemplate:{ name: 'content' }">
        <div class="dx-field">
            <div class="dx-field-label">Visible</div>
            <div class="dx-field-value" data-bind="dxCheckBox: { checked: popupVisible }"></div>
        </div>
    </div>
</div>
popupVisible = ko.observable(false);
body{
  text-align: center;
}

width

Specifies the width of the widget.

Type: Number|String|function
Return Value: Number|String
The widget width.
Default Value: "auto"

The option can hold a value of the following types.

  • numeric - the widget width in pixels
  • string - a CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit")
  • function - the function returning the widget width (e.g., width:function(){ return baseWidth - 10 + "%"; })