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

Space bug using dock client-side function of raddockzone

2 Answers 58 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Laurent
Top achievements
Rank 1
Laurent asked on 09 Dec 2009, 11:52 AM
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 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 14 Dec 2009, 02:57 PM
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.
0
Laurent
Top achievements
Rank 1
answered on 14 Dec 2009, 04:15 PM
Thank you for the quick answer (and for the points :D) !
Tags
Dock
Asked by
Laurent
Top achievements
Rank 1
Answers by
Pero
Telerik team
Laurent
Top achievements
Rank 1
Share this question
or