Position DropDownList Popup in PanelBar Content
Environment
Product | Progress® Kendo UI® PanelBar for jQuery |
Product | Progress® Kendo UI® DropDownList for jQuery |
Description
How can I position a DropDownList popup in the content of the PanelBar?
Solution
- Wrap the element, from which the DropDownList is initialized, in a container.
<li><span id="ddl-container"><input type="text" id="ddl"/></span></li>
- Use the
popup.appendTo
option of the component, in order to configure the position of the popup to the container.
popup: {
appendTo: $('#ddl-container')
}
- You may also need to configure the style of the
animation container
by setting itstop
andleft
position.
.k-animation-container{
top: initial !important;
left: initial !important;
}
The following example demonstrates the full implementation of the suggested approach:
<ul id="panelbar">
<li>Item 1
<ul>
<li ><span id="ddl-container"><input type="text" id="ddl"/></span></li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
<script>
$("#panelbar").kendoPanelBar();
$("#ddl").kendoDropDownList({
dataSource: [
{ name: "Apples" },
{ name: "Oranges" }
],
dataTextField: "name",
dataValueField: "name",
popup: {
appendTo: $('#ddl-container')
}
});
</script>
<style>
.k-animation-container{
top: initial !important;
left: initial !important;
}
</style>