Collapse While Dragging

6 posts, 0 answers
  1. Shane_A2Z
    Shane_A2Z avatar
    5 posts
    Member since:
    Jun 2007

    Posted 12 Jul 2007 Link to this post

    How do yopu collapse a Dock while dragging? 
  2. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 12 Jul 2007 Link to this post

    Hi Shane,

    The following simple source code illustrates how to collapse RadDock while dragging it. To achieve this goal you have to handle the OnClientDragStart and OnClientDragEnd events of the RadDock object, and Collapse or Expand the RadDock.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="pages_Dock_Tickets_CollapseDockWhileDrag_Default" %> 
    <%@ 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 OnClientDragStart(dock,args)  
             {  
                    dock.set_Collapsed(true);  
             }  
             function OnClientDragEnd(dock,args)  
             {  
                    dock.set_Collapsed(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" > 
        </telerik:RadDockZone>   
                        
                <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock1"   
                Width="200px" Height="200px" 
                OnClientDragStart="OnClientDragStart" 
                OnClientDragEnd="OnClientDragEnd" 
                >                             
                    <ContentTemplate> 
                      FLY !!!  
                    </ContentTemplate>                                   
                </telerik:RadDock>   
          
                          
                    </telerik:RadDockLayout> 
        </div> 
        </form> 
    </body> 
    </html> 
     

    If you have any other questions please let us know!

    All the best,
    Petio Petkov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Chris
    Chris avatar
    33 posts
    Member since:
    Jan 2007

    Posted 26 Jul 2007 Link to this post

    Telerik,

    When I implemented this recommendation, it works great - collapsing on the drag and expanding on the drop - but only if I actually reorder the docks. If I just click the dock and then let up on the mouse, the dock will stay collapsed.

    In my case, I've dynamically loaded the docks assigning each dock the OnClientDragStart and OnClientDragEnd functions. Autopostback is also enabled for each dock and a simple mouse click and release DOES trigger a postback (or in my case, a callback). Why would only the dock I clicked on collapse after the postback and why not any of the other docks? The docks are reloaded into my one DockZone on each postback in Page_Init. I checked and the postback correctly reloads the dock with .collapsed = false on the server side.

    Any ideas how I can stop the dock from collapsing if I just click the dock and don't actually move it?

    Thanks,
    Chris
  4. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 27 Jul 2007 Link to this post

    Hi Chris,

    I made some small changes in the code from the previous post. Now it will works when the RadDock is with AutoPostBack = true.
    <%@ 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 OnClientDragStart(dock,args)  
             {  
                    dock.set_Collapsed(true);  
                    dock.updateClientState();  
             }  
             function OnClientDragEnd(dock,args)  
             {  
                    dock.set_Collapsed(false);  
                    dock.updateClientState();                  
             }  
        </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" > 
        </telerik:RadDockZone>   
                        
                <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock1"  AutoPostBack="true" 
                Width="200px" Height="200px" 
                OnClientDragStart="OnClientDragStart" 
                OnClientDockPositionChanged="OnClientDragEnd"              
                >                             
                    <ContentTemplate> 
                      FLY !!!  
                    </ContentTemplate>                                   
                </telerik:RadDock>   
          
                          
                    </telerik:RadDockLayout> 
        </div> 
        </form> 
    </body> 
    </html> 
     


    I hope that it will help you.

    Greetings,
    Petio Petkov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. Chris
    Chris avatar
    33 posts
    Member since:
    Jan 2007

    Posted 04 Aug 2007 Link to this post

    Petio,

    I believe you misunderstood my question. I dynamically load docks directly into one RadDockZone. I already set the dock's .autopostback=true property when I load them on Page_INIT.

    What I'm seeing though, is that when I click on the dock handle and then simply drop the dock in place, it will correctly post back, it will correctly NOT trigger the dock_positionChanged, but after I've reloaded/refreshed the dynamically loaded docks and post back to the web browser (all within an UpdatePanel), that dock panel is minimized - or actually it's empty, NOT minimized as the minimize icon is in the 'expanded' position. All of the other docks are still expanded and still have their content loaded within them.

    So to summarize, what's causing the dock that I drag but drop back in it's same place to postback only to return with that dock now empty and all the others still correctly contain their data? I should mention, that if I actually drag and drop to a different location, all docks are correctly repositioned and refreshed.

    At this point, I'm not sure if it's a quirky way I'm loading the docks dynamically or if it's a Dock problem. I'll continue to experiment on my end.

    Thanks,
    Chris
  6. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 07 Aug 2007 Link to this post

    Hello Chris,

    I am afraid we are still not sure what exactly is your requirement. To ensure a quick resolution to your problem,  it will be best to open a new support ticket and send us a sample, running project which reproduces the behavior that you experience. Please send us detailed reproductions steps and a short description of the desired behavior as well. Once we have a better view over your case, we will do our best to help.



    All the best,
    Petio Petkov
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top