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 its top and left 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>

See Also

• JavaScript API Reference of the PanelBar
• JavaScript API Reference of the DropDownList