Adding Floading Docks programmatically

[Michael Bordogna]

I am trying to add a Dock programmatically. I am using the example from the cfm help file and it works fine if i am adding dock to zones but if i want to add a floating dock it doesn't show up on the page. I have tried adding to to the control collection of the Layout object and page. I cannot add it to a zone because it will through an error. How do i get it to show up. While testing this scenerio out, I found another problem. The Dockmode state is not presisting when the dock was dynamicly created. For example, if i set the dockmode to default. it will not let me float a dock. it enforces zone ownership.

[Sophy]

Hello Michael Bordogna,

Thank you for contacting us.

There shouldn't  be a problem using a floating  zone outside  a  zone  as  well  as adding floating docks  to  zones. I am not  sure what  is the reason  for an error  being thrown  when adding  a floating dock to a zone and therefore I would like to ask you send me a simple running application which reproduces the problem you experience so that  I can  test  it locally  and research the problem.

As  far as it is concerned to dockmode state it should  be persisted. One possible reason for not being able to move a floating  dock  outside  a zone and  therefore seeming that  the dockmode is not persisted is the size of  the body of  the page being not large enough to  float  the dock.  Please,  try  setting the width and height properties of  the body  and  the form of your page to 100% and test  floating  the dock again.

I am looking forward to receiving your application. As soon as I receive it  I will do my best to help you.

All the best,
Sophy
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Michael Bordogna]

I have attached the sample code, also can you indicate if i am doing something wrong in my clientside code I am unable to get a reference to the zone Objects that has a getDocks() member. the below example using ajax manager, for adding parts.


//*************** default.aspx.cs *********************

using System;

 

using System.Data;

 

using System.Configuration;

 

using System.Collections.Generic;

 

using System.Web;

 

using System.Web.Security;

 

using System.Web.UI;

 

using System.Web.UI.WebControls;

 

using System.Web.UI.WebControls.WebParts;

 

using System.Web.UI.HtmlControls;

 

using Telerik.Web.UI;

 

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

 

{

protected void Page_Load(object sender, EventArgs e)

{

lblOutput.Text = "";

}

protected void Page_Init(object sender, EventArgs e)

{

 

for (int i = 0; i < CurrentDockStates.Count; i++)

{

RadDock dock = new RadDock();

dock.ID = string.Format("RadDock{0}", i);

dock.ApplyState(CurrentDockStates[i]);

if (!RadDockLayout1.Controls.Contains(dock))

RadDockLayout1.Controls.Add(dock);

}

}

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)

{

CurrentDockStates = RadDockLayout1.GetRegisteredDocksState();

}

 

private List<DockState> CurrentDockStates

{

get

 

{

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;

}

}

 

private RadDock CreateRadDock()

{

int docksCount = CurrentDockStates.Count;

RadDock dock = new RadDock();

dock.DockMode = DockMode.Default;

dock.ID = string.Format("RadDock{0}", docksCount);

dock.Title = string.Format("Dock {0}", docksCount);

dock.Text = string.Format("Added at {0}", DateTime.Now);

dock.UniqueName = Guid.NewGuid().ToString();

dock.Width = Unit.Pixel(300);

return dock;

}

 

private RadDock CreateDialog()

{

int docksCount = CurrentDockStates.Count;

RadDock dock = new RadDock();

dock.ID = string.Format("Dialog{0}", docksCount);

dock.Title = string.Format("Dialog {0}", docksCount);

dock.Text = string.Format("Added at {0}", DateTime.Now);

dock.UniqueName = Guid.NewGuid().ToString();

dock.Width = Unit.Pixel(300);

dock.Left = Unit.Pixel(5);

dock.Top = Unit.Pixel(5);

dock.DockMode = DockMode.Default;

return dock;

}

 

 

protected void ButtonAddDock_Click(object sender, EventArgs e)

{

RadDock dock = CreateRadDock();

RadDockZone1.Controls.Add(dock);

lblNumParts.Text = RadDockLayout1.RegisteredDocks.Count.ToString();

}

 

protected void btnClear_Click(object sender, EventArgs e)

{

// Session.Clear();

 

int pos = 0;

RadDock d;

while (RadDockLayout1.Controls.Count > pos)

{

d = RadDockLayout1.Controls[pos] as RadDock;

if (d != null)

{

RadDockLayout1.Controls.Remove(d);

lblOutput.Text += "Removing Part<br />";

}

else pos++;

}

lblNumParts.Text = RadDockLayout1.RegisteredDocks.Count.ToString();

lblOutput.Text += "parts Cleared";

}

protected void btnOpenDialog_Click(object sender, EventArgs e)

{

RadDock dock = this.CreateDialog();

RadDockZone1.Controls.Add(dock);

}

}

//********************* end default.aspx.cs


//***************** default.aspx

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

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<!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>Untitled Page</title>

</head>

<body>

 

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

 

<asp:scriptmanager id="ScriptManager" runat="server" />

 

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

 

<AjaxSettings>

 

<telerik:AjaxSetting AjaxControlID="Button1">

 

<UpdatedControls>

 

<telerik:AjaxUpdatedControl ControlID="RadDockLayout1" />

 

<telerik:AjaxUpdatedControl ControlID="lblNumParts" />

 

<telerik:AjaxUpdatedControl ControlID="lblOutput" />

 

</UpdatedControls>

 

</telerik:AjaxSetting>

 

<telerik:AjaxSetting AjaxControlID="btnOpenDialog">

 

<UpdatedControls>

 

<telerik:AjaxUpdatedControl ControlID="RadDockLayout1" />

 

</UpdatedControls>

 

</telerik:AjaxSetting>

 

</AjaxSettings>

 

<ClientEvents OnRequestStart="onAsych_Send" OnResponseEnd="onAsych_Reply" />

 

</telerik:RadAjaxManager>

 

<asp:button id="Button1" runat="server" text="Add Dock" OnClick="ButtonAddDock_Click" />&nbsp;

 

<asp:Button ID="btnOpenDialog" runat="server" OnClick="btnOpenDialog_Click" Text="Add Dialog" />

 

<asp:Button ID="btnClear" runat="server" OnClick="btnClear_Click" Text="Clear Parts" />

 

<telerik:raddocklayout runat="server" id="RadDockLayout1"

 

onsavedocklayout="RadDockLayout1_SaveDockLayout"

 

onloaddocklayout="RadDockLayout1_LoadDockLayout">

 

<telerik:raddockzone runat="server" id="RadDockZone1">

 

</telerik:raddockzone>

 

<telerik:raddockzone runat="server" id="RadDockZone2">

 

</telerik:raddockzone>

 

</telerik:raddocklayout>

 

&nbsp; &nbsp;&nbsp; &nbsp;

 

<asp:Label ID="lblNumParts" runat="server" Text="Label"></asp:Label>&nbsp;

 

<asp:Label ID="lblOutput" runat="server" Text="Label"></asp:Label>

 

</form>

 

<script type="text/javascript">

 

function onAsych_Send(sender, args)

{

alert("sending");

}

function onAsych_Reply(sender, args)

{

alert("returned");

var zone1 = <%=RadDockZone1.ClientID %>;

var zone2 = <%=RadDockZone2.ClientID %>;

var docks = zone1.getDocks();

var docks2 = zone2.getDocks();

alert(docks.length);

alert("done");

}

</script>

</body>

</html>

 

[Michael Bordogna]

I have an update. I can pull the dock out of a zone and it switches to floating only then I release the mouse click with in a relative distance of about 2 inches from the layout. If I try to drag the dock any further away and release the mouse left button it returns to its last position in the dock zone.

Still can't figure out why i can't programmatically generate a floating dock from the code behind. My code uses the ajax manager but it doesn't work with or without ajax.

[Petya]

Hello Michael Bordogna,

I tested your code and for the floating dock issue, as Sophy wrote you, applying height=100% to the body, form, html elements solves the problem. For example you can add a global style to the head of your page

<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    html, body, form
    {
        height: 100%;
    }
    </style>
</head>

I tested this way and it works. The problem is that when the dock is inside a zone its parent is the zone, but when outside the zone its parent becomes the body and if it is not long enough then there is no place to drop the dock and the visual effect is that the dock goes back to the zone as though it cannot become floating. You can best understand this if you set a border to the body and test with and without the styles I wrote above.

For the client-side code that you have trouble with, here is how it should look like:

function onAsych_Reply(sender, args)
    {
        alert("returned");
        var zone1 = $find('<%= RadDockZone1.ClientID%>');
        var zone2 = $find('<%= RadDockZone2.ClientID%>');
        var docks = zone1.get_Docks();
        var docks2 = zone2.get_Docks();
        alert(docks.length);
        alert("done");
    }

Hope this helps.

Regards,
Petya
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Michael Bordogna]

Ok, that seemed to work for the drag to float mode problem. thanks for your help. The other part to this problem is adding a dock to the page that will be presented in dockmode = floating dynamically. To what objects control collection should it be added to accomplish this.

I slightly modified the code below to how I figured this should work. please let me know that the best way to accomplish this is.

private RadDock CreateDialog()
{
    int docksCount = CurrentDockStates.Count;
    RadDock dock = new RadDock();
    dock.ID = string.Format("Dialog{0}", docksCount);
    dock.Title = string.Format("Dialog {0}", docksCount);
    dock.Text = string.Format("Added at {0}", DateTime.Now);
    dock.UniqueName = Guid.NewGuid().ToString();
    dock.Width = Unit.Pixel(300);
    dock.Left = Unit.Pixel(5);
    dock.Top = Unit.Pixel(5);
    dock.DockMode = DockMode.Floating;
    return dock;
}

protected void btnOpenDialog_Click(object sender, EventArgs e)
{
    RadDock dock = this.CreateDialog();
    RadLayout1.Controls.Add(dock);
}

 

[Petya]

Hello Michael Bordogna,

I am attaching our Dynamically Created Docks online demo modified to demonstrate how to create initially floating docks. Please, take a look at and use it as a base for your project modifying it to fit your particular requirements. Let me know if you have questions regarding its implementation.

Greetings,
Petya
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center