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

double click to undock - seems to forget

2 Answers 112 Views

Dock

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

John asked on 25 Aug 2010, 07:30 PM

I am trying to make a dashboard for charts, and when one double clicks on a single radDock item it will undock and take up the whole screen. When they double click on it again, it will go back to its original size and go back to the dockZone. The code seems to work, except that when it finishes the function after being double clicked it seems to jump back into the dockZone. Can anyone point out what I am missing? I couldn't find any documentation on it - and I am new to telerik, so I appreciate any help I can get.

There is nothing in the code behind that would cause it to revert.

thanks in advance,
John

<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Dock.Default.DefaultCS"

CodeFile="DefaultCS.aspx.cs" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

<head id="Head1" runat="server">

</head>

<body class="BODY">

<form id="Form1" method="post" runat="server">

<script type="text/javascript">

function OnClientInitialize(sender, args) {

$addHandlers(sender._handle, { "dblclick": Undock }, sender);

}

function Undock() {

this.undock();

this.set_left(200);

this.set_top(200);

this.set_height(500);

this.set_width(500);

alert("everything is good at this point- click okay and it goes back into the dock zone.");

}

</script>

<telerik:RadScriptManager ID="ScriptManager" runat="server">

</telerik:RadScriptManager>

<telerik:RadFormDecorator ID="RadFormDecorator1" DecoratedControls="All" runat="server" DecorationZoneID="ConfiguratorContainer1"/>

<telerik:RadDockLayout runat="server" ID="RadDockLayout1">

<table style="width:100%; height:100%">

<tr>

<td>

<telerik:RadDockZone ID="RadDockZone2" runat="server" Orientation="Vertical" Width="250px"

MinHeight="400px">

<telerik:RadDock ID="RadDock1" runat="server" Title="Double Click" Width="250px" EnableAnimation="true"

EnableRoundedCorners="true" Resizable="true" OnClientInitialize="OnClientInitialize" >

<ContentTemplate>

<iframe style="width:100%; height:100%" src="http://www.google.com"></iframe>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</td>

</tr>

</table>

</telerik:RadDockLayout>

</form>

</body>

</html>

2 Answers, 1 is accepted

answered on 30 Aug 2010, 02:55 PM

Hi John,

Have you considered our RadWindow control? I would recommend using this control for this specific scenario, because it is supported out of the box: http://demos.telerik.com/aspnet-ajax/window/examples/keyboardsupport/defaultcs.aspx.

The dock returns to its docking zone because the movement of the dock is enabled. When you click the dock's title you are actually moving the dock. Because a click means dragging and dropping a dock, the dock will be moved to the position of the mouse pointer. The mouse pointer is over the zone, and therefore the dock will be returned to its zone. To achieve this scenario with the dock you must disable the movement of the dock (EnableDrag="false"). Here is the modified code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

<head id="Head1" runat="server">

</head>

<body class="BODY">

<form id="Form2" method="post" runat="server">

<script type="text/javascript">

function OnClientInitialize(sender, args)

{

$addHandlers(sender._handle, { "dblclick": Undock }, sender);

}

function Undock()

{

var dock = this;

dock.undock();

dock.set_left(200);

dock.set_top(200);

dock.set_height(500);

dock.set_width(500);

dock.get_element().style.position = "absolute";

alert("everything is good at this point- click okay and it goes back into the dock zone.");

}

</script>

<telerik:RadScriptManager ID="ScriptManager" runat="server">

</telerik:RadScriptManager>

<telerik:RadFormDecorator ID="RadFormDecorator1" DecoratedControls="All" runat="server"

DecorationZoneID="ConfiguratorContainer1" />

<telerik:RadDockLayout runat="server" ID="RadDockLayout2">

<table style="width: 100%; height: 100%">

<tr>

<td>

<telerik:RadDockZone ID="RadDockZone2" runat="server" Orientation="Vertical" Width="250px"

MinHeight="400px">

<telerik:RadDock ID="RadDock2" runat="server" Title="Double Click" Width="250px"

EnableDrag="false" EnableAnimation="true" EnableRoundedCorners="true" Resizable="true"

OnClientInitialize="OnClientInitialize">

<ContentTemplate>

<iframe style="width: 100%; height: 100%" src="http://www.google.com"></iframe>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</td>

</tr>

</table>

</telerik:RadDockLayout>

</form>

</body>

</html>

Best wishes,
Pero
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items