Space bug using dock client-side function of raddockzone

3 posts, 0 answers
  1. Laurent
    Laurent avatar
    6 posts
    Member since:
    Apr 2009

    Posted 09 Dec 2009 Link to this post

    Hi guys,

    Quite hard to explain, but I will try ...

    We have in one of our projects a really strange bug. We drag'n'drop a dock to a zone, we "close" it (close for us means move the dock to a specific zone, with a different state ... so instead of close, I should use move). Once done, we can click on the dock titlebar, so the dock moves to its last position.

    The bad news is that we have no idea where it comes from, and it is quite hard to understand !
    The good news is that the bug is easy to reproduce on the online demo, and I got the good idea to make a video  : http://www.youtube.com/watch?v=zUVYzm_rh00

    Any ideas ? Real bug or bad usage of the client-side API ?

    Note : bug visible on Firefox 3.5 for sure, sometimes (to be defined) on internet explorer (unknown for other browsers)
    Link to the demo : http://demos.telerik.com/aspnet-ajax/dock/examples/clientsideapi/defaultcs.aspx
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 14 Dec 2009 Link to this post

    Hi Laurent,

    When the dock control is moved on the page, there is a client-side method that calculates which zone is hit by the dock (i.e. if the dock is over a zone, the dock marks this as a hitZone). This is not the case if the zone.dock() client-side method is used to move the dock to the desired zone, because this way we are avoiding the calculation of the hitZone (this on the other case does not change the hitZone and it remains the same before the dock was docked with dock() method). Basically, when you click on the titlebar after you have moved the dock using its client-side API, the OnClientDrag event is not fired and the hitZone is not recalculated and the dock moves to the previous zone (where it was dropped before by using the mouse).

    To avoid this behavior the _hitZone object should be set to null when the zone.dock() method is used. Please test the following project which sets _hitZone to null every time the dock() client-side method is invoked:
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!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" runat="server" method="post">
        <telerik:RadSkinManager ID="SkinManager1" runat="server" ShowChooser="true">
        </telerik:RadSkinManager>
     
        <script type="text/javascript">
            //<![CDATA[
            function DockRadDock1ToRightZone()
            {
                var leftZone = $find('<%= RadDockZone2.ClientID%>');
                var dock = $find('<%= RadDock1.ClientID%>');
     
                if (dock && leftZone && dock.get_parent().get_id() != "RadDockZone2")
                {
                    leftZone.dock(dock);
                    dock._hitZone = null;
                }
            }
            //]]>
        </script>
     
        <asp:ScriptManager ID="ScriptManager" runat="server">
        </asp:ScriptManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Buttons" />
        <br />
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <table>
                <tr>
                    <td>
                        <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="200" Width="300"
                            Skin="Outlook">
                            <telerik:RadDock ID="RadDock1" runat="server" Text="RadDock1" Title="RadDock1" Height="70"
                                EnableRoundedCorners="true">
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </td>
                    <td>
                        <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="200" Width="300"
                            Skin="Outlook">
                        </telerik:RadDockZone>
                    </td>
                </tr>
            </table>
            <input id="dockButton" onclick="DockRadDock1ToRightZone()" type="button" value="Move RadDock1 To Right Zone"
                style="width: 250px;" />
        </telerik:RadDockLayout>
        </form>
    </body>
    </html>

    I have updated your account with 500 Telerik points for bringing this issue to our attention. Please do not hesitate to contact us, if you have other questions.


    All the best,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Laurent
    Laurent avatar
    6 posts
    Member since:
    Apr 2009

    Posted 14 Dec 2009 Link to this post

    Thank you for the quick answer (and for the points :D) !
Back to Top