Multi-Level RadToolBarDropDown

3 posts, 0 answers
  1. Steve
    Steve avatar
    14 posts
    Member since:
    Oct 2006

    Posted 10 Aug 2010 Link to this post

    We're looking to implement the RadToolbar as a primary UI Interface, and everything works great save for the fact that we sometimes have Drop Down menu items that need submenus.  We know you can't have a RadToolBarDropDown as a button within a RadToolBarDropDown, so that's out, and while we can get that type of functionality with the RadMenu, we then lose the ability to specify validation and validation groups on individual buttons in the toolbar.  We've tried using a RadToolBarButton with an ItemTemplate containing a RadMenu, but our problem with that is that it places the radMenu in a outlined box, so it loses the look of the other tool bar buttons.

    Essentially, Is there a way to accomplish this in one of the following ways:

    a) use a RadMenu in a RadToolbarButton ItemTemplate, but lose the outline styling around it and instead have it appear like any other toolbar button?

    b) Use the RadToolBarDropDown button but have it pop up a menu (maybe a RadContextMenu?) instead of it's normal drop down in the same location that would have appeared?


    Were open to other suggestions as well.

    Thanks
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 12 Aug 2010 Link to this post

    Hello,

    Perhaps, using a context menu is the neatest solution to this requirement. For example, try the following code and let me know if this is acceptable:

    <script type="text/javascript"
            function showMenuAt(e, x, y) { 
                var contextMenu = $find("<%= RadContextMenu1.ClientID %>"); 
                   
                if (isNaN(x) || isNaN(y)) { 
                    alert("Please provide valid integer coordinates"); 
                    return
                
                contextMenu.showAt(x, y); 
                $telerik.cancelRawEvent(e); 
            
        
            function OnClientDropDownOpening(sender, eventArgs) { 
                var x = eventArgs.get_item().get_element().offsetLeft; 
                var y = eventArgs.get_item().get_element().offsetTop + 27; 
                showMenuAt(eventArgs.get_domEvent(), x, y); 
            
        </script> 
            
        <telerik:RadToolBar ID="RadToolBar1" runat="server" OnClientDropDownOpening="OnClientDropDownOpening"
            <Items> 
                <telerik:RadToolBarButton runat="server" Text="Button 0"
                </telerik:RadToolBarButton> 
                <telerik:RadToolBarButton runat="server" Text="Button 1"
                </telerik:RadToolBarButton> 
                <telerik:RadToolBarButton runat="server" Text="Button 2"
                </telerik:RadToolBarButton> 
                <telerik:RadToolBarDropDown runat="server" Text="DropDown 0"
                </telerik:RadToolBarDropDown> 
            </Items> 
        </telerik:RadToolBar> 
        <telerik:RadContextMenu ID="RadContextMenu1" runat="server"
            <Items> 
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1"
                    <Items> 
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1"
                        </telerik:RadMenuItem> 
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2"
                        </telerik:RadMenuItem> 
                    </Items> 
                </telerik:RadMenuItem> 
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2"
                    <Items> 
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1"
                        </telerik:RadMenuItem> 
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2"
                        </telerik:RadMenuItem> 
                    </Items> 
                </telerik:RadMenuItem> 
                <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3"
                    <Items> 
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1"
                        </telerik:RadMenuItem> 
                        <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2"
                        </telerik:RadMenuItem> 
                    </Items> 
                </telerik:RadMenuItem> 
            </Items> 
        </telerik:RadContextMenu>



    Greetings,
    Peter
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Max
    Max avatar
    34 posts
    Member since:
    Dec 2011

    Posted 08 Feb 2012 Link to this post

    Bump?
Back to Top