RadDockZone doesnot recognize dynamically added RadDock

4 posts, 1 answers
  1. Meng
    Meng avatar
    57 posts
    Member since:
    Apr 2011

    Posted 02 Sep 2014 Link to this post

    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;
        }
    }
  2. Meng
    Meng avatar
    57 posts
    Member since:
    Apr 2011

    Posted 02 Sep 2014 Link to this post

    <%@ 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;
        }
    }
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 05 Sep 2014 Link to this post

    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.

     
  5. Meng
    Meng avatar
    57 posts
    Member since:
    Apr 2011

    Posted 09 Sep 2014 in reply to Danail Vasilev Link to this post

    Thank you very much for the help. Issue resolved after I added the DockState.
Back to Top