Limit number of docks per zone without displaying placeholder

10 posts, 0 answers
  1. Gabriel
    Gabriel avatar
    2 posts
    Member since:
    Nov 2008

    Posted 12 Nov 2008 Link to this post

    I have three docks in three zones, and a destination zone. I want to be able to drag docks into the destination zone, only allowing for at most one dock in the destination zone. I've written custom javascript code to do this, but my problem is that when I drag a dock onto the destination zone, before I let go of the mouse, the placeholder already shows up - it effectively pushes around the existing dock in the destination zone. How do I disable the placeholder? This is the code that checks to see if the destination zone contains a dock and if so, prevents another one from being dragged in there (on the dock I have OnClientDrag set to DragDock, this function):

            function DragDock(dock) {
                // get the hit zone
                var hitZone = dock._hitZone;
               
                if (hitZone != null) {
                    // find out if the hit zone has a dock
                    if (hitZone.get_docks().length > 0) {
                        // if so, add the hit zone to the list of forbidden zones of the incoming dock
                        var forbiddenZones = dock.get_forbiddenZones();
                        forbiddenZones.push(hitZone._clientID);
                    }
                }
  2. Petko
    Admin
    Petko avatar
    45 posts

    Posted 13 Nov 2008 Link to this post

    Hello Gabriel,

    I prepared a small sample for you that shows how to achieve the desired behavior. Hope it helps you.
    ASPX:
    <head runat="server">  
        <title>Untitled Page</title> 
        <script type="text/javascript">  
        var AllDocks = new Array();  
        var ForbiddenZones = new Array("DestZone");  
        var EmptyForbiddenZones = new Array();  
        var LatestMovedRadDockInDestZone;  
          
        function ClientInitialize(dock,args)  
        {  
            AllDocks.push(dock);  
        }  
         function DockPositionChanged(dock,args)  
         {  
            var hitZoneID = dock.get_dockZoneID();  
            if(hitZoneID == "DestZone")  
            {    
               LatestMovedRadDockInDestZone = dock;  
               for(var i=0;i<AllDocks.length;i++)  
               {  
                if(dock != AllDocks[i])  
                {  
                    AllDocks[i].set_forbiddenZones(ForbiddenZones);  
                }  
               }  
            }  
            else  
            {  
                if(LatestMovedRadDockInDestZone == dock)  
                {  
                    for(var i=0;i<AllDocks.length;i++)  
                       {  
                        AllDocks[i].set_forbiddenZones(EmptyForbiddenZones);  
                       }  
                }             
            }  
         }  
        </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" Width="200px">  
                    <telerik:RadDock ID="RadDock1" runat="server"   
                    OnClientInitialize="ClientInitialize" 
                    OnClientDockPositionChanged="DockPositionChanged" 
                  ></telerik:RadDock>    
                </telerik:RadDockZone> 
                <telerik:RadDockZone ID="RadDockZone2" runat="server" Width="200px">  
                    <telerik:RadDock ID="RadDock2" runat="server" 
                    OnClientInitialize="ClientInitialize" 
                    OnClientDockPositionChanged="DockPositionChanged" 
                  ></telerik:RadDock>    
                </telerik:RadDockZone> 
                <telerik:RadDockZone ID="RadDockZone3" runat="server" Width="200px">  
                    <telerik:RadDock ID="RadDock3" runat="server" 
                    OnClientInitialize="ClientInitialize" 
                    OnClientDockPositionChanged="DockPositionChanged" 
                  ></telerik:RadDock>    
                </telerik:RadDockZone> 
                    Destination Zone              
                    <telerik:RadDockZone ID="DestZone" runat="server" Width="200px"></telerik:RadDockZone> 
              </telerik:RadDockLayout> 
         
        </div> 
        </form> 
    </body> 


    Greetings,
    Petko
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ulises
    Ulises avatar
    5 posts
    Member since:
    Dec 2008

    Posted 10 Dec 2008 Link to this post

    Hi. I need to solve the same case, but, with two destination zones and only one RadDock for each destination zone. What logic i need for this problem?
  5. Nikolay Raykov
    Admin
    Nikolay Raykov avatar
    102 posts

    Posted 15 Dec 2008 Link to this post

    Hello Ulises,

    When you have more than one destination zone you should ensure that you assign the correct forbidden zones and keep track of removing RadDocks from these zones. When you remove a RadDock from a destination zone you need to update the Forbidden Zones collection of all RadDocks. The same is valid when you add RadDock to a destination zone.

    function DockPositionChanging(dock, args)  
    {  
       if (dock.get_dockZoneID() == "DestZone1" || dock.get_dockZoneID() == "DestZone2")  
       {  
          for (var i = 0; i < AllDocks.length; i++)  
          {  
             RemoveForbiddenZone(AllDocks[i], dock.get_dockZoneID());  
          }  
       }  

    DockPositionChanging is the event handler function of the OnClientDockPositionChanging event. There the dock's zone from which the dock is being removed is checked whether it is one of the destination zones. If it is all RadDock's forbidden zones collections are updated(the zone is removed from the collection).

    function IsZoneForbidden(zones, zone)  
    {  
       var forbidden = false;  
       for (var i = 0; i < zones.length; i++)  
       {  
          if (zones[i] == zone)  
          {  
             forbidden = true;  
             break;  
          }  
       }  
              
       return forbidden;  
    }  
          
    function RemoveForbiddenZone(dock, zone)  
    {  
       var zones = dock.get_forbiddenZones();  
       for (var i = 0; i < zones.length; i++)  
       {  
          if (zones[i] == zone)  
          {  
             zones.splice(i, 1);  
             break;  
          }  
       }  
       dock.set_forbiddenZones(zones);  

    The IsZoneForbidden helper function is used to check whether a given zone is already added to the forbidden zones collection of a RadDock. RemoveForbiddenZone removes a zone from the forbidden zones collection.

    For your convenience I have attached a small sample that shows how to do this.

    Greetings,

    Nikolay Raykov
    the Telerik team

     


    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Ulises
    Ulises avatar
    5 posts
    Member since:
    Dec 2008

    Posted 15 Dec 2008 Link to this post

    PERFECT. This solve my problem, with a little changes. You know, the content place holder in the master pages with the "ctl00_". But this example was dynamite. Thanks.
  7. Ryan
    Ryan avatar
    26 posts
    Member since:
    Sep 2010

    Posted 24 Jan 2011 Link to this post

    I have a similar issue to this, but I guess theoretically it is a bit simpler. I have managed to write javascript that limits each zone to just one dock, and also swaps the two docks' zones. As such, it makes sense for there to be no placeholder when the user drags (as this implies that there will be two docks ending up in this zone). If possible I would like the placeholder to "highlight" the existing dock rather than just shove it down and create the blank placeholder. How can I do this?

    Thanks in advance,

    Ryan.
  8. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 26 Jan 2011 Link to this post

    Hi Ryan,

    With a little CSS you can achieve the desired behavior. All you need to do is set the HighlightedCssClass property of every RadDockZone, to the desired CSS class and you can apply any styling to the zone and the docks residing there. For example in the code below, I have set zoneClass to the property, and have the background of the zone go green when a dock is hovering over it, and the residing docks have a yellow borders. Here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            /*Apply the styles to the zone*/
            .zoneClass
            {
                background-color: Red !important;
            }
             
            /*Apply the styles to the dock in the zone*/
            .zoneClass .RadDock
            {
                border: 2px solid Yellow;
            }
             
            /*Hide the placeholder*/
            .rdPlaceHolder
            {
                display: none !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="RadScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px"
                    HighlightedCssClass="zoneClass">
                    <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"
                        Height="300px">
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock2" runat="server" Title="RadDock-Title" Width="300px"
                        Height="300px">
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>



    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.
  9. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 31 Jan 2011 Link to this post

    Just to be clear -- you actually set the background-color to red not green as indicated above. :)
  10. Ryan
    Ryan avatar
    26 posts
    Member since:
    Sep 2010

    Posted 31 Jan 2011 Link to this post

    OK, thanks for the suggestions, will give it a try.
  11. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 01 Feb 2011 Link to this post

    Hello Sean,

    True, the CSS code should look like:

    <style type="text/css">
        /*Apply the styles to the zone*/
        .zoneClass
        {
            background-color: Green !important;
        }
        .........................


    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017