Some questions regarding using dock

3 posts, 0 answers
  1. Alec
    Alec avatar
    43 posts
    Member since:
    Mar 2009

    Posted 08 Jul 2009 Link to this post

    Question:

    1. How can I restrict the number of dock can be mapped to a zone? Apparently I could drag and drop any number of dock to a zone, but I only want to have one.

    2. Is it possible to do something like, dragging a literal text over a zone, but when it's dropped or hover onto a zone, it shows an image? My intention is to drag and drop image onto a zone.
  2. Alec
    Alec avatar
    43 posts
    Member since:
    Mar 2009

    Posted 09 Jul 2009 Link to this post

    This is my code:

    <telerik:RadDockLayout runat="server" ID="RadDockLayout1">  
         <div class="signature">  
               <asp:Panel ID="pnlPreview" runat="server"></asp:Panel> 
         </div> 
                             
          <div class="preview">  
                <telerik:RadDockZone ID="radDockZone" runat="server" Orientation="Vertical"></telerik:RadDockZone> 
          </div> 
    </telerik:RadDockLayout> 

    <

     

    script type="text/javascript">

     

     

         function SetHandleDock(dock, args)

     

              {

                dock.set_handle(document.getElementById(dock.get_id()));

               }

     

    </script>

     

     

     

     

    <

     

    script type="text/javascript">

     

     

         function checkMaximumDock(dock, args) {

     

     

                var zone2 = $find(dock.get_DockZoneID());

     

     

                if (dock.get_DockZoneID() == "zone0") {

     

     

                      var zone1 = $find("RadDockZone1");

     

     

                      if (zone2.get_Docks().length >= 2) {

     

                          zone1.dock(dock);

                          alert(

    "RadDockZone can have only 1 dock!");

     

                        }

                    }

                }

     

    </script>

     


    So, i am building up raddockzone 1 in code behind:

    //in a for loop, creating zones dynamically  
    RadDockZone zone = new RadDockZone();  
    zone.ID = "zone" + counter;  
    pnlPreview.Controls.Add(zone);  
     

    and then i am also binding a list of docks to second zone in code behind:

    RadDock radDock = new RadDock();  
    radDock.DockMode = DockMode.Docked;  
    radDock.OnClientInitialize = "SetHandleDock";  
    radDock.DockHandle = DockHandle.None;  
     
    radDock.ID = "radDock" + lzContent.LayoutZoneContentId;  
    radDock.Title = lzContent.Title;  
    radDock.OnClientDockPositionChanged = "checkMaximumDock";  
     
    Literal ltrContent = new Literal();  
    ltrContent.Text = lzContent.Title;  
    radDock.Controls.Add(ltrContent);  
     
    radDockZone.Controls.Add(radDock); 

    Pls help!, Thanks!
  3. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 10 Jul 2009 Link to this post

    Hi Alec,

    In reference to your questions:

    1. This can be done via JavaScript. When a RadDock is dropped onto a zone (attach an event handler on the OnClientDragEnd client-side event) if the current number of docks is greater than 1 (for example) return the dock to its original zone. I have created a simple project to demonstrate this functionality. Here is the source code:
      <%@ 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"> 
      <html xmlns="http://www.w3.org/1999/xhtml"
      <head id="Head1" runat="server"
          <title></title
      </head> 
      <body> 
          <form id="form1" runat="server"
          <asp:ScriptManager ID="ScriptManager1" runat="server"
          </asp:ScriptManager> 
          <telerik:RadDockLayout runat="server" ID="RadDockLayout1"
              <telerik:RadDockZone ID="RadDockZone1" runat="server" Width="300px" Height="600px" 
                  Orientation="Vertical" Style="float: left; margin-right: 15px;"
                  <telerik:RadDock ID="RadDock1" runat="server" Width="300px" DockMode="Docked" Title="RadDock-Title 1" 
                      OnClientDragEnd="OnDockDropped" OnClientDragStart="OnClientStartDrag"
                      <ContentTemplate> 
                          <br /> 
                          <br /> 
                          <br /> 
                          <br /> 
                          <br /> 
                          CONTENT 
                          <br /> 
                          <br /> 
                          <br /> 
                          <br /> 
                          <br /> 
                      </ContentTemplate> 
                  </telerik:RadDock> 
              </telerik:RadDockZone> 
              <telerik:RadDockZone ID="RadDockZone2" runat="server" Width="300px" Height="600px" 
                  Orientation="Vertical" Style="float: left;"
                  <telerik:RadDock ID="RadDock2" runat="server" Width="300px" DockMode="Docked" Title="RadDock-Title 2" 
                      OnClientDragEnd="OnDockDropped" OnClientDragStart="OnClientStartDrag"
                      <ContentTemplate> 
                          <br /> 
                          <br /> 
                          <br /> 
                          <br /> 
                          <br /> 
                          CONTENT 
                          <br /> 
                          <br /> 
                          <br /> 
                          <br /> 
                          <br /> 
                      </ContentTemplate> 
                  </telerik:RadDock> 
              </telerik:RadDockZone> 
              <telerik:RadDockZone ID="RadDockZone3" runat="server" Width="300px" Height="600px" 
                  Orientation="Vertical" Style="float: left;"
              </telerik:RadDockZone> 
          </telerik:RadDockLayout> 
       
          <script type="text/javascript"
       
              var originalZone; 
              function OnClientStartDrag(dock, args) 
              { 
                  originalZone = $find(dock.get_dockZoneID()); 
                  //alert(dock.get_dockZoneID()); 
              } 
           
              function OnDockDropped(dock, args) 
              { 
                  var droppingZone = $find(dock.get_dockZoneID()); 
                   
                   
                  if (droppingZone.get_docks().length > 1) 
                  { 
                      originalZone.dock(dock); 
                  } 
              }  
          </script> 
       
          </form> 
      </body> 
      </html> 
       
    2. RadDockZone could only contain objects of type RadDock. To achieve the functionality you have described below, our suggestion is to add text in the dock's content and set the text as a drag handle. When the dock is dragged and dropped in the zone the text can be changed to an image using an AJAX request. 

    Greetings,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top