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

RadDockZone doesnot recognize dynamically added RadDock

3 Answers 96 Views

Dock

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

Meng asked on 02 Sep 2014, 04:06 PM

Hi there,

I have added a RadDock to RadDockZone1 dynamically from code behind, then drag the RadDock to RadDockZone2, the docks count in RadDockZone2 still shows 0 (
RadDockZone2.Docks.Count). However, if I drag a static dock from RadDockZone1 to RadDockZone2, the dock count number in RadDockZone2 is correct. Please see the following code for details (RadDockTest.aspx and RadDockTest.aspx.cs). Any help is much appreciated. Thank you.

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

<%@ 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">

<title>ASP.NET Dock Demo - AutoPostBack</title>

<!--[if lte IE 6]>

<style type="text/css">

.raddockzone{height:250px}

</style>

<![endif]-->

<style type="text/css">

.qsfConsole {

margin-top: 19px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />

<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />

<telerik:RadDockLayout runat="server" ID="RadDockLayout1">

<table>

<tr>

<td style="vertical-align: top">

Docking Zone 1<br />

<br />

<telerik:RadDockZone runat="server" ID="RadDockZone1" Width="270px" MinHeight="360px">

<telerik:RadDock runat="server" ID="RadDock1" Title="AutoPostBack enabled"

EnableRoundedCorners="true">

<ContentTemplate>

This RadDock control will initiate postback when it is moved around the page. You

could create AsyncPostbackTrigger to replace the postback with an AJAX call.

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock runat="server" ID="RadDock2" Title="AutoPostBack disabled"

EnableRoundedCorners="true">

<ContentTemplate>

This RadDock control will NOT initiate postback when it is moved around the page.

However, if you post back the page using another control, the DockPositionChanged

event will be fired.

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</td>

<td style="vertical-align: top">

Docking Zone 2<br />

<br />

<telerik:RadDockZone runat="server" ID="RadDockZone2" Width="270px" MinHeight="360px">

</telerik:RadDockZone>

</td>

</tr>

</table>

</telerik:RadDockLayout>

<asp:Button ID="bt_SaveCustomInterfaces" runat="server" Text ="Save Interface" OnClick="bt_SaveCustomInterfaces_Click" />

</form>

</body>

</html>

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;

public partial class RadDockTest : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

RadDock dock = CreateRadDock();

RadDockZone1.Controls.Add(dock);

}

protected void bt_SaveCustomInterfaces_Click(object sender, EventArgs e)

{

if (RadDockZone2.Docks.Count == 1)

{

foreach (RadDock _radDock in RadDockZone2.Docks)

{

}

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 = "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());

return dock;

}

3 Answers, 1 is accepted

answered on 02 Sep 2014, 06:18 PM

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

<%@ 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">

<title>ASP.NET Dock Demo - AutoPostBack</title>

<!--[if lte IE 6]>

<style type="text/css">

.raddockzone{height:250px}

</style>

<![endif]-->

<style type="text/css">

.qsfConsole {

margin-top: 19px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />

<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />

<telerik:RadDockLayout runat="server" ID="RadDockLayout1">

<table>

<tr>

<td style="vertical-align: top">

Docking Zone 1<br />

<br />

<telerik:RadDockZone runat="server" ID="RadDockZone1" Width="270px" MinHeight="360px">

<telerik:RadDock runat="server" ID="RadDock1" Title="AutoPostBack enabled"

EnableRoundedCorners="true">

<ContentTemplate>

This RadDock control will initiate postback when it is moved around the page. You

could create AsyncPostbackTrigger to replace the postback with an AJAX call.

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock runat="server" ID="RadDock2" Title="AutoPostBack disabled"

EnableRoundedCorners="true">

<ContentTemplate>

This RadDock control will NOT initiate postback when it is moved around the page.

However, if you post back the page using another control, the DockPositionChanged

event will be fired.

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</td>

<td style="vertical-align: top">

Docking Zone 2<br />

<br />

<telerik:RadDockZone runat="server" ID="RadDockZone2" Width="270px" MinHeight="360px">

</telerik:RadDockZone>

</td>

</tr>

</table>

</telerik:RadDockLayout>

<asp:Button ID="Button1" runat="server" Text ="Add Dock" OnClick="bt_AddDock_Click" />

<asp:Button ID="bt_SaveCustomInterfaces" runat="server" Text ="Save Interface" OnClick="bt_SaveCustomInterfaces_Click" />

</form>

</body>

</html>

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;

public partial class RadDockTest : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void bt_AddDock_Click(object sender, EventArgs e)

{

RadDock dock = CreateRadDock();

RadDockZone1.Controls.Add(dock);

}

protected void bt_SaveCustomInterfaces_Click(object sender, EventArgs e)

{

if (RadDockZone2.Docks.Count == 1)

{

foreach (RadDock _radDock in RadDockZone2.Docks)

{

}

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 = "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());

return dock;

}

Accepted

answered on 05 Sep 2014, 01:57 PM

Hi Meng,

If you want to create RadDock controls dynamically you should do it in the Init event of the page, in order to allow the RadDockLayout to automatically manage their positions. You could create RadDock controls in other events, but you should recreate them in Init when the next postback or AJAX request occurs.

More information on the matter as well as a live example is available in the Dock - Dynamically Created Docks online demo.

Regards,
Danail Vasilev
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.