Transferring dock

4 posts, 0 answers
  1. Joseph
    Joseph avatar
    21 posts
    Member since:
    Mar 2013

    Posted 17 May 2013 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 May 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joseph
    Joseph avatar
    21 posts
    Member since:
    Mar 2013

    Posted 21 May 2013 Link to this post

    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.
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 May 2013 Link to this post

    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.
Back to Top