Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolBar > Multi-Level RadToolBarDropDown

Not answered Multi-Level RadToolBarDropDown

Feed from this thread
  • Resource Development avatar

    Posted on Aug 10, 2010 (permalink)

    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

    Reply

  • Peter Peter admin's avatar

    Posted on Aug 12, 2010 (permalink)

    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

    Reply

  • Max avatar

    Posted on Feb 8, 2012 (permalink)

    Bump?

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ToolBar > Multi-Level RadToolBarDropDown
Related resources for "Multi-Level RadToolBarDropDown"

[   ASP.NET ToolBar Features  |  Documentation  |  Demos  |  Telerik TV   |   Self-Paced Trainer   |  Step-by-step Tutorial  ]