Configuration

An object defining configuration options for the dxPopup widget.

animation

An object that defines the animation options of the widget.

Type: object:animation configuration
Default for android below version 4: { show: { type: "fade", duration: 400 }, hide: { type: "fade", duration: 400, to: { opacity: 0 }, from: { opacity: 1 } } }
Default for iOS: { show: { type: "slide", duration: 400, from: { position: { my: "top", at: "bottom", of: window } }, to: { position: { my: "center", at: "center", of: window } } }, hide: { type: "slide", duration: 400, from: { position: { my: "center", at: "center", of: window } }, to: { position: { my: "top", at: "bottom", of: window } } } }

Show Example:
AngularJS
Knockout
jQuery

buttons

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

Type: Array

This option accepts an array of items that have the same structure as toolbar items. But in addition to toolbar item fields, a buttons array item includes the toolbar field that specifies whether the item is displayed on a top or bottom toolbar. This field accepts the "top" and "bottom" values.

Show Example:
AngularJS
Knockout
jQuery

closeOnBackButton

A Boolean value specifying whether or not the widget is closed if a user presses the Back hardware button.

Type: Boolean
Default Value: true

closeOnOutsideClick

A Boolean value specifying whether or not the widget is closed if a user clicks outside of the overlapping window.

Type: Boolean|function
Return Value: Boolean
The required option value.
Default Value: false

contentReadyAction

Deprecated

Use the onContentReady option instead.

contentTemplate

A template to be used for rendering widget content.

Type: String|function|DOM Node|jQuery
Function parameters:
contentElement: jQuery
The jQuery object of the widget content element.
Return Value: String|jQuery
A template name or a template container.
Default Value: "content"

This option enables you to render widget contents depending on field values of the bound data model.

HTML
<div data-options="dxTemplate: { name:'myContent' }">
    <h1 data-bind="text: title"></h1>
    <p>Full name: <span data-bind="text: fullName"></span></p>
</div>

NOTE: A binding context of a content template is the bound view model. So, you can bind template elements to the view model's fields directly (see the code above). To access another binding context within a title template, use the Knockout/Angular binding variables.

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.

dragEnabled

Specifies whether or not to allow a user to drag the popup window.

Type: Boolean
Default Value: false
Default for desktop: true

A user can drag the popup window by the title. Therefore, this option makes sense if the showTitle option is set to true.

Show Example:
AngularJS
Knockout
jQuery

focusStateEnabled

Specifies whether or not the widget can be focused.

Type: Boolean
Default Value: false

fullScreen

A Boolean value specifying whether or not to display the widget in full-screen mode.

Type: Boolean
Default Value: false

height

The height of the widget in pixels.

Type: Number|String|function
Return Value: Number|String
The widget height.
Default Value: function() { return $(window).height() * 0.8 }

The option can hold a value of the following types.

  • number
    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

Deprecated

Use the onHidden option instead.

hidingAction

Deprecated

Use the onHiding option instead.

hint

Specifies the text of the hint displayed for the widget.

Type: String
Default Value: undefined

hoverStateEnabled

A Boolean value specifying whether or not the widget changes its state when being hovered by an end user.

Type: Boolean
Default Value: false

onContentReady

A handler for the contentReady event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: null

Assign a function to perform a custom action when widget content is ready.

onDisposing

A handler for the disposing event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: null

Assign a function to perform a custom action when you dispose of this component.

onHidden

A handler for the hidden event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: null

Assign a function to perform a custom action after the widget is hidden.

Show Example:
AngularJS
Knockout
jQuery

onHiding

A handler for the hiding event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
cancel: Boolean
Indicates whether to cancel hiding the overlay.
Default Value: null

Assign a function to perform a custom action before hiding the widget.

Show Example:
AngularJS
Knockout
jQuery

onOptionChanged

A handler for the optionChanged event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
value: any
Specifies a new value for the option.
Default Value: null

Assign a function to perform a custom action after an option of the component is changed.

onShowing

A handler for the showing event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: null

Assign a function to perform a custom action before showing the widget.

Show Example:
AngularJS
Knockout
jQuery

onShown

A handler for the shown event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: null

Assign a function to perform a custom action after the widget is shown.

Show Example:
AngularJS
Knockout
jQuery

onTitleRendered

A handler for the titleRendered event.

Type: function
Function parameters:
e: Object
Provides function parameters.
Object structure:
titleElement: jQuery
The HTML element of the item title.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element.
Default Value: null

Assign a function to perform a custom action after a collection item title is rendered.

position

An object defining widget positioning options.

Type: object:position configuration
Default Value: { my: 'center', at: 'center', of: window }
Default for windows phone 8: { my: "top center", at: "top center", of: window, offset: "0 0" }

Show Example:
AngularJS
Knockout
jQuery

rtlEnabled

Specifies whether or not the current component supports a right-to-left representation.

Type: Boolean
Default Value: false

If you need to switch the display of this DevExtreme component to right-to-left, enable a specifically designed configuration option - rtlEnabled. When this option is set to true, the text flows from right to left, and the layout the component's elements is reversed. To switch the entire application/site to a right-to-left representation, use the static DevExpress.rtlEnabled field.

shading

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

Type: Boolean
Default Value: true

Show Example:
AngularJS
Knockout
jQuery

shadingColor

Specifies the shading color.

Type: String
Default Value: ''

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

showCloseButton

Specifies whether or not the widget displays the Close button.

Type: Boolean
Default Value: false
Default for desktop: true

NOTE: The option makes sense only if the showTitle option is set to true.

showingAction

Deprecated

Use the onShowing option instead.

shownAction

Deprecated

Use the onShown option instead.

showTitle

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

Type: Boolean
Default Value: true

tabIndex

Specifies the widget tab index.

Type: Number
Default Value: 0

title

The title in the overlay window.

Type: String
Default Value: ""

NOTE: If the title option is specified, the titleTemplate option value is ignored.

titleTemplate

A template to be used for rendering the widget title.

Type: String|function|DOM Node|jQuery
Function parameters:
titleElement: jQuery
An HTML element containing the rendered title.
Return Value: String|DOM Node|jQuery
A template name or a template container.
Default Value: "title"

This option enables you to render the widget title depending on field values of the bound data model.

HTML
<div data-options="dxTemplate: { name:'myTitle' }">
    <h3><span data-bind="text: title"></span> info</h3>
</div>

NOTE: A binding context of a title template is the bound view model. So, you can bind template elements to the view model's fields directly (see the code above). To access another binding context within a title template, use the Knockout/Angular binding variables.

NOTE: The titleTemplate option makes sense if the title option is undefined.

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:
AngularJS
Knockout
jQuery

width

The widget width in pixels.

Type: String|Number|function
Return Value: Number|String
The widget width.
Default Value: function() {return $(window).width() * 0.8 }
Default for windows 8: function() { return $(window).width(); }

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 + "%"; })