Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Docking > Click Dock function keep the old DockZoneID is not correct
RadControls for ASP.NET are no longer supported (see this page for reference). In case you have inquiries about the Telerik ASP.NET AJAX controls, post them in the pertinent ASP.NET AJAX forums.

Not answered Click Dock function keep the old DockZoneID is not correct

Feed from this thread
  • binbin avatar

    Posted on Jul 5, 2010 (permalink)


    I have 3 zones

    Feature Main Dustbin

    Dustbin does not have any docks. But we can drag and drop the Dock of Main Zones to Dustbin

    when the dock be move to Dustbin. we need move it to Feature zone automaitc.
    So i add DragEnd function
       
    function DragEnd(sender, args) { 
                var zoneId = sender.get_dockZoneID(); 
                ///when the dock be move to dustbin we change it to feature 
                alert(zoneId); 
                if (zoneId.indexOf('ZoneDustbin') != -1) { 
                    var position = $find("<%=dockZoneFeature.ClientID%>").get_docks().length; 
                    $find("<%=dockZoneFeature.ClientID%>").dock(sender, position); 
                } 
            } 


    So when i click the Dock on Main and Feature I can see the ZoneId is correct.

    And Example we have A Dock named "ABC".
    Step 1: we drag and drop the Dock "ABC" from Main Zone to Dustbin Zone.
    So we can see the "ABC" dock is be add to Feature Zone.
    Step 2: click "ABC" we can see ZoneId Is Dustbin Zone also? not change to Feature.

    If we have more docks we can see Dashed box. 
    When we click the items below "ABC" dock . these items will out of any zone.


  • Pero Pero admin's avatar

    Posted on Jul 8, 2010 (permalink)

    Hi,

    I tested the following page following the steps you provided and everything seems to be working fine:

    <%@ 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">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .RadDockZone
            {
                float: left;
                margin-right: 10px;
            }
        </style>
        <telerik:RadScriptBlock runat="server">
     
            <script type="text/javascript">
                function DragEnd(sender, args)
                {
                    var zoneId = sender.get_dockZoneID();
                    ///when the dock be move to dustbin we change it to feature
                    alert(zoneId);
                    if (zoneId.indexOf('ZoneDustbin') != -1)
                    {
                        var dockZoneFeature = $find("<%=dockZoneFeature.ClientID%>");
                        var position = dockZoneFeature.get_docks().length;
                        dockZoneFeature.dock(sender, position);
                    }
                }
            </script>
     
        </telerik:RadScriptBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            </Scripts>
        </asp:ScriptManager>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="dockZoneFeature" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"
                        Skin="Hay" OnClientDragEnd="DragEnd">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
                <telerik:RadDockZone ID="dockZoneMain" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock2" runat="server" Title="RadDock-Title" Width="300px"
                        Skin="Black" OnClientDragEnd="DragEnd">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock3" runat="server" Title="RadDock-Title" Width="300px"
                        Skin="Sunset" OnClientDragEnd="DragEnd">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
                <telerik:RadDockZone ID="dockZoneDustbin" runat="server" MinHeight="300px" Width="300px">
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>

    Could you please test the code and see if I'm doing something wrong? If everything is OK on your side, please modify the code so the problems are reproduced, and send it back. You could also send a different page or a live url, where the issues can be observed locally.

    Kind regards,
    Pero
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.

  • binbin avatar

    Posted on Jul 8, 2010 (permalink)

    first steps we drag and drop the docks to Duestbin.
    see my screenshots
    1:
    http://farm5.static.flickr.com/4093/4775706039_c9dc49bbe2.jpg
    2:
    http://farm5.static.flickr.com/4139/4775706083_c07349dd68.jpg
    3:
    http://farm5.static.flickr.com/4143/4776342382_ed9884a810.jpg

  • Pero Pero admin's avatar

    Posted on Jul 14, 2010 (permalink)

    Hi Binbin,

    Thank you for the detailed steps. I reproduced the problem locally.

    It seems that there is a problem with the RadDockZone.dock client-side method. To avoid the issue please set the _hitZone property, of the RadDock you are docking using the dock method, to null, after the dock is placed in the new zone. Here is the working project:

    <%@ 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">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .RadDockZone
            {
                float: left;
                margin-right: 10px;
            }
        </style>
        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
     
            <script type="text/javascript">
                function DragEnd(sender, args) {
                    var zoneId = sender.get_dockZoneID();
                    ///when the dock be move to dustbin we change it to feature
                    if (zoneId.indexOf('ZoneDustbin') != -1) {
                        var dockZoneFeature = $find("<%=dockZoneFeature.ClientID%>");
                        var position = dockZoneFeature.get_docks().length;
                        dockZoneFeature.dock(sender, position);
                        sender._hitZone = null;
                    }
                }
            </script>
     
        </telerik:RadScriptBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            </Scripts>
        </asp:ScriptManager>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="dockZoneFeature" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"
                        Skin="Hay" OnClientDragEnd="DragEnd">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
                <telerik:RadDockZone ID="dockZoneMain" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock2" runat="server" Title="RadDock-Title" Width="300px"
                        Skin="Black" OnClientDragEnd="DragEnd">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock3" runat="server" Title="RadDock-Title" Width="300px"
                        Skin="Sunset" OnClientDragEnd="DragEnd">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
                <telerik:RadDockZone ID="dockZoneDustbin" runat="server" MinHeight="300px" Width="300px">
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>


    Greetings,
    Pero
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Docking > Click Dock function keep the old DockZoneID is not correct