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

My Portal within masterpage

1 Answer 55 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Mattias Moberg
Top achievements
Rank 1
Mattias Moberg asked on 15 Jul 2011, 01:13 PM
I´m having problem to handle drag docks from dockzones that are not in same content placeholder.
Anyone that could help me out?

Markup:
<%@ Page Title="" Language="C#" MasterPageFile="~/App_master/SiteTwoColumn.master"
    AutoEventWireup="true" CodeFile="EditPageSiteTwoColumn.aspx.cs" Inherits="EditPageSiteTwoColumn" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="SideBar" runat="Server">
 
    <telerik:RadDockLayout runat="server" ID="RadDockLayout2" Skin="Clear" EnableEmbeddedSkins="false">
        <telerik:RadDockZone runat="server" ID="RadDockZone2" MinHeight="200">
        </telerik:RadDockZone>
    </telerik:RadDockLayout>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <table style="width: 100%;">
        <tr>
            <td style="width: 140px">
                Select Module:
            </td>
            <td style="width: 140px">
                <asp:DropDownList runat="server" ID="DroptDownWidget" Width="150">
                    <asp:ListItem Text="Blogg.ascx" Value="~/UserControls/Blogg/Blogg.ascx"></asp:ListItem>
                    <asp:ListItem Text="Footer.ascx" Value="~/UserControls/Footer/Footer.ascx"></asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
            </td>
            <td style="width: 100px">
                <asp:Button runat="server" ID="ButtonPostBack" Text="Make PostBack" OnClick="ButtonPostBack_Click" />
            </td>
        </tr>
        <tr>
            <td>
                Select Docking Zone:
            </td>
            <td>
                <asp:DropDownList ID="DropDownZone" runat="server" DataSource="<%#GetZones() %>"
                    DataTextField="ID" DataValueField="ClientID" Width="150">
                </asp:DropDownList>
            </td>
            <td>
                <asp:Button runat="server" ID="ButtonAddDock" Text="Add Dock (AJAX)" OnClick="ButtonAddDock_Click" />
            </td>
            <td>
                <asp:Button runat="server" ID="ButtonClear" Text="Clear Dock State" OnClick="ButtonClear_Click" />
            </td>
        </tr>
    </table>
    <asp:UpdatePanel runat="server" ID="UpdatePanel2" ChildrenAsTriggers="false" UpdateMode="Conditional">
        <ContentTemplate>
            <br />
            <telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout"
                OnLoadDockLayout="RadDockLayout1_LoadDockLayout" Skin="Clear" EnableEmbeddedSkins="false">
                <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="591" MinHeight="200">
                </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>
</asp:Content>

Code:
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;
 
public partial class EditPageSiteTwoColumn : System.Web.UI.Page
{
    private bool _dockStateCleared = false;
    private List<DockState> CurrentDockStates
    {
        get
        {
            //Store the info about the added docks in the session. For real life
            // applications we recommend using database or other storage medium
            // for persisting this information.
            List<DockState> _currentDockStates = (List<DockState>)Session["CurrentDockStatesMyPortal"];
            if (Object.Equals(_currentDockStates, null))
            {
                _currentDockStates = new List<DockState>();
                Session["CurrentDockStatesMyPortal"] = _currentDockStates;
            }
            return _currentDockStates;
        }
        set
        {
            Session["CurrentDockStatesMyPortal"] = value;
        }
    }
 
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DropDownZone.DataBind();
        }
    }
 
    public ArrayList GetZones()
    {
        ArrayList zones = new ArrayList();
        zones.Add(RadDockZone1);
        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);
                //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)
    {
        if (!_dockStateCleared)
        {
            //Save the dock state in the session. This will enable us
            // to recreate the dock in the next Page_Init.
            CurrentDockStates = RadDockLayout1.GetRegisteredDocksState();
        }
        else
        {
            //the clear state button was clicked, so we refresh the page and start over.
            Response.Redirect(Request.RawUrl, false);
        }
    }
 
    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().Replace("-", "a");
        dock.ID = string.Format("RadDock{0}", dock.UniqueName);
        dock.Title = "Blog module";
        dock.Text = string.Format("Added at {0}", DateTime.Now);
        dock.Width = Unit.Pixel(300);
        dock.Resizable = true;
 
        dock.Commands.Add(new DockCloseCommand());
        dock.Commands.Add(new DockExpandCollapseCommand());
 
        return dock;
    }
 
    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
 
        ContentPlaceHolder mainContent = (ContentPlaceHolder)this.Master.FindControl("MainContent");
        RadDockZone dz = (RadDockZone)FindControl(mainContent.FindControl("UpdatePanel2"), "RadDockZone1");
        if (dz != null)
        {
            dz.Controls.Add(dock);
            CreateSaveStateTrigger(dock);
 
            //Load the selected widget in the RadDock control
            dock.Tag = DroptDownWidget.SelectedValue;
            LoadWidget(dock);
 
            //Add RadDockZoneInfo text
 
        }
    }
    protected void ButtonPostBack_Click(object sender, EventArgs e)
    {
        //normal postback
    }
    protected void ButtonClear_Click(object sender, EventArgs e)
    {
 
        //clear docks state from the session
        CurrentDockStates.Clear();
        _dockStateCleared = true;
    }
 
    private Control FindControl(Control firstLevel, string Id)
    {
 
        if (firstLevel.ID == Id)
 
            return firstLevel;
 
        foreach (Control Ctl in firstLevel.Controls)
        {
 
            Control c = FindControl(Ctl, Id);
 
            if (c != null)
 
                return c;
        }
        return null;
    }
}

1 Answer, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 20 Jul 2011, 12:40 PM
Hi Mattias,

Moving docks from one RadDockLayout to another is not supported. Please, reorganize your application so that the RadDockLayout wraps all the docks and zones present on the page.

Best wishes,
Pero
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Tags
Dock
Asked by
Mattias Moberg
Top achievements
Rank 1
Answers by
Pero
Telerik team
Share this question
or