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 82 Views

Dock

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

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">

<html xmlns="http://www.w3.org/1999/xhtml" >

<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

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.