Blogs

This Blog

Subscribe (RSS, Email)

Mehul Harry's DevExpress Blog

JavaScript, HTML 5, ASP.NET, DevExpress, ASP.NET MVC & WebForms, and News - Mehul Harry's DevExpress blog

April 2007 - Posts

  • Create Ribbon-Like Toolbars with ASPxMenu

    Update: Download the new Ribbon control as part of DevExpress v13.2 release.

    November 2013 Update: With the v13.2 release, we’ve introduced a beautiful new Ribbon control. Click the image to learn more about DevExpress ASP.NET controls:

    ASP.NET WebForms Ribbon Control

    ASP.NET WebForms Ribbon Control Dropdown Menu

    -------------

    Our ASPxMenu Suite sports some very cool features for a Web Navigation tool. Of course there are the standard menu things like root/sub menus arranged in a variety of ways. This image collage from the ASPxMenu home page shows off our Menu's fine capabilities.

    But what if you wanted to create a Toolbar and not just a menu? In fact, what if you wanted to create a cool Microsoft Office Ribbon-like toolbar? Now if you haven't yet seen the new Microsoft Office UI and its Ribbon toolbar then check out this Channel 9 video:

    Julie Larson-Green - Diving into the new Office 12  

    MS Office Ribbon Bar

     

     

     

     

     

    The new Ribbon Toolbar is certainly very slick and probably a nice way to spice an application. In fact, we currently (and beautifully) support this Ribbon Bar with our own version for both WinForms(XtraBars) and VCL(ExpressBars 6). Although this doesn't help us ASP.NET guys much.

    Luckily you can use our ASPxMenu Control and with some simple setup, turn it into a Ribbon-like toolbar. Now this is not a complete look and feel of the Ribbon control, however, it is a simple one with our control.

    In this six minute screencast, I'll show you how to basically bind the ASPxMenu control to a simple XML datasource:

    ASPxMenu: How to Create a Toolbar Emulation (6 min 3 sec)

    MenuItems.xml

    <?xml version="1.0" encoding="windows-1251"?>
    <MenuItems>
    <RootItem Text="Reply" ImageUrl="~/Images/reply.png" NavigateUrl="j_avascript:void(1);">
    <SubItem Text="Reply Sender" ImageUrl="~/Images/reply-sender.png" NavigateUrl="j_avascript:void(2);"/>
    <SubItem Text="Reply Group" ImageUrl="~/Images/reply-group.png" NavigateUrl="j_avascript:void(3);"/>
    </RootItem>
    <RootItem Text="Previous" ImageUrl="~/Images/prev.png" BeginGroup="True" NavigateUrl="j_avascript:void(4);"/>
    <RootItem Text="Next" ImageUrl="~/Images/next.png" NavigateUrl="j_avascript:void(5);"/>
    <RootItem Text="Help" ImageUrl="~/Images/help.png" BeginGroup="True" NavigateUrl="j_avascript:void(6);"/>
    </MenuItems>

    *NavigateUrl items changed for this post, underscore not necessary after j.

    After binding to the XmlDataSource and setting up some of the properties of the ASPxMenu we get a decent looking toolbar.

    In the screencast, I go a little further by using the templates of the ASPxMenu to really give the menu that Ribbon-like appearance. For the submenus, you need to create a webcontrol that will actually hold another ASPxMenu control. This new webcontrol will then be added to the main ASPxMenu control via code. The final result is a very stunning Ribbon-like toolbar for your ASP.NET 2 websites:

    You can download the source for this project here: ASPxMenu_Tutorial1.zip

    You can see this toolbars feature also in our online demos.

LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2014 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners