Cancel OnClientDragStart() in UI for ASP.NET AJAX Dock

Kian Cha

22 posts

Member since:
May 2007

Posted 15 Jan 2008 Link to this post

Hi,

Is that possible to cancel dragging once it's started? I tried using eventArgs.set_cancel() but this method is not supported.

function OnClientDragStart(sender, eventArgs)
{
    var dock = sender;

    // Collapse/Expand dock on single click anywhere in title bar.
    if(dock)
    {
        var isCollapsed = !dock.get_collapsed();
        dock.set_collapsed(isCollapsed);
    }

    // Cancel drag
    eventArgs.set_cancel( true); // error: object doesn't support this method.
}

Thanks.

Kian

Petya

Admin

869 posts

Posted 16 Jan 2008 Link to this post

Hello Kian Cha,

Currently you cannot cancel the DragStart event. We will log this request in our TODO list. However, I noticed the code you execute in OnClientDragStart and I would like to ask you to provide some more information about what you are trying to achieve - maybe the Pin/Unpin functionality can be of help to you as then you can force the dock not to move and still have ExpandCollapse.

Greetings,
Petya
the Telerik team

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

Kian Cha

22 posts

Member since:
May 2007

Posted 16 Jan 2008 Link to this post

Hi,

What I am trying to achieve is to customize RadDock so that user can collapse/expand the pane by clicking anywhere on the title bar. I looked and didn't see any control properties, example or documentation that demonstrates that.

I have a tabstrip control, embedded in each tab is an user control which contains a RadDock. Ondoubleclick event doesn't work because I don't know of a way to access the dock object of the active tab. OnClientDragStart appears to give me what I need except for the dragging. Setting Pinned(true) or EnableDrag(false) property will mute all drag control events. Please let me know if you know of a way to acheive this. Any help would be greatly appreciated.

Thanks.

Kian

Petya

Admin

869 posts

Posted 17 Jan 2008 Link to this post

Hello Kian Cha,

Just one additional question - as far as I understand you want to collapse/expand the dock on any click on the titlebar. At the same time disabling dragging is not suitable for your scenario - how are going to drag the dock if clicking on the titlebar will expand/collapse it? Are you implementing something similar to this online demo in terms of dragging the dock for some other element? Looking forward to your answer.

Regards,
Petya
the Telerik team

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

Kian Cha

22 posts

Member since:
May 2007

Posted 17 Jan 2008 Link to this post

Hi Petya,

No, I am not implementing something similar to the online demo for drag handle.

In addition to making the title bar clickable to expand/collapse, I also want to disable drag. The only reason I implement OnClientDragStart (and not setting EnableDrag to false) is because I can get to the dock object of the active tab in this event.

Thanks.

Kian

Petya

Admin

869 posts

Posted 18 Jan 2008 Link to this post

Hello Kian Cha,

Thank you for your clarification. Here is some sample code snippet that achieves the desired behavior:

    
            <asp:scriptmanager id="ScriptManager" runat="server"> 
        
                    </asp:scriptmanager> 
        
                    <script type="text/javascript"> 
        
                    function OnClientInitialize(sender, args) 
        
                    { 
        
                        $addHandlers(sender._handle, {"mousedown": myHandler}, sender); 
        
                    } 
        
                    function myHandler() 
        
                    { 
        
                        var isCollapsed = !this.get_collapsed();  
        
                        this.set_collapsed(isCollapsed);  
        
                    } 
        
                    </script> 
        
                    <telerik:raddock id="RadDock1" runat="server" text="RadDock1" title="RadDock1" top="200" left="200"  
        
                         enabledrag="false" onclientinitialize="OnClientInitialize"> 
        
                         <commands> 
        
                            <telerik:dockclosecommand /> 
        
                         </commands> 
        
                    </telerik:raddock>

Let us know if you find any problems with this code.

Best wishes,
Petya
the Telerik team

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

Kian Cha

22 posts

Member since:
May 2007

Posted 18 Jan 2008 Link to this post

Hi Petya,

This is exactly what I need! Your code works perfectly. Thank you very much for your help.

Where can I find documentation for Prometheus object and event API references (dock.get_collapsed, eventArgs.get_commandName, sender.get_id, etc.) and global script functions ($Find, $addHandler, etc.)? I've checked out Prometheus online help but didn't find the information there.

http://www.telerik.com/help/radcontrols/prometheus/

Again. Thanks for all your help!

Kian

Kian Cha

22 posts

Member since:
May 2007

Posted 20 Jan 2008 Link to this post

Hi Petya,

A side effect of the provided solution is that now collapse/expand dock state can no longer be persisted. It looks as if Raddock only persists states from dock commands because the only way I can get the control to persist state is by reverting back to the old implementation (disabling $addHandler and turning on CollapseExpand command). The mouse down handler works wonderfully and I would like to keep it. Is there anyway to get your proposed solution to work with dock load-save function?

Thanks.

Kian

Petya

Admin

869 posts

Posted 21 Jan 2008 Link to this post

Hi Kian Cha,

To achieve the desired behavior you need to modify the myHandler function that I sent you before:

        function myHandler()
        {
            var isCollapsed = !this.get_collapsed();
            this.set_collapsed(isCollapsed);
            this.updateClientState();
            this.doPostBack('ExpandCollapse');
        }

I am attaching our Dynamically Created Docks online demo demonstrating a dynamic scenario with preservation of state where the docks have the expand/collapse behavior you would like to have. Hope you find it helpful.

Concerning the documentation question you asked - the JavaScript methods such as $find, $addHandlers, etc. are ASP.NET AJAX methods and useful resources you can find here. Concerning RadDock Prometheus documentation we are constantly working on improving it, so let us know if there is something specific that you do not find but think should be included in the help resources.

Greetings,
Petya
the Telerik team

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

TitlebarExpandCollapse.zip

skysailor

113 posts

Member since:
Jul 2007

Posted 26 Jun 2008 Link to this post

Hi,
I think this is an important function and you should consider making this option a standard part of the control. The need for a Collapsible Panel is quite common and that is what I am using it for. You don't have any other controls that make a simple collapsible panel.

Also it would be nice to be able to have the expand/collapse command visible in the top right of the dock title bar. However if you do that then when you click on the command it collapses the dock and then immediately expands it. The function is done twice due to the button click and the handler. How would you suggest I work around this?
Clayton.

Obi-Wan Kenobi

460 posts

Member since:
Aug 2007

Posted 30 Jun 2008 Link to this post

From the Petya's code I saw that the handler is attached to the entire titlebar.
You can attach it only to the "<em class="rdTitle">Dock</em>", which is part of the titlebar without the commands and everything should be ok.
Hope this helps.

skysailor

113 posts

Member since:
Jul 2007

Posted 30 Jun 2008 Link to this post

Hi,
Thanks for the sugggestion. I'm not sure how to achieve what you suggest though. Could you please provide some code?
Clayton.