Can I specify Allowed Zones for a RadDock?

[Christoffer Rosenqvist]

I am making a dynamic RadDock structure with nested Docks and DockZones. My Docks are classified in different categories and I want one of the categories of Docks to only be able to be placed in the main DockZone on the page. The only way I have found of doing this is to specify ALL the existing DockZones in the ForbiddenZones-property which is very counterproductive.

Is there a way to tell a RadDock that it can ONLY dock in one (or more) specific DockZone?

[Schlurk]

I don't think there's any other way to achieve this aside from setting up all of the other zones under ForbiddenZones.

[Christoffer Rosenqvist]

Not the answer I was looking for, but the one I expected.

[eyal]

I couldn't find where to suggest this dock attribute, so I add my vote here.
I have a situation where zones and docks are dynamically created and the docks should be drag-and-dropped only within their zone. Using the ForbiddenZones attribute in this case is like specifying the Facebook profiles you DON'T want as friends. well.. sort of on a low scale. Anyway, you understand the point.

As Christoffer wrote (also other asked, if you search the dock forum), an AllowedZones attribute would be more than welcome.

thanks,
eyal

[Pero]

Hello,

The only way to "set AllowedZones" is to use the ForbiddenZones property. You can create a custom method that will set allowed zones (i.e. forbidden zones) to a given dock. Here is an example of such method:

private void SetAllowedZones(RadDock dock, string[] AllowedZones, RadDockLayout layout)
{
    string forbiddenZones = "";

    ReadOnlyCollection<RadDockZone> registeredZones = layout.RegisteredZones;
    foreach (RadDockZone zone in registeredZones)
    {
        string zoneID = zone.ID;
        if (!IsContained(AllowedZones, zone.ID))
        {
            forbiddenZones = zoneID + "|";
        }
    }
    forbiddenZones = forbiddenZones.Substring(0, forbiddenZones.LastIndexOf('|'));
    dock.ForbiddenZones = forbiddenZones.Split('|');
}
private bool IsContained(string[] array, string value)
{
    foreach (string item in array)
    {
        if (item == value)
            return true;
    }
    return false;
}

Best wishes,
Pero
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[eyal]

Thank you Pero for the quick answer.

I think you've missed the 'dynamically created' characteristic of zones. How can I loop through DockLayout zones when some zones are not yet created. In another case I have also Docklayouts created dynamically, so even layouts are not yet declared.

To be more clear - I have a dynamic user control that creates one layout, one zone, and dynamic number of docks. These docks are drag-and-drop enabled only within their zone. It means that the ForbiddenZones attribute should include all zones created by other instances of the user control. Since all the process is dynamic, it would make much sense to have an attribute called AllowedZones where I only have to add the zone of the newly created dock.

As I wrote before, it is an attribute suggestion in case you plan to extend the functionality of the dock control. I also realize from your forum that I'm not the only one wishing for such functionality.

br,
eyal

[Pero]

Hello Eyal,

In case when docks are dynamically created you can set the AllowedZones property later in the page lifecycle after all RadDocks and RadDockZones have been created and assign them the allowed zones. If you think that this causes additional processing you should consider setting allowed zones on the client. For example the following client script will set allowed zones (given in the form "RadDockZone1,RadDockZone2" etc.) to every dock when it is being initialized on the client:

<script type="text/javascript">
    var zones;
    function OnClientInitialize(dock, args)
    {
        zones = Telerik.Web.UI.RadDockZonesGlobalArray;
        var allowedZones = dock.get_element().AllowedZones;
        SetAllowedZones(dock, allowedZones.split(','));
    }

    function SetAllowedZones(dock, allowedZones)
    {
        var forbiddenZones = [];

        var zonesLength = zones.length;
        for (var i = 0; i < zonesLength; i++)
        {
            var zoneID = zones[i].get_id();
            if (!IsContained(allowedZones, zoneID))
            {
                forbiddenZones[forbiddenZones.length] = zoneID;
            }
        }
        dock.set_forbiddenZones(forbiddenZones);
    }

    function IsContained(allowedZones, zoneID)
    {
        var zoneLength = allowedZones.length;
        for (var i = 0; i < zoneLength; i++)
        {
            if (allowedZones[i] == zoneID)
                return true;
        }
        return false;
    }
</script>

Please note that I am setting the AllowedZones attribute from the server (you can do this when the docks are dynamically created) in the Page_Load event. Here is the full source code of the project that I tested:

.aspx

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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>
    <style type="text/css">
        .RadDockZone
        {
            float: left;
        }
    </style>

    <script type="text/javascript">
        var zones;
        function OnClientInitialize(dock, args)
        {
            zones = Telerik.Web.UI.RadDockZonesGlobalArray;
            var allowedZones = dock.get_element().AllowedZones;
            SetAllowedZones(dock, allowedZones.split(','));
        }

        function SetAllowedZones(dock, allowedZones)
        {
            var forbiddenZones = [];

            var zonesLength = zones.length;
            for (var i = 0; i < zonesLength; i++)
            {
                var zoneID = zones[i].get_id();
                if (!IsContained(allowedZones, zoneID))
                {
                    forbiddenZones[forbiddenZones.length] = zoneID;
                }
            }
            dock.set_forbiddenZones(forbiddenZones);
        }

        function IsContained(allowedZones, zoneID)
        {
            var zoneLength = allowedZones.length;
            for (var i = 0; i < zoneLength; i++)
            {
                if (allowedZones[i] == zoneID)
                    return true;
            }
            return false;
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock_111111"
                    OnClientInitialize="OnClientInitialize">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        Allowed Zones: 1, 3
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock_2222222"
                    OnClientInitialize="OnClientInitialize">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        Allowed Zones: 1
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock_3333333"
                    OnClientInitialize="OnClientInitialize">
                    <ContentTemplate>
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                        Allowed Zones: 1, 2
                        <br />
                        <br />
                        <br />
                        <br />
                        <br />
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
            <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="300px" Width="300px">
            </telerik:RadDockZone>
            <telerik:RadDockZone ID="RadDockZone3" runat="server" MinHeight="300px" Width="300px">
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
    </div>
    </form>
</body>
</html>

.cs

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.Collections.ObjectModel;

public partial class Allowed_Zones : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //string[] allowedZones = new string[] { "RadDockZone1", "RadDockZone3" };
        //SetAllowedZones(RadDock1, allowedZones, RadDockLayout1);
        RadDock1.Attributes.Add("AllowedZones", RadDockZone1.ClientID + "," + RadDockZone3.ClientID);
        RadDock2.Attributes.Add("AllowedZones", RadDockZone1.ClientID);
        RadDock3.Attributes.Add("AllowedZones", RadDockZone1.ClientID + "," + RadDockZone2.ClientID);
    }

    private void SetAllowedZones(RadDock dock, string[] AllowedZones, RadDockLayout layout)
    {
        string forbiddenZones = "";

        ReadOnlyCollection<RadDockZone> registeredZones = layout.RegisteredZones;
        foreach (RadDockZone zone in registeredZones)
        {
            string zoneID = zone.ID;
            if (!IsContained(AllowedZones, zone.ID))
            {
                forbiddenZones = zoneID + "|";
            }
        }
        forbiddenZones = forbiddenZones.Substring(0, forbiddenZones.LastIndexOf('|'));
        dock.ForbiddenZones = forbiddenZones.Split('|');
    }
    private bool IsContained(string[] array, string value)
    {
        foreach (string item in array)
        {
            if (item == value)
                return true;
        }
        return false;
    }
}

Greetings,
Pero
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[eyal]

Thank you again Pero!

I think the Client-side approach would be more suitable to my case. Thanks for that!

I want to emphasize that the intention of my original post was not to find a way setting allowed zones using the ForbiddenZones attribute, but rather to suggest implementing an AllowedZones attribute in future versions of RadDock.
Thanks anyway for your solution.

br,
eyal

[Darin Beard]

I have tried your code samples and even simplified them because I only want each dock to be dockable in the zone it starts in. Your clientside code works for that UNLESS it is a zone that is inside a dock of another zone. i.e. nested zones. It does not work on the nested zones, they are dockable by every other dock on the page still. Here's the javascript I am using on the OnClientInitialize event.

    var zones;

    function OnClientInitialize(dock, args) {
        zones = Telerik.Web.UI.RadDockZonesGlobalArray;
        SetAllowedZones(dock);
    }

    function SetAllowedZones(dock) {
        var forbiddenZones = [];

        var zonesLength = zones.length;
        for (var i = 0; i < zonesLength; i++) {
            var zoneID = zones[i].get_id();
            var dockedID = dock._dockZoneID;
            if (dockedID != zoneID) {
                forbiddenZones[forbiddenZones.length] = zoneID;
            }
        }
        dock.set_forbiddenZones(forbiddenZones);
    }

[Pero]

Hi Darin,

I forgot to mention that you need to use the the server ID of the zones in order for the forbidden zones to be set correctly. Because the DockZone.ID is not available on the client, we can use its UniqueName property to set the forbidden zones (by default the UniqueName equals the server ID). Here is the modified method:

function SetAllowedZones(dock, allowedZones)
{
    var forbiddenZones = [];

    var zonesLength = zones.length;
    for (var i = 0; i < zonesLength; i++)
    {
        if (!IsContained(allowedZones, zones[i].get_id()))
        {
            forbiddenZones[forbiddenZones.length] = zones[i].get_uniqueName();
        }
    }
    dock.set_forbiddenZones(forbiddenZones);
}

All the best,
Pero
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.