Transferring dock

[Joseph]

Hi,

I have a requirement. There are two zones. On button click from client side, can I transfer the complete dock set to another zone?

Thanks,
Joseph.

[Princy]

Hi,
Try the following code snippet.
ASPX:

<asp:Button ID="Button1" runat="server" Text="click" OnClientClick="OnClientClick();" />
<telerik:RadDockLayout runat="server" ID="RadDockLayout1">
 <table>
  <tr>
   <td style="vertical-align: top">
     Docking Zone 1<br /><br />
   <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="270px" MinHeight="360px">
    <telerik:RadDock runat="server" ID="RadDock1" Title="RadDock" EnableAnimation="true" EnableRoundedCorners="true" DockMode="Docked">
     <ContentTemplate>
       This is a RadDock
     </ContentTemplate>
    </telerik:RadDock>
   </telerik:RadDockZone>
   </td>
  <td style="vertical-align: top">
   Docking Zone 2<br />
   <br />
  <telerik:RadDockZone runat="server" ID="RadDockZone2" Width="270px" MinHeight="360px">
  </telerik:RadDockZone>
   </td>
   </tr>
  </table>
</telerik:RadDockLayout>

JS:

function OnClientClick()

 {

    var zone1 = $find("<%= RadDockZone1.ClientID %>");

    var zone2 = $find("<%= RadDockZone2.ClientID %>");

    var dock = $find("<%= RadDock1.ClientID %>");

    if (dock.get_dockZoneID() != zone2.get_id())

      {

          zone2.dock(dock);//change the zone from zone1 to zone2


      }

     else

      {

          zone1.dock(dock);//change the zone from zone2 to zone1


      }

}

Thanks,
Princy.

[Joseph]

Princy, this is not my requirement. I think you are doing something else like interchanging zone as Still, few items are left behind in left zone.

[Princy]

Hi Joseph,

Please have a look at the following code I tried which works as expected.

ASPX:

<telerik:RadDockLayout ID="RadDockLayout1" runat="server">
    <table>
        <tr>
            <td style="vertical-align: top">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="200" Width="300"
                    Skin="Outlook">
                    <telerik:RadDock ID="RadDock1" runat="server" Text="RadDock1" Title="RadDock1" Height="80"
                        EnableRoundedCorners="true">
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock2" runat="server" DefaultCommands="All" Text="RadDock2"
                        Title="RadDock2" Height="80" EnableRoundedCorners="true">
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock3" runat="server" DefaultCommands="All" Text="RadDock3"
                        Title="RadDock3" Height="80" EnableRoundedCorners="true">
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </td>
            <td style="vertical-align: top">
                <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="200" Width="300"
                    Skin="Outlook">
                    <telerik:RadDock ID="RadDock4" runat="server" Text="RadDock4" Title="RadDock4" Height="80"
                        EnableRoundedCorners="true">
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock5" runat="server" DefaultCommands="All" Text="RadDock5"
                        Title="RadDock5" Height="80" EnableRoundedCorners="true">
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock6" runat="server" DefaultCommands="All" Text="RadDock6"
                        Title="RadDock6" Height="80" EnableRoundedCorners="true">
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </td>
        </tr>
    </table>
</telerik:RadDockLayout>
<br />
<br />
<telerik:RadButton ID="RadButton1" runat="server" Text="Click" OnClientClicked="OnClientClicked">
</telerik:RadButton>

JavaScript:

<script type="text/javascript">
    function OnClientClicked(sender, args) {
        var rightZone = $find('<%= RadDockZone2.ClientID%>');
        var leftZone = $find('<%= RadDockZone1.ClientID%>');
        var numberDocksInLeftZone = leftZone.get_docks().length;
        var docksArray = leftZone.get_docks();

        for (var i = 0; i < numberDocksInLeftZone; i++) {
            rightZone.dock(docksArray[i]);
        }
    }
</script>

Thanks,
Princy.