DropDown slide direction

5 posts, 0 answers
  1. Gunnar
    Gunnar avatar
    17 posts
    Member since:
    Jun 2008

    Posted 26 Jun 2009 Link to this post

    Hi and thank you for an excellent UI Component Library!

    We're using it heavily in our development projects.

    My case:
    I'm using a Toolbar with Orientation = Vertical.
    The last item in the Toolbar is a DropDown.
    When I click the DropDown item the sub items of the DropDown will open in a list to the right of the DropDown item.
    I would like the DropDown list to open beneath the DropDown item.

    How can achieve this beaviour?

    Thanks
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 30 Jun 2009 Link to this post

    Hello Gunnar,

    This is a bit tricky approach that could be achieve by using both CSS and JavaScript. Here's a sample code snippet that shows the approach.

    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title></title
        <style type="text/css"
            .rtbDownSlide 
            { 
                position: absolute !important; 
                margin: 26px 0 0 -97px !important; 
            } 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
        </telerik:RadScriptManager> 
        <telerik:RadToolBar ID="RadToolBar1" runat="server" Orientation="Vertical" CollapseAnimation-Type="None" 
            ExpandAnimation-Type="None" OnClientDropDownOpening="OnClientDropDownOpening"
            <Items> 
                <telerik:RadToolBarButton runat="server" Text="Button 0"
                </telerik:RadToolBarButton> 
                <telerik:RadToolBarButton runat="server" Text="Button 1"
                </telerik:RadToolBarButton> 
                <telerik:RadToolBarDropDown runat="server" Text="DropDown 0"
                    <Buttons> 
                        <telerik:RadToolBarButton runat="server" Text="Child Button 1"
                        </telerik:RadToolBarButton> 
                        <telerik:RadToolBarButton runat="server" Text="Child Button 2"
                        </telerik:RadToolBarButton> 
                        <telerik:RadToolBarButton runat="server" Text="Child Button 3"
                        </telerik:RadToolBarButton> 
                        <telerik:RadToolBarButton runat="server" Text="Child Button 4"
                        </telerik:RadToolBarButton> 
                        <telerik:RadToolBarButton runat="server" Text="Child Button 5"
                        </telerik:RadToolBarButton> 
                    </Buttons> 
                </telerik:RadToolBarDropDown> 
                <telerik:RadToolBarButton runat="server" Text="Button 2"
                </telerik:RadToolBarButton> 
                <telerik:RadToolBarDropDown runat="server" Text="DropDown 1" CssClass="OpenDirectionDown"
                    <Buttons> 
                        <telerik:RadToolBarButton runat="server" Text="Child Button 1"
                        </telerik:RadToolBarButton> 
                        <telerik:RadToolBarButton runat="server" Text="Child Button 2"
                        </telerik:RadToolBarButton> 
                        <telerik:RadToolBarButton runat="server" Text="Child Button 3"
                        </telerik:RadToolBarButton> 
                        <telerik:RadToolBarButton runat="server" Text="Child Button 4"
                        </telerik:RadToolBarButton> 
                        <telerik:RadToolBarButton runat="server" Text="Child Button 5"
                        </telerik:RadToolBarButton> 
                    </Buttons> 
                </telerik:RadToolBarDropDown> 
            </Items> 
        </telerik:RadToolBar> 
     
        <script type="text/javascript"
            function OnClientDropDownOpening(sender, args) { 
                if (args.get_item().get_index() == sender.get_items().get_count() - 1) { 
                    $telerik.$(args.get_item().get_dropDownElement().parentNode).addClass("rtbDownSlide"); 
                } 
            } 
        </script> 
     
        </form> 
    </body> 
    </html> 


    Regards,
    Paul
    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gunnar
    Gunnar avatar
    17 posts
    Member since:
    Jun 2008

    Posted 30 Jun 2009 Link to this post

    Thanks for the reply,

    Any chance that this behaviour will be supported natively in future releases?

    Thanks
  5. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 30 Jun 2009 Link to this post

    Hello Gunnar,

    You are the first to request such behavior and frankly we don't think it is quite logical (considering you have other dropdowns in the toolbar that expand on the right). In a word, I'm afraid we won't implement this functionality in the control.

    Kind regards,
    Paul
    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
  6. Dave
    Dave avatar
    2 posts
    Member since:
    Apr 2009

    Posted 30 Jul 2009 Link to this post

    I don't understand how this could be the first request for this.  I have been using your controls for a very short time and immediately I am having to workaround this issue.  I have a dropdown as the last item in a toolbar as well and when it opens if I don't have my window expanded enough, then the popup is half off the page!

    Maybe we don't need the ability to custom tune slide direction, but if not given that option, we should be able to count on the control being smart enough to expand in a direction where there is room to expand.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017