Drop down menus of controls within dock don't move with dock

2 posts, 0 answers
  1. Eric
    Eric avatar
    1 posts
    Member since:
    Nov 2012

    Posted 11 Dec 2012 Link to this post

    I modified the dock example found the Telerik course (Telerik\RadControlAJAXTutorial\Courseware_Projects\RealEstate\CS\GettingStarted) by adding a dock within RadDockZone2.  I have added and populated a combo box inside the dock.  When running, I notice that combo box's drop down menu selection stays in place whenever I move the parent dock.  Is there a way to change this behavior so that the drop down menu moves along with the dock?  See attached *.aspx and *.cs files.
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="GettingStarted._Default" %>
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title>Getting Started</title>
      <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
          <telerik:RadDockZone ID="RadDockZone1" Runat="server" Height="150px"
            Orientation="Horizontal" Skin="Outlook" Width="100%">
            <telerik:RadDock ID="RadDock1" Runat="server"
              Width="150px" Skin="Outlook"
                Text="If at first you don't succeed… make sure nobody finds out you tried!  - Anonymous"
             <telerik:RadDock ID="RadDock2" Runat="server"
               Skin="Outlook" Width="235px" Title="Calendar" DockMode="Docked">
                  <telerik:RadCalendar ID="RadCalendar1" Runat="server"
                    font-names="Arial, Verdana, Tahoma" forecolor="Black"
                    Skin="Outlook" style="border-color:#ececec">
        <table style="width:100%">
                <td width="40%">
                    <telerik:RadDockZone ID="RadDockZone2" Runat="server" FitDocks="False"
                        Height="400px" Skin="Outlook" Width="95%">
                        <telerik:RadDock ID="RadDock3" Runat="server" Height="184px" Text="This is the dock that you should look at!"
                            Title="TestDock" Skin="Sunset" DockMode="Docked" Width="100%">
                                <telerik:RadComboBox ID="RadComboBox1" Runat="server">
                    <telerik:RadSplitter ID="RadSplitter1" Runat="server" Orientation="Horizontal"
                        Skin="Outlook" Width="100%">
                        <telerik:RadPane ID="RadPane1" Runat="server" Height="75px">
                            <asp:LinkButton ID="LinkButton1" runat="server">Telerik</asp:LinkButton>
                            <br />
                            <asp:LinkButton ID="LinkButton2" runat="server">Version1</asp:LinkButton>
                            <br />
                            <asp:LinkButton ID="LinkButton3" runat="server">Deltek</asp:LinkButton>
                        <telerik:RadSplitBar ID="RadSplitBar1" Runat="server" />
                        <telerik:RadPane ID="RadPane2" Runat="server"
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Outlook">
                <telerik:RadWindow runat="server" Animation="Fade"
                    Behavior="Resize, Minimize, Close, Maximize, Move, Reload"
                    Behaviors="Resize, Minimize, Close, Maximize, Move, Reload"
                    InitialBehavior="None" Left="" NavigateUrl="http://www.Telerik.com"
                    OpenerElementID="LinkButton1" style="display:none;" Title="Telerik" Top=""
                <telerik:RadWindow runat="server" Animation="FlyIn"
                    Behavior="Resize, Minimize, Close, Maximize, Move, Reload"
                    Behaviors="Resize, Minimize, Close, Maximize, Move, Reload"
                    InitialBehavior="None" Left="" NavigateUrl="http://v1/NCCT/Default.aspx?menu=MyHomeEnterpriseGettingStartedPage"
                    OpenerElementID="LinkButton2" style="display:none;" Title="NCCT Version1" Top=""
                <telerik:RadWindow runat="server" Animation="Resize"
                    Behavior="Resize, Minimize, Close, Maximize, Move, Reload"
                    Behaviors="Resize, Minimize, Close, Maximize, Move, Reload"
                    InitialBehavior="None" Left="" NavigateUrl="http://deltek:7009/DeltekTC/welcome.msv"
                    OpenerElementID="LinkButton3" style="display:none;" Title="Deltek" Top=""
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.MobileControls;
    using System.Web.UI.WebControls;
    namespace GettingStarted
        public partial class _Default : System.Web.UI.Page
            protected void Page_Load(object sender, EventArgs e)
                if (!IsPostBack)
                    var dataSourceList = new List<ComboBoxDataSource>();
                    dataSourceList.Add(new ComboBoxDataSource("Red", Guid.NewGuid()));
                    dataSourceList.Add(new ComboBoxDataSource("Orange", Guid.NewGuid()));
                    dataSourceList.Add(new ComboBoxDataSource("Yellow", Guid.NewGuid()));
                    dataSourceList.Add(new ComboBoxDataSource("Green", Guid.NewGuid()));
                    dataSourceList.Add(new ComboBoxDataSource("Blue", Guid.NewGuid()));
                    dataSourceList.Add(new ComboBoxDataSource("Indigo", Guid.NewGuid()));
                    dataSourceList.Add(new ComboBoxDataSource("Violet", Guid.NewGuid()));
                    RadComboBox1.DataTextField = "Name";
                    RadComboBox1.DataSource = dataSourceList;
        public class ComboBoxDataSource
            private string _name;
            private Guid _id;
            public ComboBoxDataSource(string name, Guid id)
                _name = name;
                _id = id;
            public string Name
                get { return _name; }
                set { _name = value; }
            public Guid Id
                get { return _id; }
                set { _id = value; }
  2. Slav
    Slav avatar
    1359 posts

    Posted 14 Dec 2012 Link to this post

    Hi Eric,

    You can reference the RadComboBox inside the RadDock via jQuery and hide the dropdown through the client-side API of these RadControls when the dock is dragged . The following code sample demonstrates this approach:

    <telerik:RadDock ID="RadDock3" runat="server" Height="184px" Text="This is the dock that you should look at!"
        Title="TestDock" Skin="Sunset" Width="100%" OnClientDragStart="OnClientDragStart">
            <telerik:RadComboBox ID="RadComboBox1" runat="server">

    <script type="text/javascript">
        function OnClientDragStart(sender, args) {
            var comboBox = $telerik.$(sender.get_element()).find(".RadComboBox").get(0).control;

    Feel free to contact us again if you encounter more difficulties.

    All the best,
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top