Allowing only one Dock in a DockZone

[Imar]

Hi there,

I am trying to limit the number of docks in a zone to 1. Basically, I have three zones:

The selection zone that contains docks that can be selected
2 "drop zones" to which you can drag items from the selection zone.

What I want to do is this:

1. Once you drag an item from the selection zone to one of the drop zones, and the drop zone already contains a dock, that dock must be removed from the drop zone and placed back in the selection zone.
2. I'd like to have the same behavior for dragging items between the zones. That is, if I drag a dock from dropzone 1 to dropzone 2 and dropzone2 already contains a dock, that dock must be placed back in the selection zone.

Is this possible? If so, how?

I tried handling the PositionChanged handler server side, but it also fires for the current item (as its index may have changed), so I can't figure out what dock is new, and which one was already there.

Any suggestions, pointers to the help file and so on are more than welcome.

Cheers,

Imar

[Nikolay Raykov]

Hi Imar,

In order to accomplish what you want you should rely on the client-side API of RadDock. You need to attach event handlers for the OnClientDockPositionChanged and OnClientDragStart events. You could find more information about them in these help articles:

http://www.telerik.com/help/aspnet-ajax/dock_clientsideonclientdockpositionchanged.html
http://www.telerik.com/help/aspnet-ajax/dock_clientsideonclientdragstart.html

Here is how a RadDock declaration should look like:

<telerik:RadDock ID="RadDock1" runat="server" Title="RadDock1"  OnClientDockPositionChanged="DockPositionChanged" OnClientDragStart="OnClientDragStart"> </telerik:RadDock>

Below are the JavaScript event handler definitions:

<script type="text/javascript">
            var dockZoneID;
            function DockPositionChanged(dock)
            {
                var selectionZone = $find('<%= RadDockZone1.ClientID %>');
                var newDockZoneID = dock.get_dockZoneID();
                //if the dock is floated or dropped in the selection zone return
                if (newDockZoneID == '' || selectionZone.get_clientID() == newDockZoneID) return;

                if (dockZoneID != newDockZoneID)
                {
                    var dockZone = $find(newDockZoneID);
                    var docks = dockZone.get_docks();
                    if (docks.length > 1)
                    {
                        selectionZone.dock(dock);
                    }
                }
            }

            function OnClientDragStart(dock)
            {
                dockZoneID = dock.get_dockZoneID();
            }
        </script>

This code checks whether the dock zone in which you have dropped your dock contains another docks - if it does your dock is placed back into the Selection Zone. The OnClientDragStart event handler monitors the dock zone Id from which the dock is being dragged and compares it to the new dock zone Id.

For your convenience I prepared a test page in which you could see this in action. Please use it as a reference.

Sincerely yours,
Nikolay Raykov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Imar]

Hi Nikolay,

Thanks for that. I tried similar code in the client event handler as well. In my case, I don't want to move the dropped control, but the one that is already in the zone, but I keep running into errors.

For example, as soon as I try to move a control back into the selection control I get an error on this code:

_85.style.zIndex= this.originalZIndex;

 

The originalZIndex here is null, and I thus get an exception. Problem is, it works fine in your simple sample site. However, in my case, things are much larger; controls in the selection zone are created programmatically, docks in the various zones are loaded from and saved to a state storage, etc. So, it's not so simple for me to send you a test project that demonstrates the behavior I am seeing.

This (your) code works:

if (docks.length > 1)
{
  selectionZone.dock(dock);
}

 

 

 

but this doesn't:

if (docks.length > 1)
{
  for (var i = 0; i < docks.length; i++)
  {
    if (docks[i]._title != dock._title)
    {
      selectionZone.dock(docks[i]);
    }
  }
}

As soon as I run this, I get the error on the zIndex on the line that docks the right control.

Any tips on how to approach this? What could be the reason for the missing zIndex? What do I look for?

Thanks for your support.

Imar

[Nikolay Raykov]

Hello Imar,

I could not reproduce your problem on my side - everything works OK. Since I am unable to observe the problem I cannot give you a suggestion of what is the possible reason that causes it and provide you with a workaround.

It would be great if you could put together a sample project (you could hard-code some of your values that come from the database) and open a support ticket to send it to us. If this is not possible at the moment, could you make a video in which this problem can be observed?

Best wishes,
Nikolay Raykov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Brian]

I've seen this or a similar error in the q2 2008 stuff as well. 
In the radDock.js logic the originalZIndex is an expando on the script object that is created when a Drag and Drop operation is started.  I ran into the issue because _resetPosition() in the same file expects the expando to exist.  I was simply running through a list of docks on the client docking them in a desired zone after undocking them.  The error can also lead to missing the dockZoneID in the clientState which causes unpredictabl behavior during post-back. (When you come back, your docks may have vanished or moved.)

I was able to work around this issue by simply giving the expected expando the same value on each dock object that it would have gotten from the DnD code before making my "dock()" calls.  YMMV.

Cheers,
Brian

[Imar]

Hi Brian,

Thanks for the follow up; I ended up doing something similar.

Cheers,

Imar