Multiple Expand/Collapse Commands

2 posts, 0 answers
  1. Mark
    Mark avatar
    132 posts
    Member since:
    Feb 2008

    Posted 09 Jun 2011 Link to this post

    Hi
    I have successfully moved my expand/collapse default commands to the left of my titlebar using css.
    .RadDock .rdTitleBar  
     {  
         text-align: left;  
     }  
     .RadDock .rdCenter .rdCommands  
     {  
         float: left !important;  
     }  
     .RadDock .rdTitleBar em  
     {  
         float: right !important;  
     }


    However, i would like to have the expand/collapse default commands on the left AND the right of the titlebar.

    Is this possible?
    If so, how would i achieve this?

    Many Thanks
    Mark
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 13 Jun 2011 Link to this post

    Hi Mark,

    This functionality is not supported by the RadDock out-of-the-box, but can be easily achieved with a bit of custom javascript code. For your convenience I have implemented a simple project showing this:
    <!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">
            .RadDock .rdTitleBar
            {
                text-align: left;
            }
            .RadDock .rdCenter .rdCommands
            {
                float: left !important;
            }
            .RadDock .rdTitleBar em
            {
                float: right !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="RadScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
            function ExpandCollapse(sender)
            {
                var dock = $find("RadDock1");
                dock.set_collapsed(!dock.get_collapsed());
                SwitchStates(dock.get_collapsed(), sender);
            }
            function OnClientInitialize(dock, args)
            {
                var spanExpand = $get("spanExpand");
                SwitchStates(dock.get_collapsed(), spanExpand);
            }
            function SwitchStates(isCollapsed, spanExpand)
            {
                if (isCollapsed)
                {
                    spanExpand.className = "rdExpand";
                    spanExpand.title = "Expand";
                }
                else
                {
                    spanExpand.className = "rdCollapse";
                    spanExpand.title = "Collapse";
                }
            }
        </script>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="500px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Title="" Width="300px" OnClientInitialize="OnClientInitialize">
                        <TitlebarTemplate>
                            <span class="rdCommands" style="float: right !important; display: block;"><a><span
                                id="spanExpand" title="Collapse" onclick="ExpandCollapse(this);" class="rdCollapse">
                            </span></a></span><em>RadDock-Title</em>
                        </TitlebarTemplate>
                        <ContentTemplate>
                            Dock's Content
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>


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

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