double click to undock - seems to forget

3 posts, 0 answers
  1. John
    John avatar
    15 posts
    Member since:
    Aug 2010

    Posted 25 Aug 2010 Link to this post


    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">
    <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. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 30 Aug 2010 Link to this post

    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">
    <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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John avatar
    15 posts
    Member since:
    Aug 2010

    Posted 30 Aug 2010 Link to this post

    I will give it a shot - thank you very much for your response!

    John
Back to Top