This is a migrated thread and some comments may be shown as answers.

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

1 Answer 46 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 1
Eric asked on 11 Dec 2012, 04:49 PM
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>
</head>
<body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
      <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"
            Title="Quote">
         </telerik:RadDock>   
         <telerik:RadDock ID="RadDock2" Runat="server"
           Skin="Outlook" Width="235px" Title="Calendar" DockMode="Docked">
           <ContentTemplate>
              <telerik:RadCalendar ID="RadCalendar1" Runat="server"
                font-names="Arial, Verdana, Tahoma" forecolor="Black"
                Skin="Outlook" style="border-color:#ececec">
              </telerik:RadCalendar>
           </ContentTemplate>
         </telerik:RadDock>
    </telerik:RadDockZone>
    </div>
    <table style="width:100%">
        <tr>
            <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%">
                        <ContentTemplate>
                            <telerik:RadComboBox ID="RadComboBox1" Runat="server">
                            </telerik:RadComboBox>
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </td>
            <td>
                <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:RadPane>                  
                    <telerik:RadSplitBar ID="RadSplitBar1" Runat="server" />
                    <telerik:RadPane ID="RadPane2" Runat="server"
                        ContentUrl="http://www.telerik.com">
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </td>
        </tr>
    </table>
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Outlook">
        <Windows>
            <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=""
                VisibleStatusbar="False">
            </telerik:RadWindow>
            <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=""
                VisibleStatusbar="False">
            </telerik:RadWindow>
            <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=""
                VisibleStatusbar="False">
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
  </form>
</body>
</html>
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;
                RadComboBox1.DataBind();
            }
        }
    }
 
    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; }
        }
    }
}

1 Answer, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 14 Dec 2012, 11:00 AM
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">
    <ContentTemplate>
        <telerik:RadComboBox ID="RadComboBox1" runat="server">
        </telerik:RadComboBox>
    </ContentTemplate>
</telerik:RadDock>

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

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

All the best,
Slav
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.
Tags
Dock
Asked by
Eric
Top achievements
Rank 1
Answers by
Slav
Telerik team
Share this question
or