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

Floating dock restriction zone

9 Answers 164 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Philippe
Top achievements
Rank 1
Philippe asked on 06 Nov 2008, 04:12 PM
Dear Telerik,

I am trying to replicate the restriction zone behavior of the RadWindow (http://demos.telerik.com/ASPNET/Prometheus/Window/Examples/Default/DefaultCS.aspx) in a RadDock component. Using the Client-Side API, I can detect wether the dock is currently in it's restriction zone or not but I am unable to stop it's movement. I tried using set_pinned() on the dock to prevent it from moving whenever it got out of it's restrictive zone but it also cancels the drag. I also tried using set_top() / set_left() but it had no effect.

Is there a way to replicate such behavior with Docks?

Thank you.

9 Answers, 1 is accepted

Sort by
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 07 Nov 2008, 11:56 AM
As far as I know, you couldn't implement this feature in RadDock, because the drag event couldn't be canceled.
My suggestion is to handle OnDragEnd event and move the dock if it is outside the bounds, e.g.
 
<%@ register tagprefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI" %> 
<!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>Untitled Page</title> 
    <script type="text/javascript">   
        function DragEnd(dock,args)  
        {  
            if (dock.get_left()>400 || dock.get_top()>400)  
            {  
                dock.set_left(1);  
                dock.set_top(1);  
            }  
        }    
        </script>    
</head> 
<body> 
    <form id="form1" runat="server">  
    <asp:ScriptManager ID="ScriptManager1" runat="server">  
    </asp:ScriptManager> 
    <div>   
    <input type="text" id="testInput" />     
    <telerik:RadDockLayout ID="RadDockLayout1" runat="server">  
            <div style="border: 1px solid red;width:400px;height:400px;position:absolute;left:0px;top:0px">  
                <telerik:RadDock ID="RadDock1" runat="server" 
                OnClientDragEnd="DragEnd">  
                  
                </telerik:RadDock> 
            </div> 
    </telerik:RadDockLayout> 
    </div> 
    </form> 
</body> 
</html> 
 
 
0
Philippe
Top achievements
Rank 1
answered on 07 Nov 2008, 07:14 PM
Master Kenobi,

The solution you suggest was in fact my last resort and I was really hoping for a more elegant way such as the one found in the RadWindow example. I've been browsing through your forum and have found a few threads where people were requesting that the RadWindow control allow custom UserControls instead of acting like an IFrame. What I found was that the answers were invariantly to use the docks instead as they both allow boxed content to be dragged around the screen. Unfortunately for us, as you can see, both controls don't behave the same way.

With that said, the lack of consistency throughout the suite makes it hard sometimes to work with your controls. Why don't the drag events have cancelable args like most of the other events of the same control? Why is it that two similar controls like the RadWindow and RadDock don't share the same behaviors (such as zone restriction, tiling, etc.)?

Anyways, I'll put my mind to it and hopefully, I'll be able to pull off a Jedi trick to get around this annoyance.

May the force be with me!
0
Petio Petkov
Telerik team
answered on 10 Nov 2008, 02:29 PM
Hello Philippe,

Unfortunately, you cannot achieve the same "RestrictionZone" feature with the current implementation of the RadDock control. Keep in mind that the main purpose of The RadDock and RadWindow controls are completely different. The RadDock control main purpose is to be used as a layout control, while the RadWindow main purpose is to show external content. 

For the next major release we are planning to introduce some major improvements in the RadDock control and we will reconsider which features from the RadWindow control could be added to the RadDock control.


Regards,
Petio Petkov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Philippe
Top achievements
Rank 1
answered on 10 Nov 2008, 03:25 PM
Wouldn't it be easier to implement a CustomContentContainer in the RadWindow control like many people have been asking for? That way you won't have to port features from one to another ad vitam aeternam...


0
Petio Petkov
Telerik team
answered on 14 Nov 2008, 09:11 AM
Hello Philippe,

Thank you for your suggestion but we decided not to implement it for now because this feature will be out of the RadWindow scope.

We highly appreciate your involvement and we will be glad to have your cooperation in the future, too.

Greetings,
Petio Petkov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Tree
Top achievements
Rank 1
answered on 19 Jan 2009, 09:55 PM
Telerik, Any news on the ability to implement Restriction Zones for Rad Dock?
0
Nikolay Raykov
Telerik team
answered on 20 Jan 2009, 12:01 PM
Hello Emmanuel,

In the current version of Telerik ASP.NET AJAX Suite (SP2 for Q3 2008) RadDock control does not support Restriction Zones. Its purpose as a control is a lot different than that of RadWindow and the idea behind it is to give the users ability to move it around and change the layout of the web pages.

We are planning to implement new features, though, which will improve the user experience of RadDock control.

Sincerely yours,
Nikolay Raykov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Tree
Top achievements
Rank 1
answered on 20 Jan 2009, 03:48 PM
Thanks for the reply Nikolay.  I think I am using RadDock for its intended purpose - to allow users to move windows around and change the layout of a portal web page. 

My problem is that if I enable floating mode, the user is allowed to move the dock windows anywhere on the page including over top of my page banner and menus at the top.

My client's reaction to this behaviour was that it was a bug.  I have to agree that to a website visitor it seems odd and 'buggy' (but I understand that it isn't a Telerik bug - just a feature that doesn't exist).

I'll try Obi-Wan's suggestion.  Any other suggestions from Telerik to work-around this feature limitation? 
0
Nikolay Raykov
Telerik team
answered on 21 Jan 2009, 01:00 PM
Hello Emmanuel,

You could attach an event handler to the OnClientDragEnd event of RadDock and check if it is in a specified zone. Here is the code that I came up with:

<script type="text/javascript"
        var restrictionZone = $get('restrictionZone'); 
        function OnClientDragEnd(dock) 
        {            
            var restrBounds = $telerik.getBounds(restrictionZone); 
            var dockBounds = $telerik.getBounds(dock.get_element()); 
            var inBounds = Telerik.Web.UI.ResizeExtender.containsBounds(restrBounds, dockBounds); 
             
            if (!inBounds) 
            { 
                if (dockBounds.x < restrBounds.x) 
                { 
                    dock.set_left(restrBounds.x); 
                } 
                else if (restrBounds.x + restrBounds.width < dockBounds.x + dockBounds.width) 
                { 
                    dock.set_left(restrBounds.x + restrBounds.width - dockBounds.width); 
                } 
                 
                if (dockBounds.y < restrBounds.y) 
                { 
                    dock.set_top(restrBounds.y); 
                } 
                else if (restrBounds.y + restrBounds.height < dockBounds.y + dockBounds.height) 
                { 
                    dock.set_top(restrBounds.y + restrBounds.height - dockBounds.height); 
                } 
            } 
        } 
    </script> 

Now if you drag the docks outside of the "Restriction Zone" - it is going to be placed back inside it. You could show some visual clues to the user when the dock is outside of the zone if you like.

For your convenience I have attached my test page. Please use it as a reference.

Another approach to this would be to put the banners on the page inside a RadDock and set its RadDockZone as a ForbiddenZone. This way the users will not be able to place docks over the banners.

Best wishes,
Nikolay Raykov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Dock
Asked by
Philippe
Top achievements
Rank 1
Answers by
Obi-Wan Kenobi
Top achievements
Rank 1
Philippe
Top achievements
Rank 1
Petio Petkov
Telerik team
Tree
Top achievements
Rank 1
Nikolay Raykov
Telerik team
Share this question
or