Collapse all docks in a dock zone excepted the dock that fired the OnClientCommand ExpandCollapse

13 posts, 0 answers
  1. Marc Schrader
    Marc Schrader avatar
    5 posts
    Member since:
    Nov 2008

    Posted 17 Jun 2011 Link to this post

    Hi,

    i am facing a really trival problem but i am not able to sort this out. I am sure, anyone of you guys can give me a clue!
    I have a dock zone that contains 4 docks.
    On the initial load all dock are collapsed.
    There are some other controls on that page that expand one of the described docks for showing information.

    My issue is really simple. At one time, i want to have just one dock expanded. So if another controls expands i.e. dock2, all other docks shall be collpased.

    At the moment i am trying the figure this out by using the OnClientComment event to do the necessary stuff, but with no avail.

    Thanks a lot..
    Marc
  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 21 Jun 2011 Link to this post

    Hello Marc Schrader,

    You can solve your problem by creating custom command, which expands the current RadDock and collapses the others. The controls, expanding the RadDocks will function in a similar way. This can be achieved through client-side event handlers and manipulating the collapsed state with methods of the RadDock Client Object.

    Below you can find sample, demonstrating this:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!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>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <script language="javascript" type="text/javascript">
     
                var Docks = [];
     
                function OnClientInitialize(dock, args) {
                    Docks[Docks.length] = dock;
                }
     
                function CustomCommand(dock, args) {
                    if (args.Command.get_name() == "Expand/Collapse") {
                        ChangeDockState(dock, !dock.get_collapsed());
                    }
                }
     
                function ExpandDock1(sender, args) {
                    var dock = $find("<%= RadDock1.ClientID %>");
                    ChangeDockState(dock, false);
                }
     
                function ExpandDock2(sender, args) {
                    var dock = $find("<%= RadDock2.ClientID %>");
                    ChangeDockState(dock, false);
                }
     
                function ChangeDockState(dock, state) {
                    dock.set_collapsed(state);
                    for (var i = 0; i < Docks.length; i++) {
                        var newDock = Docks[i];
                        if (newDock != dock) {
                            newDock.set_collapsed(true);
                            newDock.updateClientState();
                        }
                    }
                }
             
            </script>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Text="RadDock1 Content"
                        Collapsed="true" OnClientInitialize="OnClientInitialize">
                        <Commands>
                            <telerik:DockCloseCommand />
                            <telerik:DockCommand AutoPostBack="false" Name="Expand/Collapse" OnClientCommand="CustomCommand" />
                        </Commands>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Text="RadDock2 Content"
                        Collapsed="true" OnClientInitialize="OnClientInitialize">
                        <Commands>
                            <telerik:DockCloseCommand />
                            <telerik:DockCommand AutoPostBack="false" Name="Expand/Collapse" OnClientCommand="CustomCommand" />
                        </Commands>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
            <telerik:RadButton ID="ExpandRadDock1" runat="server" Text="Expand RadDock 1" AutoPostBack="false" OnClientClicking="ExpandDock1">
            </telerik:RadButton>
            <telerik:RadButton ID="ExpandRadDock2" runat="server" Text="Expand RadDock 2" AutoPostBack="false" OnClientClicking="ExpandDock2">
            </telerik:RadButton>
     
            <br /><br />
            <asp:Button ID="Button1" runat="server" Text="Submit" />
             
        </div>
        </form>
    </body>
    </html>


    All the best,
    Slav
    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marc Schrader
    Marc Schrader avatar
    5 posts
    Member since:
    Nov 2008

    Posted 21 Jun 2011 Link to this post

    Hello Slav,

    thanks for your response. But it still doesnt fix my issue.This is my code:
    function onSelectedIndexChanged(sender, eventArgs) {
            itemID = eventArgs.get_item().get_value();
            getData(itemID );
            ExpandDock2(null, null);
        }
     
     
    var Docks = [];
     
        function OnClientInitialize(dock, args) {
            Docks[Docks.length] = dock;
        }
     
        function ExpandDock1(sender, args) {
            var dock = $find("<%= RadDock1.ClientID %>");
            ChangeDockState(dock, false);
        }
     
        function ExpandDock2(sender, args) {
            var dock = $find("<%= RadDock2.ClientID %>");
            ChangeDockState(dock, false);
        }
     
        function ExpandDock3(sender, args) {
            var dock = $find("<%= RadDock3.ClientID %>");
            ChangeDockState(dock, false);
        }
     
        function ChangeDockState(dock, state) {
            for (var i = 0; i < 3; i++) {           
                var newDock = Docks[i];            
                if (newDock != dock) {
                    newDock.set_collapsed(true);
                    newDock.updateClientState();
                }
            }       
        }
     
        function CustomCommand(dock, args) {
            if (args.Command.get_name() == "ExpandCollapse") {
                ChangeDockState(dock, !dock.get_collapsed());
            }
        }





    When the selectedIndexChanged event will be fired the expected docks expands.
    Now i want to expand another dock. i.e. Raddock1 by clicking the expand button.
    CustomCommand calls ChangeDockState and change each state of the given docks.
    While changing the state the function call itself recursively.

    If i put the line
    dock.set_collapsed(state);
    as the first loop call into the function the explorer crashes as well...

    Do you have any suggestion?

    Thank in advance.
    Marc
  5. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 21 Jun 2011 Link to this post

    Hello Marc Schrader,

    Your browser crashes because you call the function ChangeDockState on ExpandCollapse command. ChangeDockState triggers collapse of RadDock and this causes recursion. In the example I have added in my first post I used custom command called "Expand/Collapse" which removes that problem. From the attached demo project you can gain full understanding of the implementation.

    If you are still unable to find solution, please send a fully working project.

    Greetings,
    Slav
    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.

  6. Marc Schrader
    Marc Schrader avatar
    5 posts
    Member since:
    Nov 2008

    Posted 24 Jun 2011 Link to this post

    This is working GREAT and solves my issue!!! Thanks a lot for your help!

    Marc

  7. Michael
    Michael avatar
    5 posts
    Member since:
    Jan 2013

    Posted 09 Apr 2013 Link to this post

    That add another control and still makes available expanding all of the Docks.  Why can't you override this?
  8. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 12 Apr 2013 Link to this post

    Hi Michael,

    I am not quite sure what is the functionality that you want to achieve. Please provide a more detailed description of your scenario so that I can help you accordingly.

    Greetings,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Michael
    Michael avatar
    5 posts
    Member since:
    Jan 2013

    Posted 12 Apr 2013 Link to this post

    Without adding an additional custom button to the RadDock title bar, simply override the built-in ExpandCollapse functionality to maintain one RadDock open per RadDockZone.

    I ended up attaching the 'CustomCommand' to each RadDock in OnClientInitialize() and threw away the pre-built ExpandCollapse.

    This works before I open a RadWindow
    //for limited the expansion of the docks
                var Docks = [];

                function OnClientInitialize(dock, args) {
                    Docks[Docks.length] = dock;
                    var _dock = dock;
                    var _args = args;

                    $(".rdCommands li a").each(function (intIndex) {
                        var index = intIndex;
                        $(this).click(function () {
                            CustomCommand(_dock, index);
                        });
                    });

                }

                function CustomCommand(dock, intIndex) {
                        for (var i = 0; i < Docks.length; i++) {
                            if (i == 0) {
                                if (i != intIndex)
                                    Docks[i].set_collapsed(true);
                                else {
                                    Docks[i].set_collapsed(false);
                                }
                            }
                            else { 
                                if(dock != Docks[i])
                                    Docks[i].set_collapsed(true);
                            }
                        }
                        return;
                }

    Strange behavior on the first RadDock in a DockZone required special handling.
  10. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 17 Apr 2013 Link to this post

    Hello Michael,

    The CollapseExpand built-in command is tightly incorporated with the entire functionality of RadDock and you cannot easily modify its behavior. If I understand the applied modification correctly, you have simply handled the mouse click event of the command's element and trigger the 'CustomCommand' function which is incorrect.

    If you need to customize RadDock behavior to have a single expanded dock in a dock zone you should create a custom command to achieve this behavior, as demonstrated in the example provided by Slav in his previous reply.

    Also, an example of how to implement custom command is available in the following live demo:
    Dock - Commands

    Greetings,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  11. Michael
    Michael avatar
    5 posts
    Member since:
    Jan 2013

    Posted 17 Apr 2013 Link to this post

    "The CollapseExpand built-in command is tightly incorporated with the entire functionality of RadDock and you cannot easily modify its behavior."

    That's the real answer Dobromir.  There isn't a way to modify it easily without adding an additional button (RE: Slav's custom command example) which isn't going to work for end user experience.

    IMO, there should be a CollapseExpandOne built-in command added to the core RadDock functionality to support this - which presents an identical UI to the end user and simply modifies the behavior.

    Until then, handling the click event of the command element is a viable work around and I find it presumptuous to deem "incorrect" when it works fine.
  12. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 22 Apr 2013 Link to this post

    Hello Michael,

    The approach you have implemented alters the default behavior of the CollapseExpand command. Such customizations of the RadControls for ASP.NET AJAX are out of the scope of our support service.

    The example that demonstrates the custom command implementation should help you expand only one RadDock at a time. If there is a problem with incorporating it in your actual project, please let me know what is not meeting your requirements so that I can help you achieve the desired effect if possible.

    Kind regards,
    Slav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  13. Graham
    Graham avatar
    10 posts
    Member since:
    Mar 2014

    Posted 28 Mar 2014 Link to this post

    hello

    similar to the above request, I have a need to create a web site which offers users a number of options. they can chose only 1 option and then need to enter additional information related to that options, for example, could have a drop down list or option radio button with these:
    Credit Card
    Purchase Order
    Direct Debit

    Then the detail control will prompt for :

    Credit Card name
    Credit card number

    or
    Purchase Order number etc


    I was thinking of using a Dock Zone with docks for Credit Card, and then some code to link the dropdown list to the docks. Or maybe have a tick box in the dock heading?

    or should I be using a different control?

    thanks for any advise

    graham





  14. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 02 Apr 2014 Link to this post

    Hello Graham,

    Note that you can achieve the same effect simply by loading a different web user control, depending on the first set of options. If you want just to dynamically change predefined content, you can use only user controls. However, if you want to drag this content and place it in predefined zones, you can use the RadDock control for this purpose.

    The demo My Portal shows a similar scenario with drop downs for selecting a RadDock with different content and then adding it on the page: http://demos.telerik.com/aspnet-ajax/dock/examples/myportal/defaultcs.aspx. You can modify it according to your needs, for example add the dock when a new option is selected from the drop down, instead of clicking on a button.

    If this is not what you are after, please describe your scenario in greater detail so that I can help you accordingly.

    Regards,
    Slav
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017