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

3 posts, 1 answers
  1. NMQA
    NMQA avatar
    6 posts
    Member since:
    Nov 2011

    Posted 17 May 2014 Link to this post

    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. NMQA
    NMQA avatar
    6 posts
    Member since:
    Nov 2011

    Posted 17 May 2014 Link to this post

    PS: Complete solution zipped and uploaded here: Download
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Slav
    Admin
    Slav avatar
    1356 posts

    Posted 20 May 2014 Link to this post

    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.

     
Back to Top