This is a migrated thread and some comments may be shown as answers.
Some questions regarding using dock
2 Answers 43 Views
This is a migrated thread and some comments may be shown as answers.
Alec
Top achievements
Rank 1
Alec asked on 09 Jul 2009, 03:47 AM
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 Answers, 1 is accepted

Sort by
0
Alec
Top achievements
Rank 1
answered on 09 Jul 2009, 07:32 AM
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!
0
Pero
Telerik team
answered on 10 Jul 2009, 09:00 AM
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.
Tags
Dock
Asked by
Alec
Top achievements
Rank 1
Answers by
Alec
Top achievements
Rank 1
Pero
Telerik team
Share this question
or