popupObject
The options that will be used for the popup initialization. For more details about the available options refer to Popup documentation.
Example - append the popup to a specific element
<div id="container"> <input id="combobox" /> </div> <script> $("#combobox").kendoComboBox({ dataSource: [ { id: 1, name: "Apples" }, { id: 2, name: "Oranges" } ], dataTextField: "name", dataValueField: "id", popup: { appendTo: $("#container") } }); </script>popup.appendToString
Defines a jQuery selector that will be used to find a container element, where the popup will be appended to.
Example - append the popup to a specific element
<div id="container"> <input id="combobox" /> </div> <script> $("#combobox").kendoComboBox({ dataSource: [ { id: 1, name: "Apples" }, { id: 2, name: "Oranges" } ], dataTextField: "name", dataValueField: "id", popup: { appendTo: $("#container") } }); </script>popup.originString
Specifies how to position the popup element based on anchor point. The value is space separated "y" plus "x" position.
The available "y" positions are:
- "bottom"
- "center"
- "top"
The available "x" positions are:
- "left"
- "center"
- "right"
Example - append the popup to a specific element
<div id="container"> <input id="combobox" /> </div> <script> $("#combobox").kendoComboBox({ dataSource: [ { id: 1, name: "Apples" }, { id: 2, name: "Oranges" } ], dataTextField: "name", dataValueField: "id", popup: { origin: "top left" } }); </script>popup.positionString
Specifies which point of the popup element to attach to the anchor's origin point. The value is space separated "y" plus "x" position.
The available "y" positions are:
- "bottom"
- "center"
- "top"
The available "x" positions are:
- "left"
- "center"
- "right"
Example - append the popup to a specific element
<div id="container"> <input id="combobox" /> </div> <script> $("#combobox").kendoComboBox({ dataSource: [ { id: 1, name: "Apples" }, { id: 2, name: "Oranges" } ], dataTextField: "name", dataValueField: "id", popup: { position: "top center" } }); </script> <style> #container{ position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; } </style>In this article