• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Dropdowns / API / DropDownsPopupSettings / 

DropDownsPopupSettings

The settings of the popup container.

NameTypeDefaultDescription

anchor?

"null" | HTMLElement

Specifies the element which will be used as an anchor (see example). The Popup opens next to that element.

anchorAlign?

Align

Specifies the pivot point of the anchor (see example).

animate?

boolean | PopupAnimation

Controls the Popup animation (see example). By default, the opening and closing animations are enabled.

appendTo?

"null" | HTMLElement

Defines the container to which the Popup will be appended. Defaults to body.

  • If set to null the Popup will be rendered without React Portal.

className?

string | string[]

Specifies a list of CSS classes that will be added to the Popup element.

collision?

Collision

Configures the collision behavior of the Popup (see example).

height?

string | number

Sets the height of the DOM element inside the DropDowns' popup that contains the data items of each component. This height doesn't include the header and footer.

id?

string

Specifies the id that will be added to the Popup element.

margin?

Margin

Configures the margin value that will be added to the popup dimensions in pixels and leaves a blank space between the popup and the anchor.

offset?

Offset

Specifies the absolute position of the element (see example). The Popup opens next to that point. The pivot point of the Popup is defined by the popupAlign configuration option. The boundary detection is applied by using the window viewport.

onClose?

(event: CloseEvent) => void

Fires after the Popup is closed.

onOpen?

(event: OpenEvent) => void

Fires after the Popup is opened and the opening animation ends.

onPosition?

(event: PositionEvent) => void

Fires after the Popup position is set.

popupAlign?

Align

Specifies the pivot point of the Popup (see example).

popupClass?

string

Specifies a list of CSS classes that are used for styling the popup inner element.

positionMode?

PositionMode

Specifies the position mode of the component. By default, the Popup uses fixed positioning. To make the Popup acquire absolute positioning, set this option to absolute.

If you need to support mobile browsers with the zoom option, use the absolute positioning of the Popup.

scale?

number

Used to set the document scale when using a scale transform.

The document or container scale is required to compute the popup position correctly. Detecting the scale is not reliable and must be set by providing a value for SCALE. See Support for Document Scale.

Using this token is not necessary for user-applied browser zoom.

show?

boolean

Controls the Popup visibility (see example). Defaults to false.

style?

CSSProperties

Represents the styles that are applied to the Popup.

width?

string | number

Sets the width of the popup container. By default, the width of the host element is used.

In this article

Not finding the help you need?

Contact Support