Dynamically Created Dock on Masterpage

[Curt]

Hello, 

I am trying to use the example http://demos.telerik.com/aspnet-ajax/dock/examples/myportal/defaultcs.aspx on a masterpage. I have done some research and I think the error has to do with using the dock.ID instead of ClientID but not totally sure and am unsure of how to correct properly. Can anyone please give me a suggestion on how to correct he problem.

Thanks

(inside pageview)...
                    <asp:UpdatePanel runat="server" ID="UpdatePanel1" ChildrenAsTriggers="false" UpdateMode="Conditional">
                        <ContentTemplate>
                            <telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout"
                                OnLoadDockLayout="RadDockLayout1_LoadDockLayout">
                                <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="550" MinHeight="50"
                                    Style="float: left" UniqueName="Folder Zone 1">
                                </telerik:RadDockZone>
                                <telerik:RadDockZone runat="server" ID="RadDockZone2" Width="320" MinHeight="50"
                                    Style="float: left; background: #f5f4e8;" UniqueName="Folder Zone 2">
                                </telerik:RadDockZone>
                                <telerik:RadDockZone runat="server" ID="RadDockZone3" Width="880" MinHeight="50"
                                    Style="background: #d5f0fa; float: left;" UniqueName="Folder Zone 3">
                                </telerik:RadDockZone>
                                <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="UpdatePanel3">
                                        <Triggers>
                                            <asp:AsyncPostBackTrigger ControlID="ButtonAddDock" EventName="Click" />
                                        </Triggers>
                                    </asp:UpdatePanel>
                                </div>
                            </telerik:RadDockLayout>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="ButtonAddDock" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>
-----------------------------------------------------------------------------------------------------------------------------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using System.Web.Script.Serialization;
using System.Text;
using System.Collections;

public partial class MBA_Folder : System.Web.UI.Page
{
    private const string cookiename = "__dockState";

    private List<DockState> GetDocks(string cookieName)
    {
        List<DockState> currentDocks = new List<DockState>();

        string dockState;
        JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        HttpCookie positionsCookie = Request.Cookies[cookiename];
        if (!Object.Equals(positionsCookie, null))
        {
            dockState = positionsCookie.Value;
            string[] currentDockStates = dockState.Split(new Char[] { '|' });
            foreach (string stringState in currentDockStates)
            {
                if (stringState != string.Empty)
                {
                    DockState state = new DockState();
                    state = serializer.Deserialize<DockState>(stringState);
                    currentDocks.Add(state);
                }
            }
        }

        return currentDocks;
    }

    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);
        zones.Add(RadDockZone3);
        return zones;
    }

    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()
    {
        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 = DroptDownWidget.SelectedItem.Text;
        dock.Text = string.Format("Added at {0}", DateTime.Now);
        dock.Width = Unit.Pixel(300);


        dock.Commands.Add(new DockCloseCommand());
        dock.Commands.Add(new DockExpandCollapseCommand());

        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;

        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);
    }

    protected void Page_Init(object sender, EventArgs e)
    {

        List<DockState> CurrentDockStates = GetDocks(cookiename);
        for (int i = 0; i < CurrentDockStates.Count; i++)
        {
            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);
            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.
        List<DockState> CurrentDockStates = GetDocks(cookiename);
        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)
    {

        string dockState;

        JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        List<DockState> stateList = ((RadDockLayout)sender).GetRegisteredDocksState(true);
        StringBuilder serializedList = new StringBuilder();
        int i = 0;
        while (i < stateList.Count)
        {
            serializedList.Append(serializer.Serialize(stateList[i]));
            serializedList.Append("|");
            i++;

        }

        dockState = serializedList.ToString();

        HttpCookie positionsCookie = new HttpCookie(cookiename, dockState);

        //Ensure that the cookie will not expire soon
        positionsCookie.Expires = DateTime.Now.AddYears(1);
        Response.Cookies.Add(positionsCookie);
    }

    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(DropDownZone.SelectedItem.Text);
        dz.Controls.Add(dock);
        CreateSaveStateTrigger(dock);

        //Load the selected widget in the RadDock control
        dock.Tag = DroptDownWidget.SelectedValue;
        LoadWidget(dock);

        //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);
    }

    private void LoadWidget(RadDock dock)
    {
        if (string.IsNullOrEmpty(dock.Tag))
        {
            return;
        }
        Control widget = LoadControl(dock.Tag);
        dock.ContentContainer.Controls.Add(widget);
    }

    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;
    }
}

[Pero]

Hello Curt,

I reproduced the problem locally, and it seems to be caused by a JavaScript conflict. Basically, if you add a dock and immediately try to drag some of the other docks, a JS error will be thrown, because the previous Ajax request is not finished and we have initiated a new one.  To avoid this issue you should show an AjaxLoadingPanel over the docks during Ajax calls. For your convenience, I have modified your code to show loading panel during Ajax callbacks. Please find it attached to the thread.

Best wishes,
Pero
the Telerik team

[Curt]

Thanks for the reply, 

Your suggestion seems to have fixed the problem. I also am having an issue when using a radgrid inside of the dock. I am able to view the grid, but when I go to edit or add a new item I get an error. The grid goes into edit/insert mode but when I click submit it does not exit out of edit/insert mode. The updated item is updated in the db even though the grid does not exit edit mode. My code is below, any help  would be great.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SchoolsAttended.ascx.cs"
    Inherits="Controls_SchoolsAttended" %>
<telerik:RadGrid ID="rgSchoolsAttended" runat="server" ShowStatusBar="True" AllowSorting="True"
    PageSize="7" GridLines="None" AllowPaging="True" CellSpacing="0" DataSourceID="ldsSchoolsAttended"
    AutoGenerateColumns="False" AllowAutomaticDeletes="True" AllowAutomaticInserts="True"
    AllowAutomaticUpdates="True">
    <MasterTableView DataSourceID="ldsSchoolsAttended" DataKeyNames="SchoolAttendedID"
        TableLayout="Fixed" EditMode="InPlace" CommandItemDisplay="Bottom">
        <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
            <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>
        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
            <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>
        <Columns>
            <telerik:GridEditCommandColumn HeaderStyle-Width="30" ButtonType="ImageButton" UniqueName="EditCommandColumn">
                <ItemStyle CssClass="MyImageButton" />
            </telerik:GridEditCommandColumn>
            <telerik:GridBoundColumn DataField="SchoolAttendedID" DataType="System.Int32" FilterControlAltText="Filter SchoolAttendedID column"
                HeaderText="SchoolAttendedID" SortExpression="SchoolAttendedID" UniqueName="SchoolAttendedID"
                Visible="false">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="HNUMBER" FilterControlAltText="Filter HNUMBER column"
                HeaderText="HNUMBER" SortExpression="HNUMBER" UniqueName="HNUMBER" DataType="System.Int32"
                Visible="TRUE">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="SchoolID" DataType="System.String" FilterControlAltText="Filter SchoolID column"
                HeaderText="SchoolID" SortExpression="SchoolID" UniqueName="SchoolID" Visible="false">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn HeaderText="SchoolName" ItemStyle-Width="240px">
                <ItemTemplate>
                    <%#DataBinder.Eval(Container.DataItem, "SchoolAttendedName")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadComboBox runat="server" ID="rcbSchools" DataTextField="SchoolName" DataValueField="SchoolID"
                        DataSourceID="ldsSchools" SelectedValue='<%#Bind("SchoolID") %>'>
                    </telerik:RadComboBox>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridDateTimeColumn HeaderStyle-Width="160" DataField="BeginDate" DataType="System.DateTime"
                FilterControlAltText="Filter BeginDate column" HeaderText="Start" SortExpression="BeginDate"
                UniqueName="BeginDate" DataFormatString="{0:d}">
            </telerik:GridDateTimeColumn>
            <telerik:GridDateTimeColumn HeaderStyle-Width="160" DataField="EndDate" DataType="System.DateTime"
                FilterControlAltText="Filter EndDate column" HeaderText="End" SortExpression="EndDate"
                UniqueName="EndDate" DataFormatString="{0:d}">
            </telerik:GridDateTimeColumn>
            <telerik:GridBoundColumn HeaderStyle-Width="90" DataField="ReceivedDegree" FilterControlAltText="Filter ReceivedDegree column"
                HeaderText="Degree" SortExpression="ReceivedDegree" UniqueName="ReceivedDegree">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderStyle-Width="60" DataField="GPA" DataType="System.Decimal"
                FilterControlAltText="Filter GPA column" HeaderText="GPA" SortExpression="GPA"
                UniqueName="GPA">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Transcript" FilterControlAltText="Filter Transcript column"
                HeaderText="Transcript" SortExpression="Transcript" UniqueName="Transcript" Visible="false">
            </telerik:GridBoundColumn>
            <telerik:GridButtonColumn HeaderStyle-Width="30" ConfirmText="Are you sure you want to delete this?"
                ConfirmDialogType="RadWindow" ConfirmTitle="Delete" ButtonType="ImageButton"
                CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">
                <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
            </telerik:GridButtonColumn>
        </Columns>
        <EditFormSettings>
            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
            </EditColumn>
        </EditFormSettings>
    </MasterTableView>
    <ClientSettings AllowColumnsReorder="True">
    </ClientSettings>
    <FilterMenu EnableImageSprites="False">
    </FilterMenu>
    <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">
    </HeaderContextMenu>
</telerik:RadGrid>
<asp:LinqDataSource ID="ldsSchoolsAttended" runat="server" ContextTypeName="DAL.HuntsmanLinqDataContext"
    EnableDelete="True" EnableInsert="True" EnableUpdate="True" EntityTypeName=""
    OnSelecting="ldsSchoolsAttended_Selecting" OrderBy="EndDate" TableName="SchoolAttendeds"
    Where="HNUMBER == @HNUMBER">
    <WhereParameters>
        <asp:QueryStringParameter DefaultValue="1" Name="HNUMBER" QueryStringField="HNUMBER"
            Type="Int32" />
    </WhereParameters>
    <InsertParameters>
        <asp:Parameter Name="HNUBMER" DefaultValue="1" />
    </InsertParameters>
</asp:LinqDataSource>
<asp:LinqDataSource ID="ldsSchools" runat="server" ContextTypeName="DAL.HuntsmanLinqDataContext"
    EntityTypeName="" OrderBy="SchoolName" Select="new (SchoolID, SchoolName)" TableName="Schools">
</asp:LinqDataSource>

[Pero]

Hi Curt,

I think that this a ViewState related problem. When the dock is added for the first time it is added to the docking zone, and on every postback (or ajax call) it is added to the RadDockLayout control. This causes the incorrect ViewState for the grid control, and that's why an error is thrown.
To fix the issue you should change the code that adds the dock for the first time, in the following way:

protected void ButtonAddDock_Click(object sender, EventArgs e)
{
    RadDock dock = CreateRadDock();

    //find the target zone and add the new dock there
    //dz.Controls.Add(dock);
    RadDockLayout1.Controls.Add(dock);

    RadDockZone dz = (RadDockZone)FindControl(DropDownZone.SelectedItem.Text);
    dock.Dock(dz);

    //Load the selected widget in the RadDock control
    dock.Tag = DroptDownWidget.SelectedValue;
    LoadWidget(dock);

    CreateSaveStateTrigger(dock);
}

Kind regards,
Pero
the Telerik team