Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadDockZone doesnot recognize dynamically added RadDock

3 Answers 53 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Meng
Top achievements
Rank 1
Meng asked on 02 Sep 2014, 04:06 PM
Hi there,

I have added a RadDock to RadDockZone1 dynamically from code behind, then drag the RadDock to RadDockZone2, the docks count in RadDockZone2 still shows 0 (
RadDockZone2.Docks.Count). However, if I drag a static dock from RadDockZone1 to RadDockZone2, the dock count number in RadDockZone2 is correct. Please see the following code for details (RadDockTest.aspx and RadDockTest.aspx.cs). Any help is much appreciated. Thank you.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadDockTest.aspx.cs" Inherits="RadDockTest" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<head id="Head1" runat="server"> 
    <title>ASP.NET Dock Demo - AutoPostBack</title> 
     <!--[if lte IE 6]> 
     <style type="text/css"> 
     .raddockzone{height:250px} 
     </style> 
     <![endif]-->
     <style type="text/css"> 
          .qsfConsole { 
               margin-top: 19px; 
          } 
     </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" /> 
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" /> 
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" /> 
     <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="AutoPostBack enabled" 
                                   EnableRoundedCorners="true"> 
                                   <ContentTemplate> 
                                        This RadDock control will initiate postback when it is moved around the page. You 
                                        could create AsyncPostbackTrigger to replace the postback with an AJAX call. 
                                   </ContentTemplate> 
                              </telerik:RadDock> 
                              <telerik:RadDock runat="server" ID="RadDock2" Title="AutoPostBack disabled"
                                   EnableRoundedCorners="true"> 
                                   <ContentTemplate> 
                                        This RadDock control will NOT initiate postback when it is moved around the page. 
                                        However, if you post back the page using another control, the DockPositionChanged 
                                        event will be fired. 
                                   </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>
     <asp:Button ID="bt_SaveCustomInterfaces" runat="server" Text ="Save Interface" OnClick="bt_SaveCustomInterfaces_Click" />
    </form> 
</body> 
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI; 
  
  
public partial class RadDockTest : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        RadDock dock = CreateRadDock();
        RadDockZone1.Controls.Add(dock); 
    }
  
    protected void bt_SaveCustomInterfaces_Click(object sender, EventArgs e)
    {
        if (RadDockZone2.Docks.Count == 1)
        {
            foreach (RadDock _radDock in RadDockZone2.Docks)
            {
            }
        }
    }
  
    private RadDock CreateRadDock()
    {
        RadDock dock = new RadDock();
        dock.DockMode = DockMode.Docked;
        dock.UniqueName = Guid.NewGuid().ToString().Replace("-", "a");
        dock.ID = string.Format("RadDock{0}", dock.UniqueName);
        dock.Title = "Dock";
        dock.Text = string.Format("Added at {0}", DateTime.Now);
        dock.Width = Unit.Pixel(300);
  
        dock.Commands.Add(new DockCloseCommand());
        dock.Commands.Add(new DockExpandCollapseCommand());
  
        return dock;
    }
}

3 Answers, 1 is accepted

Sort by
0
Meng
Top achievements
Rank 1
answered on 02 Sep 2014, 06:18 PM
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadDockTest.aspx.cs" Inherits="RadDockTest" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<head id="Head1" runat="server"> 
    <title>ASP.NET Dock Demo - AutoPostBack</title> 
     <!--[if lte IE 6]> 
     <style type="text/css"> 
     .raddockzone{height:250px} 
     </style> 
     <![endif]-->
     <style type="text/css"> 
          .qsfConsole { 
               margin-top: 19px; 
          } 
     </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" /> 
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" /> 
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" /> 
     <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="AutoPostBack enabled" 
                                   EnableRoundedCorners="true"> 
                                   <ContentTemplate> 
                                        This RadDock control will initiate postback when it is moved around the page. You 
                                        could create AsyncPostbackTrigger to replace the postback with an AJAX call. 
                                   </ContentTemplate> 
                              </telerik:RadDock> 
                              <telerik:RadDock runat="server" ID="RadDock2" Title="AutoPostBack disabled"
                                   EnableRoundedCorners="true"> 
                                   <ContentTemplate> 
                                        This RadDock control will NOT initiate postback when it is moved around the page. 
                                        However, if you post back the page using another control, the DockPositionChanged 
                                        event will be fired. 
                                   </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>
     <asp:Button ID="Button1" runat="server" Text ="Add Dock" OnClick="bt_AddDock_Click" />
     <asp:Button ID="bt_SaveCustomInterfaces" runat="server" Text ="Save Interface" OnClick="bt_SaveCustomInterfaces_Click" />
    </form> 
</body> 
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI; 
  
  
public partial class RadDockTest : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
          
    }
  
    protected void bt_AddDock_Click(object sender, EventArgs e)
    {
        RadDock dock = CreateRadDock();
        RadDockZone1.Controls.Add(dock); 
    }
  
    protected void bt_SaveCustomInterfaces_Click(object sender, EventArgs e)
    {
        if (RadDockZone2.Docks.Count == 1)
        {
            foreach (RadDock _radDock in RadDockZone2.Docks)
            {
            }
        }
    }
  
    private RadDock CreateRadDock()
    {
        RadDock dock = new RadDock();
        dock.DockMode = DockMode.Docked;
        dock.UniqueName = Guid.NewGuid().ToString().Replace("-", "a");
        dock.ID = string.Format("RadDock{0}", dock.UniqueName);
        dock.Title = "Dock";
        dock.Text = string.Format("Added at {0}", DateTime.Now);
        dock.Width = Unit.Pixel(300);
  
        dock.Commands.Add(new DockCloseCommand());
        dock.Commands.Add(new DockExpandCollapseCommand());
  
        return dock;
    }
}
0
Accepted
Danail Vasilev
Telerik team
answered on 05 Sep 2014, 01:57 PM
Hi Meng,

If you want to create RadDock controls dynamically you should do it in the Init event of the page, in order to allow the RadDockLayout to automatically manage their positions. You could create RadDock controls in other events, but you should recreate them in Init when the next postback or AJAX request occurs.

More information on the matter as well as a live example is available in the Dock - Dynamically Created Docks online demo.

Regards,
Danail Vasilev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Meng
Top achievements
Rank 1
answered on 09 Sep 2014, 07:51 PM
Thank you very much for the help. Issue resolved after I added the DockState.
Tags
Dock
Asked by
Meng
Top achievements
Rank 1
Answers by
Meng
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or