Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Docking > How to save dynamically created Dock in XML format
RadControls for ASP.NET are no longer supported (see this page for reference). In case you have inquiries about the Telerik ASP.NET AJAX controls, post them in the pertinent ASP.NET AJAX forums.

Not answered How to save dynamically created Dock in XML format

Feed from this thread
  • Shunmuga Priya K avatar

    Posted on Apr 26, 2010 (permalink)

    Hello,

    I am using the following sample to save "Dock state" to database.I need to save the dock state in XML format and load it.For example, the dock state

    {"UniqueName":"dadd9d50a2124a4dc3a8098a053e3de5e413","DockZoneID":"RadDockZone2","Width":"300px","Height":"","ExpandedHeight":"207","Top":"0px","Left":"0px","Resizable":"False","Closed":"False","Collapsed":"False","Pinned":"False","Title":"Dock","Text":"Added at 12/2/2009 5:32:40 PM","Tag":"Controls/ExchangeRates.ascx","Index":"0"}|{"UniqueName":"73d7bc6daf41da45c9a8132a036bbfe64f96","DockZoneID":"RadDockZone1","Width":"300px","Height":"","ExpandedHeight":"207","Top":"0px","Left":"0px","Resizable":"False","Closed":"False","Collapsed":"False","Pinned":"False","Title":"Dock","Text":"Added at 12/2/2009 5:35:45 PM","Tag":"Controls/ExchangeRates.ascx","Index":"0"}|

    should be changed to XML as

    <UniqueName>
        dadd9d50a2124a4dc3a8098a053e3de5e413
    </UniqueName> etc. Please help me ASAP.Thanks in advance


    <%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Dock.MyPortal.DefaultCS" 
        CodeFile="Default.aspx.cs" %> 
     
    <%@ 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"> 
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title></title>  
    </head> 
    <body class="BODY">  
        <form id="Form1" method="post" runat="server">  
        <asp:ScriptManager ID="ScriptManager" runat="server" /> 
        <div class="module">  
            Select Module: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  
            <asp:DropDownList runat="server" ID="DroptDownWidget" Width="150">  
                <asp:ListItem Text="ExchangeRates.ascx" Value="Controls/ExchangeRates.ascx" Selected="True"></asp:ListItem> 
                <asp:ListItem Text="Horoscopes.ascx" Value="Controls/Horoscopes.ascx"></asp:ListItem> 
                <asp:ListItem Text="News.ascx" Value="Controls/News.ascx"></asp:ListItem> 
                <asp:ListItem Text="Weather.ascx" Value="Controls/Weather.ascx"></asp:ListItem> 
            </asp:DropDownList> 
            <br /> 
            Select Docking Zone:  
            <asp:DropDownList ID="DropDownZone" runat="server" DataSource="<%#GetZones() %>" 
                DataTextField="ID" DataValueField="ClientID" Width="150">  
            </asp:DropDownList> 
            <asp:Button runat="server" ID="ButtonAddDock" Text="Add Dock" OnClick="ButtonAddDock_Click" /> 
            <asp:Button runat="server" ID="ButtonMakePostback" Text="Make Postback" /> 
        </div> 
        <br /> 
        <telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout" 
            OnLoadDockLayout="RadDockLayout1_LoadDockLayout">  
            <table> 
                <tr> 
                    <td> 
                        <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="300" MinHeight="400">  
                        </telerik:RadDockZone> 
                    </td> 
                    <td> 
                        <telerik:RadDockZone runat="server" ID="RadDockZone2" Width="300" MinHeight="400">  
                        </telerik:RadDockZone> 
                    </td> 
                </tr> 
            </table> 
            <div style="display: none">  
                Hidden UpdatePanel, which is used to receive the new dock controls. We will move  
                them with script to the desired initial dock zone.  
                <asp:UpdatePanel runat="server" ID="UpdatePanel1">  
                    <Triggers> 
                        <asp:AsyncPostBackTrigger ControlID="ButtonAddDock" EventName="Click" /> 
                    </Triggers> 
                </asp:UpdatePanel> 
            </div> 
        </telerik:RadDockLayout> 
        </form> 
    </body> 
    </html> 
     
    using System;  
    using System.Collections;  
    using System.Collections.Generic;  
    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.Web.UI;  
    using System.Data.SqlClient;  
    using System.Configuration;  
    using System.Text;  
     
    namespace Telerik.Web.Examples.Dock.MyPortal  
    {  
        public partial class DefaultCS : System.Web.UI.Page  
        {  
            private int _userID = 2;  
            private SqlConnection _conn = new SqlConnection(ConfigurationManager.ConnectionStrings["DockConnectionString"].ConnectionString);  
     
            private List<DockState> CurrentDockStates  
            {  
                get 
                {  
                    //Get saved state string from the database - set it to dockState variable for example   
                    string dockStatesFromDB = "";  
     
     
                    _conn.Open();  
                    SqlCommand command = new SqlCommand("select State from States where id='" + _userID + "' ", _conn);  
                    dockStatesFromDB = command.ExecuteScalar().ToString();  
                    _conn.Close();  
     
                    List<DockState> _currentDockStates = new List<DockState>();  
                    string[] stringStates = dockStatesFromDB.Split('|');  
                    foreach (string stringState in stringStates)  
                    {  
                        if (stringState.Trim() != string.Empty)  
                        {  
                            _currentDockStates.Add(DockState.Deserialize(stringState));  
                        }  
                    }  
                    return _currentDockStates;  
                }  
            }  
     
            protected void Page_Load(object sender, EventArgs e)  
            {  
                if (!IsPostBack)  
                {  
                    DropDownZone.DataBind();  
                }  
            }  
     
            public ArrayList GetZones()  
            {  
                ArrayList zones = new ArrayList();  
                zones.Add(RadDockZone1);  
                zones.Add(RadDockZone2);  
     
                return zones;  
            }  
     
            protected void Page_Init(object sender, EventArgs e)  
            {  
                //Recreate the docks in order to ensure their proper operation  
                for (int i = 0; i < CurrentDockStates.Count; i++)  
                {  
                    if (CurrentDockStates[i].Closed == false)  
                    {  
                        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);  
                        if (!IsPostBack)  
                        {  
                            UpdatePanel1.ContentTemplateContainer.Controls.Add(dock);  
                        }  
                        //We want to save the dock state every time a dock is moved.  
                        CreateSaveStateTrigger(dock);  
                        //Load the selected widget  
                        LoadWidget(dock);  
                    }  
                }  
            }  
     
            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)  
            {  
     
                List<DockState> stateList = RadDockLayout1.GetRegisteredDocksState();  
                StringBuilder serializedList = new StringBuilder();  
                int i = 0;  
     
                while (i < stateList.Count)  
                {  
                    serializedList.Append(stateList[i].ToString());  
                    serializedList.Append("|");  
                    i++;  
                }  
     
                string dockState = serializedList.ToString();  
                if (dockState.Trim() != String.Empty)  
                {  
                    _conn.Open();  
                    SqlCommand command = new SqlCommand(String.Format("update States set State='{0}' where id='" + _userID + "'", dockState), _conn);  
                    command.ExecuteNonQuery();  
                    _conn.Close();  
                }  
            }  
     
            private RadDock CreateRadDockFromState(DockState state)  
            {  
                RadDock dock = new RadDock();  
                dock.ID = string.Format("RadDock{0}", state.UniqueName);  
                dock.DockMode = DockMode.Docked;  
     
                dock.ApplyState(state);  
                dock.Command += new DockCommandEventHandler(dock_Command);  
                dock.Commands.Add(new DockCloseCommand());  
                dock.Commands.Add(new DockExpandCollapseCommand());  
     
                return dock;  
            }  
     
            private RadDock CreateRadDock()  
            {  
                int docksCount = CurrentDockStates.Count;  
     
                RadDock dock = new RadDock();  
                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.DockMode = DockMode.Docked;  
     
                dock.Commands.Add(new DockCloseCommand());  
                dock.Commands.Add(new DockExpandCollapseCommand());  
                dock.Command += new DockCommandEventHandler(dock_Command);  
     
                return dock;  
            }  
     
            void dock_Command(object sender, DockCommandEventArgs e)  
            {  
                if (e.Command.Name == "Close")  
                {  
                    ScriptManager.RegisterStartupScript(  
                    UpdatePanel1,  
                    this.GetType(),  
                    "RemoveDock",  
                    string.Format(@"function _removeDock() {{
        Sys.Application.remove_load(_removeDock);
        $find('{0}').undock();
        $get('{1}').appendChild($get('{0}'));
        $find('{0}').doPostBack('DockPositionChanged');
    }};
    Sys.Application.add_load(_removeDock);", ((RadDock)sender).ClientID, UpdatePanel1.ClientID),  
                    true);  
     
                }  
            }  
     
            private void CreateSaveStateTrigger(RadDock dock)  
            {  
                //Ensure that the RadDock control will initiate postback  
                // when its position changes on the client or any of the commands is clicked.  
                //Using the trigger we will "ajaxify" that postback.  
                dock.AutoPostBack = true;  
                dock.CommandsAutoPostBack = true;  
                dock.Style.Add("zIndex""0");  
     
                AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger();  
                saveStateTrigger.ControlID = dock.ID;  
                saveStateTrigger.EventName = "DockPositionChanged";  
                UpdatePanel1.Triggers.Add(saveStateTrigger);  
     
                saveStateTrigger = new AsyncPostBackTrigger();  
                saveStateTrigger.ControlID = dock.ID;  
                saveStateTrigger.EventName = "Command";  
                UpdatePanel1.Triggers.Add(saveStateTrigger);  
            }  
     
            private void LoadWidget(RadDock dock)  
            {  
                if (string.IsNullOrEmpty(dock.Tag))  
                {  
                    return;  
                }  
                Control widget = LoadControl(dock.Tag);  
                dock.ContentContainer.Controls.Add(widget);  
            }  
     
     
            protected void ButtonAddDock_Click(object sender, EventArgs e)  
            {  
                RadDock dock = CreateRadDock();  
                //In order to optimize the execution speed we are adding the dock to a   
                // hidden update panel and then register a script which will move it  
                // to RadDockZone1 after the AJAX request completes. If you want to   
                // dock the control in other zone, modify the script according your needs.  
                UpdatePanel1.ContentTemplateContainer.Controls.Add(dock);  
     
                ScriptManager.RegisterStartupScript(  
                dock,  
                this.GetType(),  
                "AddDock",  
                string.Format(@"function _addDock() {{
        Sys.Application.remove_load(_addDock);
        $find('{1}').dock($find('{0}'));
        $find('{0}').doPostBack('DockPositionChanged');
    }};
    Sys.Application.add_load(_addDock);", dock.ClientID, DropDownZone.SelectedValue),  
                true);  
     
                //Right now the RadDock control is not docked. When we try to save its state  
                // later, the DockZoneID will be empty. To workaround this problem we will   
                // set the AutoPostBack property of the RadDock control to true and will   
                // attach an AsyncPostBackTrigger for the DockPositionChanged client-side  
                // event. This will initiate second AJAX request in order to save the state  
                // AFTER the dock was docked in RadDockZone1.  
                CreateSaveStateTrigger(dock);  
     
                //Load the selected widget in the RadDock control  
                dock.Tag = DroptDownWidget.SelectedValue;  
                LoadWidget(dock);  
            }  
        }  

  • Shunmuga Priya K avatar

    Posted on Apr 27, 2010 (permalink)

    Anyone have answer on this?

  • Pero Pero admin's avatar

    Posted on Apr 28, 2010 (permalink)

    Hello Shunmuga,

    You could use the code from the following example: http://www.telerik.com/community/code-library/aspnet-ajax/dock/save-and-load-state-from-xml.aspx. I am not sure that the code can be used as is, but it can be easily modified.

    Kind regards,
    Pero
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

  • Shunmuga Priya K avatar

    Posted on Apr 28, 2010 (permalink)

    Hello,

    Thanks for your reply.But this does not solve my problem.Similar to the code i have posted,Could you please send me a sample to store in xml format in database.Please reply ASAP.

    Thanks

  • Shunmuga Priya K avatar

    Posted on Apr 29, 2010 (permalink)

    Anyone have answer on this?

  • Pero Pero admin's avatar

    Posted on Apr 30, 2010 (permalink)

    Hi Shunmuga,

    You could use the XmlSerializer class to Serialize a DockState object, and then save the XML string into DB.

    For example the following method serializes a DockState and returns the serialized XML string:

    private string SerializeDockState(DockState dockState)
    {
        StringWriter stringWriter = new StringWriter();
     
        //DockState
        dockState = new DockState();
        dockState.Closed = false;
        dockState.Collapsed = false;
        dockState.DockZoneID = "RadDockZone1";
        dockState.ExpandedHeight = 300;
        dockState.Height = Unit.Pixel(300);
        dockState.Index = 0;
        dockState.Left = 0;
        dockState.Pinned = false;
        dockState.Resizable = false;
        dockState.Tag = "DOCK TAG";
        dockState.Text = "Some Content";
        dockState.Title = "RadDock Title";
        dockState.UniqueName = "RadDock1";
        dockState.Width = Unit.Pixel(300);
     
     
        System.Xml.Serialization.XmlSerializer xmlSerializer = new System.Xml.Serialization.XmlSerializer(dockState.GetType());
        xmlSerializer.Serialize(stringWriter, dockState);
     
        return stringWriter.ToString();
    }



    Greetings,
    Pero
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Docking > How to save dynamically created Dock in XML format