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

RadDockLayout, RadZones, RadDock, User-Control, AJAX in Code-Behind

2 Answers 318 Views
Dock
This is a migrated thread and some comments may be shown as answers.
NMQA
Top achievements
Rank 2
NMQA asked on 17 May 2014, 09:58 PM
Hi Telerik Team,

My goal is to create a RadDockLayout, RadZones and several RadDocks dynamically. Additionally my RadDocks' content are user-controls that I am dynamically loading at run-time. And all the controls mentioned are wrapped into Update Panels.

What I want to achieve is to have no RadControls defined in the Code In-Front and rather have everything in the code-behind (C#).

My problem is that my controls are disappearing on subsequent post-back (which are initiated by my user-controls). I am aware that I need to re-create the controls on the Page_Load(), but no luck.

WORKING VERSION
01.<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AA.aspx.cs" Inherits="Dashboard.AA" %>
02. 
03.<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
04.<!DOCTYPE html>
05. 
07.<head runat="server">
08.    <title></title>
09.     
10.</head>
11.<body>
12.    <form id="form1" runat="server">
13.        <asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager>
14.        <asp:Button ID="btnAddWidget" Text="Add Signs Widget" OnClick="btnAddWidget_Click" runat="server" />
15.        <asp:Button ID="btnAddTimer" Text="Add Timer Widget" OnClick="btnAddTimer_Click" runat="server" />
16.        <asp:UpdatePanel runat="server" ID="UpdatePanel2" ChildrenAsTriggers="false" UpdateMode="Conditional">
17.            <ContentTemplate>
18.                <telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout"
19.                    OnLoadDockLayout="RadDockLayout1_LoadDockLayout">
20.                    <table cellpadding="0" cellspacing="0" width="100%">
21.                        <tr>
22.                            <td style="width: 50%; vertical-align: top">
23.                                <telerik:RadDockZone runat="server" BackColor="#fbfbfb" BorderStyle="Dotted" ID="RadDockZone1" MinWidth="300" Width="98%" MinHeight="300">
24.                                </telerik:RadDockZone>
25.                            </td>
26.                            <td style="width: 50%; vertical-align: top">
27.                                <telerik:RadDockZone runat="server" BorderStyle="Dotted" ID="RadDockZone2" MinWidth="300" Width="100%" MinHeight="300">
28.                                </telerik:RadDockZone>
29.                            </td>
30.                        </tr>
31.                    </table>
32.                </telerik:RadDockLayout>
33.            </ContentTemplate>
34.            <Triggers>
35.                <asp:AsyncPostBackTrigger ControlID="btnAddWidget" EventName="Click"></asp:AsyncPostBackTrigger>
36.                <asp:AsyncPostBackTrigger ControlID="btnAddTimer" EventName="Click"></asp:AsyncPostBackTrigger>
37.            </Triggers>
38.        </asp:UpdatePanel>
39. 
40.    </form>
41.</body>
42.</html>

001.using System;
002.using System.Collections.Generic;
003.using System.Web.UI;
004.using System.Web.UI.WebControls;
005.using Telerik.Web.UI;
006. 
007.namespace Dashboard
008.{
009.    public partial class AA : System.Web.UI.Page
010.    {
011.        private const bool DockStateCleared = false;
012. 
013.        private List<DockState> CurrentDockStates
014.        {
015.            get
016.            {
017.                //Store the info about the added docks in the session. For real life
018.                // applications we recommend using database or other storage medium
019.                // for persisting this information.
020.                List<DockState> _currentDockStates = (List<DockState>)Session["CurrentDockStatesMyPortal"];
021.                if (Object.Equals(_currentDockStates, null))
022.                {
023.                    _currentDockStates = new List<DockState>();
024.                    Session["CurrentDockStatesMyPortal"] = _currentDockStates;
025.                }
026.                return _currentDockStates;
027.            }
028.            set
029.            {
030.                Session["CurrentDockStatesMyPortal"] = value;
031.            }
032.        }
033. 
034.        private RadDock CreateRadDockFromState(DockState state)
035.        {
036.            RadDock dock = new RadDock();
037.            dock.DockMode = DockMode.Docked;
038.            dock.ID = string.Format("RadDock{0}", state.UniqueName);
039.            dock.ApplyState(state);
040.            dock.Commands.Add(new DockCloseCommand());
041.            //dock.Commands.Add(new DockExpandCollapseCommand());
042. 
043.            return dock;
044.        }
045. 
046.        protected void Page_Init(object sender, EventArgs e)
047.        {
048.            //Recreate the docks in order to ensure their proper operation
049.            for (int i = 0; i < CurrentDockStates.Count; i++)
050.            {
051.                // clears the closed docks from the dock state, this line is
052.                // optional and its purpose is to keep the dock state as small
053.                // as possible
054.                if (CurrentDockStates[i].Closed == true) continue;
055. 
056.                RadDock dock = CreateRadDockFromState(CurrentDockStates[i]);
057.                //We will just add the RadDock control to the RadDockLayout.
058.                // You could use any other control for that purpose, just ensure
059.                // that it is inside the RadDockLayout control.
060.                // The RadDockLayout control will automatically move the RadDock
061.                // controls to their corresponding zone in the LoadDockLayout
062.                // event (see below).
063.                RadDockLayout1.Controls.Add(dock);
064.                //We want to save the dock state every time a dock is moved.
065.                CreateSaveStateTrigger(dock);
066.                //Load the selected widget
067.                LoadWidget(dock);
068. 
069.                // prevents the rendering of closed docks, used for improving
070.                // performance
071.                if (CurrentDockStates[i].Closed == true)
072.                {
073.                    dock.Visible = false;
074.                }
075.            }
076.        }
077.         
078.        protected void Page_Load(object sender, EventArgs e)
079.        {
080. 
081.        }
082. 
083.        protected void RadDockLayout1_LoadDockLayout(object sender, Telerik.Web.UI.DockLayoutEventArgs e)
084.        {
085.            //Populate the event args with the state information. The RadDockLayout control
086.            // will automatically move the docks according that information.
087.            foreach (DockState state in CurrentDockStates)
088.            {
089.                e.Positions[state.UniqueName] = state.DockZoneID;
090.                e.Indices[state.UniqueName] = state.Index;
091.            }
092.        }
093. 
094.        protected void RadDockLayout1_SaveDockLayout(object sender, Telerik.Web.UI.DockLayoutEventArgs e)
095.        {
096.            if (!DockStateCleared)
097.            {
098.                //Save the dock state in the session. This will enable us
099.                // to recreate the dock in the next Page_Init.
100.                CurrentDockStates = RadDockLayout1.GetRegisteredDocksState();
101.            }
102.            else
103.            {
104.                //the clear state button was clicked, so we refresh the page and start over.
105.                Response.Redirect(Request.RawUrl, false);
106.            }
107.        }
108. 
109.        protected void btnAddWidget_Click(object sender, EventArgs e)
110.        {
111.            AddWidget("SimpleUserControl");
112.        }
113. 
114.        private void AddWidget(string widgetName)
115.        {
116.            RadDock radDock = CreateRadDock();
117.            //find the target zone and add the new dock there
118.            RadDockZone radDockZone = RadDockZone2; //(RadDockZone)this.Master.FindControl("ContentPlaceHolder1").FindControl(DropDownZone.SelectedItem.Text);
119. 
120.            //adding the dock to the dock layout and then docking it to the zone to avoid ViewState issues on subsequent postback
121.            RadDockLayout1.Controls.Add(radDock);
122.            radDock.Dock(radDockZone);
123. 
124.            CreateSaveStateTrigger(radDock);
125. 
126.            // Ensure that the dock is opened, should be used when closed docks are
127.            // cleared from the dock state on Page_Init
128.            radDock.Closed = false;
129. 
130.            //Load the selected widget in the RadDock control
131.            radDock.Tag = widgetName;
132.            LoadWidget(radDock);
133.        }
134. 
135.        private void LoadWidget(RadDock dock)
136.        {
137.            if (string.IsNullOrEmpty(dock.Tag) || dock.Closed)
138.            {
139.                return;
140.            }
141. 
142.            Control widget = null;
143.            switch (dock.Tag)
144.            {
145.                case "SimpleUserControl":
146.                    {
147.                        SimpleControl horoscopeControl = new SimpleControl();
148.                        horoscopeControl.ID = "myHoros";
149.                        widget = horoscopeControl;
150.                    }
151.                    break;
152.                case "MyTimerControl":
153.                    {
154.                        Timer timerControl = new Timer();
155.                        timerControl.ID = "coolTimer";
156.                        widget = timerControl;
157.                    }
158.                    break;
159.            }
160.            if (widget != null)
161.            {
162.                dock.ContentContainer.Controls.Add(widget);
163.            }
164.        }
165. 
166.        private void CreateSaveStateTrigger(RadDock dock)
167.        {
168.            //Ensure that the RadDock control will initiate postback
169.            // when its position changes on the client or any of the commands is clicked.
170.            //Using the trigger we will "ajaxify" that postback.
171.            dock.AutoPostBack = true;
172.            dock.CommandsAutoPostBack = true;
173. 
174.            AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger();
175.            saveStateTrigger.ControlID = dock.ID;
176.            saveStateTrigger.EventName = "DockPositionChanged";
177.            UpdatePanel2.Triggers.Add(saveStateTrigger);
178. 
179.            saveStateTrigger = new AsyncPostBackTrigger();
180.            saveStateTrigger.ControlID = dock.ID;
181.            saveStateTrigger.EventName = "Command";
182.            UpdatePanel2.Triggers.Add(saveStateTrigger);
183.        }
184. 
185.        private RadDock CreateRadDock()
186.        {
187.            RadDock dock = new RadDock();
188.            dock.DockMode = DockMode.Docked;
189.            dock.UniqueName = Guid.NewGuid().ToString().Replace("-", "a");
190.            dock.ID = string.Format("RadDock{0}", dock.UniqueName);
191.            dock.Title = "Dock";
192.            dock.Text = string.Format("Added at {0}", DateTime.Now);
193.            dock.Width = Unit.Pixel(100);
194.            dock.Height = Unit.Pixel(400);
195.            dock.Commands.Add(new DockCloseCommand());
196.            //dock.Commands.Add(new DockExpandCollapseCommand());
197. 
198.            return dock;
199.        }
200. 
201.        protected void btnAddTimer_Click(object sender, EventArgs e)
202.        {
203.            AddWidget("MyTimerControl");
204.        }
205.    }
206.}

User-Controls
01.using System;
02.using System.Collections.Generic;
03.using System.Web.UI;
04.using System.Web.UI.WebControls;
05. 
06.namespace Dashboard
07.{
08.    public partial class SimpleControl : System.Web.UI.UserControl
09.    {
10.        public List<string> SignList
11.        {
12.            get
13.            {
14.                var signList = new List<string>();
15.                signList.Add("Virgo");
16.                signList.Add("Libra");
17.                signList.Add("Scorpio");
18.                signList.Add("Tauro");
19.                return signList;
20.            }
21.        }
22. 
23.        protected void Page_Init(object sender, EventArgs e)
24.        {
25.            //Drop Down List
26.            DropDownList ddlHoroscope = new DropDownList();
27.            ddlHoroscope.ID = "DropDownSigns";
28.            ddlHoroscope.EnableViewState = false;
29.            ddlHoroscope.AutoPostBack = true;
30.            ddlHoroscope.Width = Unit.Pixel(180);
31.            ddlHoroscope.SelectedIndexChanged += ddlHoroscope_SelectedIndexChanged;
32.            ddlHoroscope.DataSource = SignList;
33.            ddlHoroscope.DataBind();
34.            ddlHoroscope.SelectedIndex = 0;
35.            this.Controls.Add(ddlHoroscope);
36. 
37.            //Literal
38.            Literal horoscopeLiteral = new Literal();
39.            horoscopeLiteral.ID = "Horoscope";
40.            this.Controls.Add(horoscopeLiteral);
41. 
42.            //Update Panel
43.            UpdatePanel updatePanelHoros = new UpdatePanel();
44.            updatePanelHoros.ID = "UpdatePanelHoroscopes";
45.            updatePanelHoros.UpdateMode = UpdatePanelUpdateMode.Conditional;
46.            updatePanelHoros.ContentTemplateContainer.Controls.Add(horoscopeLiteral);
47.            AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
48.            trigger.ControlID = ddlHoroscope.UniqueID;
49.            trigger.EventName = "SelectedIndexChanged";
50.            updatePanelHoros.Triggers.Add(trigger);
51.            this.Controls.Add(updatePanelHoros);
52.        }
53. 
54.        protected void Page_Load(object sender, EventArgs e)
55.        {
56.            if (!IsPostBack)
57.            {
58. 
59.            }
60.            DisplayHoroscope();
61.        }
62. 
63.        private void DisplayHoroscope()
64.        {
65.            var horosLabel = this.FindControl("Horoscope") as Literal;
66.            var horosDDL = this.FindControl("DropDownSigns") as DropDownList;
67.            if (horosLabel != null && horosDDL != null)
68.            {
69.                horosLabel.Text = horosDDL.SelectedItem.Text;
70.            }
71.        }
72. 
73.        void ddlHoroscope_SelectedIndexChanged(object sender, EventArgs e)
74.        {
75.            DisplayHoroscope();
76.        }
77.    }
78.}

01.using System;
02.using System.Web.UI;
03.using System.Web.UI.WebControls;
04. 
05.namespace Dashboard
06.{
07.    public partial class Timer : System.Web.UI.UserControl
08.    {
09. 
10.        protected void Page_Init(object sender, EventArgs e)
11.        {
12.            System.Web.UI.Timer myTimer = new System.Web.UI.Timer();
13.            myTimer.ID = "Timer1";
14.            myTimer.Interval = 1000;
15.            myTimer.Tick += myTimer_Tick;
16.            this.Controls.Add(myTimer);
17. 
18.            Label myLabel = new Label();
19.            myLabel.ID = "lblTime";
20.            this.Controls.Add(myLabel);
21. 
22.            //Update Panel
23.            UpdatePanel updatePanelTimer = new UpdatePanel();
24.            updatePanelTimer.ID = "UpdatePanelTimer";
25.            updatePanelTimer.UpdateMode = UpdatePanelUpdateMode.Conditional;
26.            updatePanelTimer.ContentTemplateContainer.Controls.Add(myTimer);
27.            updatePanelTimer.ContentTemplateContainer.Controls.Add(myLabel);
28.            this.Controls.Add(updatePanelTimer);
29.        }
30. 
31.        void myTimer_Tick(object sender, EventArgs e)
32.        {
33.            DisplayTime();
34.        }
35. 
36.        private void DisplayTime()
37.        {
38.            var timerLabel = this.FindControl("lblTime") as Label;
39.            if (timerLabel != null)
40.            {
41.                timerLabel.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString();
42.            }
43.        }
44.         
45.        protected void Page_Load(object sender, EventArgs e)
46.        {
47.            DisplayTime();
48.        }
49. 
50.    }
51.}


NOT WORKING VERSION
01.<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AA.aspx.cs" Inherits="Dashboard.AA" %>
02.<!DOCTYPE html>
03. 
05.    <head runat="server">
06.        <title></title>
07.        <style>
08.            .myStyle {
09.                background: #f5f4e8;
10.                float: left;
11.                margin-bottom: 20px;
12.                margin-right: 70px;
13.            }
14. 
15.            .myStyle2 {
16.                background: #d5f0fa;
17.                float: left;
18.                margin-bottom: 20px;
19.                margin-right: 70px;
20.            }
21.        </style>
22.    </head>
23.    <body>
24.        <form id="form1" runat="server">
25.            <asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager>
26.        </form>
27.    </body>
28.</html>

001.using System;
002.using System.Collections.Generic;
003.using System.Web.UI;
004.using System.Web.UI.WebControls;
005.using Telerik.Web.UI;
006. 
007.namespace Dashboard
008.{
009.    public partial class AA : Page
010.    {
011.        private bool _dockStateCleared = false;
012.         
013.        private AsyncPostBackTrigger _asyncPostBackTriggerAddTimerWidget;
014.        private AsyncPostBackTrigger _asyncPostBackTriggerAddWidget;
015. 
016.        private Button _buttonAddTimer;
017.        private Button _buttonAddWidget;
018.        private RadDockLayout _radDockLayoutOne;
019.        private RadDockZone _radDockZoneOne;
020.        private RadDockZone _radDockZoneTwo;
021.        private UpdatePanel _updatePanelTwo;
022.        private RadDock _radDock;
023. 
024.        protected void Page_Init(object sender, EventArgs e)
025.        {
026.            #region Layout
027. 
028.            _radDockLayoutOne = new RadDockLayout
029.            {
030.                ID = "RadDockLayout1"
031.            };
032. 
033.            //Layout Events
034.            _radDockLayoutOne.SaveDockLayout += _radDockLayoutOne_SaveDockLayout;
035.            _radDockLayoutOne.LoadDockLayout += _radDockLayoutOne_LoadDockLayout;
036.             
037.            // Add Layout to Page
038.            form1.Controls.Add(_radDockLayoutOne);
039.            #endregion
040. 
041.            #region Zone
042. 
043.            // Zone 1
044.            _radDockZoneOne = new RadDockZone
045.            {
046.                ID = "RadDockZone1",
047.                BorderStyle = BorderStyle.Dotted,
048.                MinWidth = Unit.Pixel(300),
049.                Width = Unit.Percentage(98.0),
050.                MinHeight = Unit.Pixel(300),
051.                CssClass = "myStyle",
052.                ToolTip = "Zone 1"
053.            };
054.            // Add Zone 1 to Page
055.            form1.Controls.Add(_radDockZoneOne);
056. 
057.            // Zone 2
058.            _radDockZoneTwo = new RadDockZone
059.            {
060.                ID = "RadDockZone2",
061.                BorderStyle = BorderStyle.Dotted,
062.                MinWidth = Unit.Pixel(300),
063.                Width = Unit.Percentage(98.0),
064.                MinHeight = Unit.Pixel(300),
065.                CssClass = "myStyle2"
066.            };
067.            // Add Zone 2 to Page
068.            form1.Controls.Add(_radDockZoneTwo);
069. 
070.            #endregion
071. 
072.            #region Buttons
073. 
074.            // Button Widget
075.            _buttonAddWidget = new Button
076.            {
077.                ID = "btnAddWidget",
078.                Text = "Add Signs Control"
079.            };
080.            _buttonAddWidget.Click += _buttonAddWidget_Click;
081.            // Add Button to Page
082.            form1.Controls.Add(_buttonAddWidget);
083. 
084.            //Button Timer
085.            _buttonAddTimer = new Button
086.            {
087.                ID = "btnAddTimer",
088.                Text = "Add Timer Control"
089.            };
090.            _buttonAddTimer.Click += _buttonAddTimer_Click;
091.            // Add Button to Page
092.            form1.Controls.Add(_buttonAddTimer);
093.            #endregion
094. 
095.            #region Update Panel
096. 
097.            _updatePanelTwo = new UpdatePanel
098.            {
099.                ID = "UpdatePanel2",
100.                ChildrenAsTriggers = false,
101.                UpdateMode = UpdatePanelUpdateMode.Conditional
102.            };
103.            _updatePanelTwo.ContentTemplateContainer.Controls.Add(_radDockLayoutOne);
104.            _updatePanelTwo.ContentTemplateContainer.Controls.Add(_radDockZoneOne);
105.            _updatePanelTwo.ContentTemplateContainer.Controls.Add(_radDockZoneTwo);
106. 
107.            _asyncPostBackTriggerAddTimerWidget = new AsyncPostBackTrigger
108.            {
109.                ControlID = _buttonAddWidget.UniqueID,
110.                EventName = "Click"
111.            };
112.            _updatePanelTwo.Triggers.Add(_asyncPostBackTriggerAddTimerWidget);
113. 
114.            _asyncPostBackTriggerAddWidget = new AsyncPostBackTrigger
115.            {
116.                ControlID = _buttonAddTimer.UniqueID,
117.                EventName = "Click"
118.            };
119.            _updatePanelTwo.Triggers.Add(_asyncPostBackTriggerAddWidget);
120.            _updatePanelTwo.Update();
121.            form1.Controls.Add(_updatePanelTwo);
122. 
123.            #endregion
124. 
125.           
126.             
127.        }
128. 
129.        protected void Page_Load(object sender, EventArgs e)
130.        {
131.            #region Recreate the docks in order to ensure their proper operation
132.            //Recreate the docks in order to ensure their proper operation
133.            for (int i = 0; i < CurrentDockStates.Count; i++)
134.            {
135.                // clears the closed docks from the dock state, this line is
136.                // optional and its purpose is to keep the dock state as small
137.                // as possible
138.                if (CurrentDockStates[i].Closed == true) continue;
139. 
140.                RadDock dock = CreateRadDockFromState(CurrentDockStates[i]);
141.                //We will just add the RadDock control to the RadDockLayout.
142.                // You could use any other control for that purpose, just ensure
143.                // that it is inside the RadDockLayout control.
144.                // The RadDockLayout control will automatically move the RadDock
145.                // controls to their corresponding zone in the LoadDockLayout
146.                // event (see below).
147.                _radDockLayoutOne.Controls.Add(dock);
148.                //We want to save the dock state every time a dock is moved.
149.                CreateSaveStateTrigger(dock);
150.                //Load the selected widget
151.                LoadWidget(dock);
152. 
153.                // prevents the rendering of closed docks, used for improving
154.                // performance
155.                if (CurrentDockStates[i].Closed == true)
156.                {
157.                    dock.Visible = false;
158.                }
159.            }
160.            #endregion
161.             
162.        }
163. 
164.        void _buttonAddTimer_Click(object sender, EventArgs e)
165.        {
166.            AddWidget("MyTimerControl");
167.        }
168. 
169.        void _buttonAddWidget_Click(object sender, EventArgs e)
170.        {
171.            AddWidget("SimpleUserControl");
172.        }
173. 
174.        void _radDockLayoutOne_LoadDockLayout(object sender, DockLayoutEventArgs e)
175.        {
176.            //Populate the event args with the state information. The RadDockLayout control
177.            // will automatically move the docks according that information.
178.            foreach (DockState state in CurrentDockStates)
179.            {
180.                e.Positions[state.UniqueName] = state.DockZoneID;
181.                e.Indices[state.UniqueName] = state.Index;
182.            }
183.        }
184. 
185.        void _radDockLayoutOne_SaveDockLayout(object sender, DockLayoutEventArgs e)
186.        {
187.            if (!_dockStateCleared)
188.            {
189.                //Save the dock state in the session. This will enable us
190.                // to recreate the dock in the next Page_Init.
191.                if (_radDockLayoutOne != null) CurrentDockStates = _radDockLayoutOne.GetRegisteredDocksState();
192.            }
193.            else
194.            {
195.                //the clear state button was clicked, so we refresh the page and start over.
196.                Response.Redirect(Request.RawUrl, false);
197.            }
198.        }
199. 
200.        private List<DockState> CurrentDockStates
201.        {
202.            get
203.            {
204.                //Store the info about the added docks in the session. For real life
205.                // applications we recommend using database or other storage medium
206.                // for persisting this information.
207.                var currentDockStates = (List<DockState>) Session["CurrentDockStatesMyPortal"];
208.                if (Equals(currentDockStates, null))
209.                {
210.                    currentDockStates = new List<DockState>();
211.                    Session["CurrentDockStatesMyPortal"] = currentDockStates;
212.                }
213.                return currentDockStates;
214.            }
215.            set { Session["CurrentDockStatesMyPortal"] = value; }
216.        }
217. 
218.        private RadDock CreateRadDockFromState(DockState state)
219.        {
220.            var dock = new RadDock
221.            {
222.                DockMode = DockMode.Docked,
223.                ID = string.Format("RadDock{0}", state.UniqueName)
224.            };
225.            dock.ApplyState(state);
226.            dock.Commands.Add(new DockCloseCommand());
227.            //dock.Commands.Add(new DockExpandCollapseCommand());
228. 
229.            return dock;
230.        }
231. 
232.        private void AddWidget(string widgetName)
233.        {
234.            _radDock = CreateRadDock();
235.            //find the target zone and add the new dock there
236.            RadDockZone radDockZone = _radDockZoneTwo;
237.            //(RadDockZone)this.Master.FindControl("ContentPlaceHolder1").FindControl(DropDownZone.SelectedItem.Text);
238. 
239.            //adding the dock to the dock layout and then docking it to the zone to avoid ViewState issues on subsequent postback
240.            if (_radDockLayoutOne != null) _radDockLayoutOne.Controls.Add(_radDock);
241.            _radDock.Dock(radDockZone);
242. 
243.            CreateSaveStateTrigger(_radDock);
244. 
245.            // Ensure that the dock is opened, should be used when closed docks are
246.            // cleared from the dock state on Page_Init
247.            _radDock.Closed = false;
248. 
249.            //Load the selected widget in the RadDock control
250.            _radDock.Tag = widgetName;
251.            LoadWidget(_radDock);
252.        }
253. 
254.        private void LoadWidget(RadDock dock)
255.        {
256.            if (string.IsNullOrEmpty(dock.Tag) || dock.Closed)
257.            {
258.                return;
259.            }
260. 
261.            Control widget = null;
262.            switch (dock.Tag)
263.            {
264.                case "SimpleUserControl":
265.                {
266.                    var horoscopeControl = new SimpleControl();
267.                    horoscopeControl.ID = "myHoros";
268.                    widget = horoscopeControl;
269.                }
270.                    break;
271.                case "MyTimerControl":
272.                {
273.                    var timerControl = new Timer();
274.                    timerControl.ID = "coolTimer";
275.                    widget = timerControl;
276.                }
277.                    break;
278.            }
279.            if (widget != null)
280.            {
281.                dock.ContentContainer.Controls.Add(widget);
282.                //_updatePanelTwo.ContentTemplateContainer.Controls.Add(dock);
283.            }
284.        }
285. 
286.        private void CreateSaveStateTrigger(RadDock dock)
287.        {
288.            //Ensure that the RadDock control will initiate postback
289.            // when its position changes on the client or any of the commands is clicked.
290.            //Using the trigger we will "ajaxify" that postback.
291.            dock.AutoPostBack = true;
292.            dock.CommandsAutoPostBack = true;
293. 
294.            if (_updatePanelTwo != null)
295.            {
296.                var saveStateTrigger = new AsyncPostBackTrigger
297.                    {
298.                        ControlID = dock.ID,
299.                        EventName = "DockPositionChanged"
300.                    };
301.                _updatePanelTwo.Triggers.Add(saveStateTrigger);
302. 
303.                saveStateTrigger = new AsyncPostBackTrigger
304.                {
305.                    ControlID = dock.ID,
306.                    EventName = "Command"
307.                };
308.                _updatePanelTwo.Triggers.Add(saveStateTrigger);
309.            }
310.        }
311. 
312.        private RadDock CreateRadDock()
313.        {
314.            var dock = new RadDock
315.            {
316.                DockMode = DockMode.Docked,
317.                UniqueName = Guid.NewGuid().ToString().Replace("-", "a")
318.            };
319.            dock.ID = string.Format("RadDock{0}", dock.UniqueName);
320.            dock.Title = "Dock";
321.            dock.Text = string.Format("Added at {0}", DateTime.Now);
322.            dock.Width = Unit.Pixel(100);
323.            dock.Height = Unit.Pixel(400);
324.            dock.Commands.Add(new DockCloseCommand());
325.            //dock.Commands.Add(new DockExpandCollapseCommand());
326. 
327.            return dock;
328.        }
329. 
330.    }
331.}


Can you please have a look and help me out with this issue? 

Telerik version: 2012.3.1016.35

Thanks,
Navnit  

2 Answers, 1 is accepted

Sort by
0
NMQA
Top achievements
Rank 2
answered on 17 May 2014, 10:40 PM
PS: Complete solution zipped and uploaded here: Download
0
Accepted
Slav
Telerik team
answered on 20 May 2014, 02:30 PM
MainPage-Modified.zip
Hi,

There are a few things that need to be changed in order for the example to work correctly:
  1. The region Recreate the docks in order to ensure their proper operation should be moved at the end of the Page_Init event handler. The RadDock controls need to be recreated on Page_Init so that their state is applied correctly.
  2. The RadDockZone controls need to be added in the Controls collection of the RadDockLayout, otherwise the state of the docks inside will not be persisted. Also, you can add them directly in the dock layout without inserting them in the Page first.

I have attached a modified version of the AA.aspx page that includes the changes mentioned above. Please use it as a reference for resolving the problem at hand.

I noticed that you have posted a support ticket about the same issue. I would suggest using only one ticket/support thread for reporting a particular problem so that the information is easier to track. That being said, let us continue our discussion either in the support ticket or in the forum thread.

Regards,
Slav
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.

 
Tags
Dock
Asked by
NMQA
Top achievements
Rank 2
Answers by
NMQA
Top achievements
Rank 2
Slav
Telerik team
Share this question
or