Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Dock / Creating DockableObjects programatically

Creating DockableObjects programatically

Article Info

Rating: Not rated

Article information

Article relates to

all versions of RadControls

Created by

Telerik

Last modified

March 19, 2008

Last modified by

Sophy, Telerik






HOW-TO
Create DockableObjects during runtime.

SOLUTION
Initially there are 2 DockingZones in the aspx file and a button which is used to create a new DockableObject everytime it is clicked. Please observe the code shown below in order to get idea how to create them. Here is a brief explanation:
Create a function CreateDockableObjects() which is called from Page.OnInit every time regardless of the postback. Session["MyDockableObjects"] contains the list of existing objects' IDs that are already added to the page. Initially it is empty and no object is created. If the ID is not enough to recreate the objects you should store all of the needed information for a dockable object in the Session. Do not store the objects itself!
 



ASPX
<%@ Register TagPrefix="radDk" Namespace="Telerik.WebControls" Assembly="RadDock" %> 
<%@ Page language="c#" Codebehind="WebForm21.aspx.cs" AutoEventWireup="false" Inherits="RadDockTest.WebForm21" %> 
 
<HTML> 
  <HEAD> 
        <style> 
            .LayoutTable { BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; WIDTH: 99%; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 350px }  
            .Label { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; WIDTH: 150px; PADDING-TOP: 3px }  
            </style> 
</HEAD> 
   <body class="BODY">  
      <form runat="server" method="post" ID="Form1">          
            <radDk:RadDockingManager id="RadDockingManager1" runat="server"></radDk:RadDockingManager> 
            <asp:Button ID="btnNewObject" Runat=server Text="Add New Object"></asp:Button> 
            <table class="LayoutTable" cellSpacing="1" cellPadding="1" border="0">  
            <tr> 
               <td width="8">                                                 
                        <radDk:RadDockingZone id=RadDockingZone1 runat="server" Width="100%" Height="100%">  
                  </radDk:RadDockingZone>                          
                    </td> 
               <td>&nbsp;</td> 
               <td width="8">                          
                        <radDk:RadDockingZone id=RadDockingZone2 runat="server" Width="100%" Height="100%">  
                        </radDk:RadDockingZone>                          
                    </td> 
            </tr> 
         </table>           
      </form> 
   </body> 
</HTML> 

C#
using System;  
using System.Collections;  
using System.ComponentModel;  
using System.Data;  
using System.Drawing;  
using System.Web;  
using System.Web.SessionState;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using System.Web.UI.HtmlControls;  
using Telerik.WebControls;  
 
namespace RadDockTest  
{  
   /// <summary>  
   /// Summary description for WebForm21.  
   /// </summary>  
   public class WebForm21 : System.Web.UI.Page  
   {  
      protected Telerik.WebControls.RadDockingManager RadDockingManager1;  
      protected System.Web.UI.WebControls.Button btnNewObject;  
      protected Telerik.WebControls.RadDockingZone RadDockingZone1;  
      protected Telerik.WebControls.RadDockingZone RadDockingZone2;  
     
      private void Page_Load(object sender, System.EventArgs e)  
      {  
         // Put user code to initialize the page here  
      }

      #region Web Form Designer generated code  
      override protected void OnInit(EventArgs e)  
      {  
         //  
         // CODEGEN: This call is required by the ASP.NET Web Form Designer.  
         //  
         InitializeComponent();  
         base.OnInit(e);  
 
         CreateDockableObjects();  
      }  
        
      /// <summary>  
      /// Required method for Designer support - do not modify  
      /// the contents of this method with the code editor.  
      /// </summary>  
      private void InitializeComponent()  
      {      
         this.btnNewObject.Click += new System.EventHandler(this.btnNewObject_Click);  
         this.Load += new System.EventHandler(this.Page_Load);  
 
      }
      #endregion  
 
      private void btnNewObject_Click(object sender, System.EventArgs e)  
      {  
         AddNewDockableObject();  
      }  
 
      void CreateDockableObjects()  
      {  
         /*
          * This function is called from Page.OnInit every time 
          * regardless of the postback. Session["MyDockableObjects"]
          * contains the list of existing objects' ids that are 
          * already added to the page. Initially it is empty and 
          * no object is created. If the ID is not enough to recreate 
          * the objects you should store in the Session all of the 
          * needed information for a dockable object. 
          * Do not store the objects itself.
          */ 
         object o = Session["MyDockableObjects"];  
         if (o is ArrayList)  
         {  
            ArrayList arrObjects = o as ArrayList;  
            for (int i = 0; i < arrObjects.Count; i++)  
            {  
               string id = arrObjects[i] as string;  
               if (id != null)  
               {  
                  CreateDockableObject(id);     
               }  
            }  
         }  
      }  
 
 
      void AddNewDockableObject()  
      {  
         ArrayList arrObjects = null;  
           
         // Get the list of already created object's ids - if any.  
         object o = Session["MyDockableObjects"];  
         if (o is ArrayList)  
         {  
            arrObjects = o as ArrayList;  
         }  
         else 
         {  
            arrObjects = new ArrayList();  
         }  
 
         if (arrObjects != null)  
         {  
            // Create an unique id  
            string id = "RadDockableObject" + arrObjects.Count.ToString();  
            // Create new object  
            CreateDockableObject(id);  
            // Store the new object id to the list of used ids  
            arrObjects.Add(id);  
            Session["MyDockableObjects"] = arrObjects;  
         }  
      }  
 
      RadDockableObject CreateDockableObject(string id)  
      {  
         // Create a new object with the specified id.  
         RadDockableObject dko = new RadDockableObject();  
         dko.ID = id;  
 
         RadDockingZone1.Controls.Add(dko);  
 
         return dko;  
      }  
   }  
}  
 
 


 


HOW-TO
Create RadDock during runtime.

SOLUTION

Initially there are 2 RadDockZones in the aspx file and a button which is used to create a new RadDock everytime it is clicked. Please observe the code shown below in order to get idea how to create them. 

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.


ASPX

<%@ 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 runat="server">  
    <title>Untitled Page</title>   
</head> 
<body> 
    <form id="form1" runat="server">  
        <asp:scriptmanager id="ScriptManager1" runat="server">  
        </asp:scriptmanager> 
        <asp:button id="btnNewDock" runat="server" text="Add New Object"></asp:button> 
        <telerik:raddocklayout id="RadDockLayout1" runat="server" onsavedocklayout="RadDockLayout1_SaveDockLayout" 
            onloaddocklayout="RadDockLayout1_LoadDockLayout">  
            <telerik:raddockzone runat="server" id="RadDockZone1" width="300" minheight="200" 
                style="float: left; margin-right: 20px;">  
            </telerik:raddockzone> 
            <telerik:raddockzone width="300" minheight="200" runat="server" id="RadDockZone2" 
                style="float: left;">  
            </telerik:raddockzone> 
        </telerik:raddocklayout> 
    </form> 
</body> 
</html> 

C#

using System;  
using System.Collections.Generic;  
using System.Configuration;  
using System.Data;  
using System.Web;  
using System.Web.Security;  
using System.Web.UI;  
using System.Web.UI.HtmlControls;  
using System.Web.UI.WebControls;  
using System.Web.UI.WebControls.WebParts;  
using Telerik.Web.UI;  
 
namespace RadDockTest  
{  
    /// <summary>  
    /// Summary description for WebForm21.  
    /// </summary>  
    public partial class CreateDynamicDocks : System.Web.UI.Page  
    {  
        private List<DockState> CurrentDockStates  
        {  
            get 
            {  
                //Store the info about the added docks in the session. For real life  
                // applications we recommend using database or other storage medium   
                // for persisting this information.  
                List<DockState> _currentDockStates = (List<DockState>)Session["CurrentDockStatesDynamicDocks"];  
                if (Object.Equals(_currentDockStates, null))  
                {  
                    _currentDockStates = new List<DockState>();  
                    Session["CurrentDockStatesDynamicDocks"] = _currentDockStates;  
                }  
                return _currentDockStates;  
            }  
            set 
            {  
                Session["CurrentDockStatesDynamicDocks"] = value;  
            }  
        }  
 
        private RadDock CreateRadDockFromState(DockState state)  
        {  
            RadDock dock = new RadDock();  
            dock.ID = string.Format("RadDock{0}", state.UniqueName);  
            dock.ApplyState(state);  
            return dock;  
        }  
 
 
        private void Page_Load(object sender, System.EventArgs e)  
        {  
            // Put user code to initialize the page here  
        }
        #region Web Form Designer generated code  
        override protected void OnInit(EventArgs e)  
        {  
            //  
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.  
            //  
            InitializeComponent();  
            base.OnInit(e);  
 
            CreateDocks();  
        }  
 
        /// <summary>  
        /// Required method for Designer support - do not modify  
        /// the contents of this method with the code editor.  
        /// </summary>  
        private void InitializeComponent()  
        {  
            this.btnNewDock.Click += new System.EventHandler(this.btnNewDock_Click);  
        }
        #endregion  
 
        private void btnNewDock_Click(object sender, System.EventArgs e)  
        {  
            CreateDock();  
        }  
 
        void CreateDocks()  
        {  
            //Recreate the docks in order to ensure their proper operation  
            for (int i = 0; i < CurrentDockStates.Count; i++)  
            {  
                RadDock dock = CreateRadDockFromState(CurrentDockStates[i]);  
                //We will just add the RadDock control to the RadDockLayout.  
                // You could use any other control for that purpose, just ensure  
                // that it is inside the RadDockLayout control.  
                // The RadDockLayout control will automatically move the RadDock  
                // controls to their corresponding zone in the LoadDockLayout  
                // event (see below).  
                RadDockLayout1.Controls.Add(dock);  
                //We want to save the dock state every time a dock is moved.  
            }  
        }  
 
        protected void RadDockLayout1_LoadDockLayout(object sender, DockLayoutEventArgs e)  
        {  
            //Populate the event args with the state information. The RadDockLayout control  
            // will automatically move the docks according that information.  
            foreach (DockState state in CurrentDockStates)  
            {  
                e.Positions[state.UniqueName] = state.DockZoneID;  
                e.Indices[state.UniqueName] = state.Index;  
            }  
        }  
 
        protected void RadDockLayout1_SaveDockLayout(object sender, DockLayoutEventArgs e)  
        {  
            //Save the dock state in the session. This will enable us   
            // to recreate the dock in the next Page_Init.   
            CurrentDockStates = RadDockLayout1.GetRegisteredDocksState();  
        }  
 
        RadDock CreateDock()  
        {  
            int docksCount = CurrentDockStates.Count;  
 
            RadDock dock = new RadDock();  
            dock.UniqueName = Guid.NewGuid().ToString();  
            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);  
 
            RadDockZone1.Controls.Add(dock);  
 
            return dock;  
        }  
    }  
} 

Comments

There are no comments yet.
If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.