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

Overlapping Floating Docks

5 Answers 92 Views

Dock

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

Hıncal asked on 31 Jan 2011, 12:17 PM

Hi,

I have a problem with overlapping floating docks. If I try to open 2 consecutive floating dock in one Layout, second one overwhelm first. But if I move first one with my mouse than second one appears perfectly. How can I provide both appears without client handle...

You may find my adjusted code below.

PS: I'm using latest stable version of ASP.NET AJAX component (Telerik.Web.UI: 2010.3.1317.35)

Thanx.

.aspx part:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

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

<asp:HiddenField ID="hdnDeneme" runat="server" />

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

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

var latestDock;

function DockCustomCommand(dock, args) {

latestDock = dock;

var commandElement = args.Command.get_element();

document.getElementById("hdnDeneme").value = dock._index;

showMenuAt(args.event, commandElement)

}

function showMenuAt(e, offsetElement) {

var contextMenu = $find("RadContextMenu1");

var bounds = $telerik.getBounds(offsetElement);

var x = bounds.x + bounds.width;

var y = bounds.y + bounds.height;

contextMenu.showAt(x, y);

$telerik.cancelRawEvent(e);

}

</script>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadContextMenu1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadDockLayout1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Black">

</telerik:RadSkinManager>

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

<telerik:RadDockZone ID="RadDockZone1" runat="server" Height="600px" Width="600px" Orientation="Horizontal">

</telerik:RadDockZone>

</telerik:RadDockLayout>

<telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnItemClick="RadContextMenu1_ItemClick">

<Items>

<telerik:RadMenuItem Text="Change Title" Value="Title" />

<telerik:RadMenuItem Text="Open Floating Dock" Value="FullBox" />

</Items>

</telerik:RadContextMenu>

</form>

</body>

</html>

.cs part:

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Web.Security;

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)

{

RadDock rd = null;

DockCommand dc = new DockCommand()

{

Name = "Deneme",

OnClientCommand = "DockCustomCommand"

};

for (int i = 0; i < 12; i++)

{

rd = new RadDock()

{

ID = "radDock" + i,

EnableAnimation = true,

EnableRoundedCorners = true,

DockMode = DockMode.Docked,

Width = 140,

Height = 80,

Title = "radDock" + i,

Text = "Hi - " + i

};

rd.Style.Add(HtmlTextWriterStyle.Margin, "2px");

rd.Commands.Add(dc);

RadDockZone1.Controls.Add(rd);

}

rd.Dispose();

}

protected void RadContextMenu1_ItemClick(object sender, RadMenuEventArgs e)

{

switch (e.Item.Value)

{

case "FullBox":

RadDock rd = new RadDock()

{

ID = "hdd1",

DockMode = DockMode.Floating,

EnableAnimation = true,

EnableRoundedCorners = true,

EnableViewState = false,

Width = 200,

Title = "Floating",

Text = "Floating"

};

RadDockLayout1.Controls.Add(rd);

rd.Dispose();

break;

case "Title":

((RadDock)RadDockZone1.Controls[Convert.ToInt32(hdnDeneme.Value)]).Title = e.Item.Value;

break;

default:

break;

}

5 Answers, 1 is accepted

answered on 31 Jan 2011, 04:33 PM

Hello Hincal,

Setting the Top and Left properties of a given floating dock, will position the dock itself to a desired position relative to the Top-Left corner of the screen. Note that you must save the state of the dynamically created RadDocks, and recreate them on every postback or ajax callback, or they will disappear. The following demo
shows how to save the state in the Session: http://demos.telerik.com/aspnet-ajax/dock/examples/myportal/defaultcs.aspx

Kind regards,
Pero
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 01 Feb 2011, 08:16 AM

Hi Pero,

Firstly thanx for your quick response.
In that demo, all components are docked, but my problem is with floating ones (Docked ones are also running pretty cool in my supplied code). If I try to open two consecutive floating docks second one smash the first. It doesn't matter if I set top and left properties of the floating dock. I tried to set top and left properties too, but it doesn't capable to solve the issue. Anyway, if you try to execute my attached code above you'll find out what i mean. You may find possible routes that causes the problem below;

1 - Open the page
2 - Click a custom command of any dock which named "Open Floating Dock" (Do not drag the floating dock already created)
3 - Click a custom command of another dock which named again "Open Floating Dock" (whoopppsss first one is missing, anyway move along)
4 - Drag newly created floating dock to somewhere else
5 - Click a custom command of another dock which named again "Open Floating Dock"
6 - Hi there!! now we have two floating one ;o)))

Thanx again.

Accepted

answered on 02 Feb 2011, 12:52 PM

Hi Hincal,

This problem is caused because you are not saving the state of the dynamically created floating docks. For your convenience I modified the code, to resemble the approach in the demo that I provided link to, in my previous post. You will find it pasted below.
Another thing, I noticed in your code is that the floating docks, always have one and the same ID. Could you please make sure that every dock has a unique name and ID?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

</head>

<body>

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

<asp:HiddenField ID="hdnDeneme" runat="server" />

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

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadScriptBlock runat="server">

<script type="text/javascript">

var DockArray = [];

var latestDock;

function DockCustomCommand(dock, args)

{

latestDock = dock;

var commandElement = args.Command.get_element();

document.getElementById("hdnDeneme").value = dock._index;

showMenuAt(args.event, commandElement)

}

function showMenuAt(e, offsetElement)

{

var contextMenu = $find("RadContextMenu1");

var bounds = $telerik.getBounds(offsetElement);

var x = bounds.x + bounds.width;

var y = bounds.y + bounds.height;

contextMenu.showAt(x, y);

$telerik.cancelRawEvent(e);

}

function DockInit(dock, args)

{

Array.add(DockArray, dock);

}

function OnRequestStart(sender, args)

{

var length = DockArray.length;

var parent = $get("<%=RadDockLayout1.ClientID%>" + "Panel");

for (var i = 0; i < length; i++)

{

parent.appendChild(DockArray[i].get_element());

}

DockArray = [];

}

</script>

</telerik:RadScriptBlock>

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

<ClientEvents OnRequestStart="OnRequestStart" />

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadContextMenu1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadDockLayout1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Black">

</telerik:RadSkinManager>

<telerik:RadDockLayout ID="RadDockLayout1" runat="server" OnSaveDockLayout="RadDockLayout1_SaveDockLayout"

OnLoadDockLayout="RadDockLayout1_LoadDockLayout">

<telerik:RadDockZone ID="RadDockZone1" runat="server" Height="600px" Width="600px"

Orientation="Horizontal">

</telerik:RadDockZone>

</telerik:RadDockLayout>

<telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnItemClick="RadContextMenu1_ItemClick">

<Items>

<telerik:RadMenuItem Text="Change Title" Value="Title" />

<telerik:RadMenuItem Text="Open Floating Dock" Value="FullBox" />

</Items>

</telerik:RadContextMenu>

</form>

</body>

</html>

using System;

using Telerik.Web.UI;

using System.Web.UI;

using System.Collections.Generic;

using System.Collections.ObjectModel;

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

{

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_Init(object sender, EventArgs e)

{

foreach (DockState state in CurrentDockStates)

{

RadDock dock = CreateRadDockFromState(state);

RadDockLayout1.Controls.Add(dock);

}

protected void Page_Load(object sender, EventArgs e)

{

RadDock rd = null;

DockCommand dc = new DockCommand()

{

Name = "Deneme",

OnClientCommand = "DockCustomCommand"

};

for (int i = 0; i < 12; i++)

{

rd = new RadDock()

{

ID = "radDock" + i,

EnableAnimation = true,

EnableRoundedCorners = true,

DockMode = DockMode.Docked,

Width = 140,

Height = 80,

Title = "radDock" + i,

Text = "Hi - " + i

};

rd.Style.Add(HtmlTextWriterStyle.Margin, "2px");

rd.Commands.Add(dc);

RadDockZone1.Controls.Add(rd);

}

rd.Dispose();

}

protected void RadDockLayout1_LoadDockLayout(object sender, DockLayoutEventArgs e)

{

//Since the docks are floating no need to reposition them to zones

}

protected void RadDockLayout1_SaveDockLayout(object sender, DockLayoutEventArgs e)

{

ReadOnlyCollection<RadDock> docks = RadDockLayout1.RegisteredDocks;

List<DockState> states = new List<DockState>();

foreach (RadDock dock in docks)

{

if (!dock.ID.Contains("radDock"))

{

states.Add(dock.GetState());

}

CurrentDockStates = states;

}

private RadDock CreateRadDockFromState(DockState state)

{

RadDock dock = new RadDock();

dock.ApplyState(state);

dock.EnableViewState = false;

dock.ID = "dock" + dock.UniqueName;

dock.DockMode = DockMode.Floating;

dock.EnableRoundedCorners = true;

dock.EnableAnimation = true;

dock.OnClientInitialize = "DockInit";

return dock;

}

protected void RadContextMenu1_ItemClick(object sender, RadMenuEventArgs e)

{

switch (e.Item.Value)

{

case "FullBox":

string uniqueName = Guid.NewGuid().ToString().Replace("-", "a");

Random rnd = new Random();

RadDock rd = new RadDock()

{

UniqueName = uniqueName,

ID = "Dock" + uniqueName,

DockMode = DockMode.Floating,

EnableAnimation = true,

EnableRoundedCorners = true,

EnableViewState = false,

Width = 200,

Title = "Floating",

Text = "Floating",

OnClientInitialize = "DockInit",

Top = rnd.Next(600),

Left= rnd.Next(1400)

};

RadDockLayout1.Controls.Add(rd);

rd.Dispose();

break;

case "Title":

((RadDock)RadDockZone1.Controls[Convert.ToInt32(hdnDeneme.Value)]).Title = e.Item.Value;

break;

default:

break;

}

Greetings,
Pero
the Telerik team

answered on 07 Feb 2011, 09:50 AM

Hi Hincal,

You can create a floating dock in your code, after you move the previous one, because the previous dock gets outside of the ajaxified layout on the client (on the server it is still a child of the docking layout). This means that on the next ajax request, the moved dock will not be updated and it will stay on the page, even though it is not recreated on every postback. That's the reason why it was destroyed when not moved - it was still in the ajaxified layout and was affected by the ajax requests.
The state problems are caused by having more than one dock with a same UniqueName and ID. That's why I assign GUID to the dock's UniqueName. Another thing you should bare in mind - in my code the docks still get outside of the ajaxified layout, but I am bringing them back, before the ajax request occurs, to avoid ajax problems and JavaScript exceptions.

All the best,
Pero
the Telerik team