This is a migrated thread and some comments may be shown as answers.

Portal page like netvibes/bbc.co.uk

8 Answers 96 Views

Dock

This is a migrated thread and some comments may be shown as answers.

8 Answers, 1 is accepted

answered on 17 Jun 2009, 11:54 AM

saveraddockindb.zip

Hi Satyadev,

Please find attached a simple example which illustrates how to save state for dynamically added RadDocks in DB.

Greetings,
Petio Petkov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 19 Jun 2009, 01:39 PM

Hi team,

I have been modified certain parts of your code,

i ve attached two static docks with dynamic code. It is working fine. While arranging docks from one zone to another zone of dynamic dock is working properly, but for static zone is not not updating into database.

-i ve attached a link button in title template for duplicate of the dock. lik button always showing into left side.

-while closing of each dock, state is not updating into database which code attached here.

pls check the following code for modification.

i m attaching the modified code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="SaveDBDynamicallyRadDocks_CS_Default" %>

<%@ 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 id="Head1" runat="server">
   
</head>
<body class="BODY">
   <form id="Form1" method="post" runat="server">
       <asp:ScriptManager ID="ScriptManager" runat="server" />
       <div>
                   
           <br />
            <asp:Button runat="server" ID="ButtonAddDock" Text="AddNews"
                OnClick="ButtonAddDock_Click" />
           <asp:Button runat="server" ID="ButtonPostBack" Text="Weather"
               OnClick="ButtonPostBack_Click" />
       </div>
       <asp:UpdatePanel runat="server" ID="UpdatePanel2">
           <ContentTemplate>
               <br />
               <telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout"
                   OnLoadDockLayout="RadDockLayout1_LoadDockLayout">
                   <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="451px" MinHeight="200"
                       Style="float: left; margin-right: 15px; background: #f5f4e8;" Height="512px">
                        <telerik:RadDock ID="RadDock1" Runat="server" Height="80px" Skin="Hay"
                            Width="232px" EnableAnimation="True" Tag="~/UserControls/StaticC1.ascx">
                             <TitlebarTemplate>

     <ContentTemplate>
       <asp:LinkButton
           id="Duplicate"
           runat="server"
           Text="Duplicate" onclick="Duplicate_Click">
       </asp:LinkButton>

     </ContentTemplate>

</TitlebarTemplate>

                        </telerik:RadDock>
                   </telerik:RadDockZone>
                   <telerik:RadDockZone runat="server" ID="RadDockZone2" Width="502px" MinHeight="200"
                       Style="background: #d5f0fa; float: left;" Height="506px">
                        <telerik:RadDock ID="RadDock2" Runat="server" Height="85px" Skin="Hay"
                            EnableAnimation="True" Tag="~/UserControls/StaticC2.ascx">
                        </telerik:RadDock>
                   </telerik:RadDockZone>
               </telerik:RadDockLayout>
           </ContentTemplate>
           <Triggers>
               <asp:AsyncPostBackTrigger ControlID="ButtonAddDock" EventName="Click" />
           </Triggers>
       </asp:UpdatePanel>
       <div style="width: 0px; height: 0px; overflow: hidden; position: absolute; left: -10000px;">
           Hidden UpdatePanel, which is used to help with saving state when minimizing, moving and closing docks.
           This way the docks state is saved faster (no need to update the docking zones).
           <asp:UpdatePanel runat="server" ID="UpdatePanel1">
           </asp:UpdatePanel>
       </div>
       </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using System.Text;
using System.Data.SqlClient;
using System.Collections;
using System.Configuration;

public partial class SaveDBDynamicallyRadDocks_CS_Default : System.Web.UI.Page
{
    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=2", _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)
    {

    }

    protected override void OnInit(EventArgs e)
    {




        base.OnInit(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]);
                switch (dock.UniqueName)
                {
                    case "RadDock1": break;
                    case "RadDock2": break;
                    default:
                        RadDockLayout1.Controls.Add(dock);
                        CreateSaveStateTrigger(dock);
                        LoadWidget(dock);
                        break;
                }
            }
        }
    }


    protected void RadDockLayout1_LoadDockLayout(object sender, DockLayoutEventArgs e)
    {
        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=2", dockState), _conn);
                command.ExecuteNonQuery();
                _conn.Close();
            }

    }

    private RadDock CreateRadDockFromState(DockState state)
    {
        RadDock dock = new RadDock();
        dock.DockMode = DockMode.Docked;
        dock.ID = string.Format("RadDock{0}", state.UniqueName);
        dock.ApplyState(state);
        dock.Commands.Add(new DockCloseCommand());
        dock.Commands.Add(new DockExpandCollapseCommand());

        return dock;
    }

    private RadDock CreateRadDock()
    {
        int docksCount = CurrentDockStates.Count;

        RadDock dock = new RadDock();
        dock.DockMode = DockMode.Docked;
        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);

        dock.Commands.Add(new DockCloseCommand());
        dock.Commands.Add(new DockExpandCollapseCommand());
        dock.Command += new DockCommandEventHandler(Dock_Command);

        return dock;
    }
    protected 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;

        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();
        //find the target zone and add the new dock there
        RadDockZone dz = (RadDockZone)FindControl("RadDockZone2");
        dz.Controls.Add(dock);
        CreateSaveStateTrigger(dock);

        //Load the selected widget in the RadDock control
        dock.Tag = "~/UserControls/News.ascx";
        dock.EnableAnimation = true;
        LoadWidget(dock);
    }
    protected void ButtonPostBack_Click(object sender, EventArgs e)
    {
        RadDock dock = CreateRadDock();
        //find the target zone and add the new dock there
        RadDockZone dz = (RadDockZone)FindControl("RadDockZone2");
        dz.Controls.Add(dock);
        CreateSaveStateTrigger(dock);

        //Load the selected widget in the RadDock control
        dock.Tag = "~/UserControls/Weather.ascx";
        dock.EnableAnimation = true;
        LoadWidget(dock);
    }

    protected void Duplicate_Click(object sender, EventArgs e)
    {
        DockState state = RadDock1.GetState();
        state.UniqueName = "NewUniqueName";
        RadDock dock = new RadDock();
        dock.ApplyState(state);
        RadDockLayout1.Controls.Add(dock);
    }
}

-----------

Satyadev.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Portal page like netvibes/bbc.co.uk

8 Answers, 1 is accepted