Dock place holder problem

5 posts, 0 answers
  1. Ivan
    Ivan avatar
    19 posts
    Member since:
    Jan 2008

    Posted 26 May 2009 Link to this post

    Hello,
    I have the following problem - I have a dock zone with docks that have to be dragged to another zone, but they cannot be dragged back on the first zone. I use the ForbiddenZones property of the docks. After beginning dragging the dock the place holder for dropping the dock appears. The problem is that after I drop the dock on the first zone the place holder does not hide.
    Here is the code of the markup:

    <telerik:RadDockZone ID="RadDockZone1" runat="server" UniqueName="RadDockZone1"
        <telerik:RadDock ID="RadDock1" runat="server" Text="RadDock1" ForbiddenZones="RadDockZone1" DockMode="Docked"
        </telerik:RadDock> 
        <telerik:RadDock ID="RadDock2" runat="server" Text="RadDock2" ForbiddenZones="RadDockZone1" DockMode="Docked"
        </telerik:RadDock> 
        <telerik:RadDock ID="RadDock3" runat="server" Text="RadDock3" ForbiddenZones="RadDockZone1" DockMode="Docked"
        </telerik:RadDock> 
    </telerik:RadDockZone> 
    <telerik:RadDockZone ID="RadDockZone2" runat="server" UniqueName="RadDockZone2"
    </telerik:RadDockZone> 

    I'm not sure if I'm clear enough with my description :) Thanks in advance.
    Best regards,
    Ivan Pelovski
  2. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 26 May 2009 Link to this post

    This is a normal behavior because you add a RadDock on the server in a frobidden RadDockZone :)
    You should set _forbiddenZones via JavaSciript once you start to drag a RadDock,e.g.

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head id="Head1" runat="server">  
        <title></title>  
        <script type="text/javascript">  
            function DockDragStart(dock, args) {  
                if (!dock._forbiddenZones[0]) {  
                    //hide placeholder  
                    dock.get_dockZone()._hidePlaceholder();  
                    //set forbidden zone to RadDockZone1  
                    dock._forbiddenZones = new Array();  
                    dock._forbiddenZones[0] = "RadDockZone1";  
     
                }  
                  
            }  
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager> 
        <div> 
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">  
               <telerik:RadDockZone ID="RadDockZone1" runat="server" UniqueName="RadDockZone1">    
                    <telerik:RadDock ID="RadDock1" runat="server" Text="RadDock1" DockMode="Docked" OnClientDragStart="DockDragStart">    
                    </telerik:RadDock>    
                    <telerik:RadDock ID="RadDock2" runat="server" Text="RadDock2" DockMode="Docked" OnClientDragStart="DockDragStart">    
                    </telerik:RadDock>    
                    <telerik:RadDock ID="RadDock3" runat="server" Text="RadDock3" DockMode="Docked" OnClientDragStart="DockDragStart">    
                    </telerik:RadDock>    
                </telerik:RadDockZone>    
                <telerik:RadDockZone ID="RadDockZone2" runat="server" UniqueName="RadDockZone2">    
                </telerik:RadDockZone> 
            </telerik:RadDockLayout> 
        </div> 
        </form> 
    </body> 
    </html> 

  3. Ivan
    Ivan avatar
    19 posts
    Member since:
    Jan 2008

    Posted 26 May 2009 Link to this post

    Thanks for the reply Obi-Wan Kenobi. But your suggestion doesn't work neither. Start dragging one of the docks and then drop it on the first zone. Till now the code works well. Start dragging the same dock again. The place holder appears maybe because the dock now has its ForbiddenZones property set.


  4. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 27 May 2009 Link to this post

    The code works if you dock a RadDock to RadDockZone2. I updated the code and it should work in both cases now.

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
    <html xmlns="http://www.w3.org/1999/xhtml">     
    <head id="Head1" runat="server">     
        <title></title>     
        <script type="text/javascript">     
            function DockDragStart(dock, args) {     
                if (!dock._forbiddenZones[0]) {     
                    //hide placeholder     
                    dock.get_dockZone()._hidePlaceholder();     
                    //set forbidden zone to RadDockZone1     
                    dock._forbiddenZones = new Array();     
                    dock._forbiddenZones[0] = "RadDockZone1";     
        
                }  
     
            }  
            function DockDragEnd(dock, args) {  
                if (dock.get_dockZoneID() == "RadDockZone1") {  
                    $find("RadDockZone2").dock(dock);  
                }  
            }   
        </script>    
    </head>    
    <body>    
        <form id="form1" runat="server">     
        <asp:ScriptManager ID="ScriptManager1" runat="server">     
        </asp:ScriptManager>    
        <div>    
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">     
               <telerik:RadDockZone ID="RadDockZone1" runat="server" UniqueName="RadDockZone1">       
                    <telerik:RadDock ID="RadDock1" runat="server" Text="RadDock1" DockMode="Docked"   
                     OnClientDragStart="DockDragStart" 
                     OnClientDragEnd="DockDragEnd">       
                    </telerik:RadDock>       
                    <telerik:RadDock ID="RadDock2" runat="server" Text="RadDock2" DockMode="Docked"   
                    OnClientDragStart="DockDragStart" 
                    OnClientDragEnd="DockDragEnd">       
                    </telerik:RadDock>       
                    <telerik:RadDock ID="RadDock3" runat="server" Text="RadDock3" DockMode="Docked"   
                    OnClientDragStart="DockDragStart" 
                    OnClientDragEnd="DockDragEnd">       
                    </telerik:RadDock>       
                </telerik:RadDockZone>       
                <telerik:RadDockZone ID="RadDockZone2" runat="server" UniqueName="RadDockZone2">       
                </telerik:RadDockZone>    
            </telerik:RadDockLayout>    
        </div>    
        </form>    
    </body>    
    </html>    
     
  5. Ivan
    Ivan avatar
    19 posts
    Member since:
    Jan 2008

    Posted 27 May 2009 Link to this post

    Thanks again for your replies Obi-Wan :) But this is not the desired behavior for the docks. They should remain in the first zone if dropped there on their initial places. A college of mine came to a workaround of the problem but I think this is a bug of the dock zone and it should be addressed like that.
    To help others here is the code of the workaround:
    <script> 
        function DockRelocated(dock, args) { 
            if (dock._hitZone.get_uniqueName() == 'RadDockZone1') { 
                args.set_cancel(true); 
            } 
        } 
    </script> 
         
    <telerik:RadDockZone ID="RadDockZone1" runat="server" UniqueName="RadDockZone1"
        <telerik:RadDock ID="RadDock1" runat="server" Text="RadDock1" DockMode="Docked" OnClientDockPositionChanging="DockRelocated"
        </telerik:RadDock> 
        <telerik:RadDock ID="RadDock2" runat="server" Text="RadDock2" DockMode="Docked" OnClientDockPositionChanging="DockRelocated"
        </telerik:RadDock> 
        <telerik:RadDock ID="RadDock3" runat="server" Text="RadDock3" DockMode="Docked" OnClientDockPositionChanging="DockRelocated"
        </telerik:RadDock> 
    </telerik:RadDockZone> 
    <telerik:RadDockZone ID="RadDockZone2" runat="server" UniqueName="RadDockZone2"
    </telerik:RadDockZone> 

    Best regards,
    Ivan Pelovski
Back to Top