popup - API Reference - Kendo UI DropDownButton

New to Kendo UI for jQuery? Start a free 30-day trial

configuration

The options that will be used for the popup initialization. For more details about the available options refer to Popup documentation.

Object

<button id="dropdownbutton" type="button">Options</button>
<script>
    $("#dropdownbutton").kendoDropDownButton({
        items: [
            { text: "Option 1" },
            { text: "Option 2" },
            { text: "Option 3" }
        ],
        popup: {
            origin: "bottom left",
            position: "top left",
            anchor: "left",
            appendTo: "body",
            animation: {
                open: { effects: "fadeIn" },
                close: { effects: "fadeOut" }
            }
        }
    });
</script>

popup.appendTo

String

Defines a jQuery selector that will be used to find a container element, where the popup will be appended to. The element needs to be relatively positioned.

Default: document.body

<div id="container" style="position: relative; width: 500px; height: 300px; border: 1px solid #ccc;">
    <p>This is a container with relative positioning</p>
    <button id="dropdownbutton" type="button">Actions</button>
</div>
<script>
    $("#dropdownbutton").kendoDropDownButton({
        items: [
            { text: "Edit" },
            { text: "Delete" },
            { text: "Archive" }
        ],
        popup: {
            appendTo: "#container"  // Popup will be appended to the container div
        }
    });
</script>