Check out the new DevExpress ASP.NET Ribbon control for WebForms and MVC in the upcoming 13.2 release:
Ribbon History
The Ribbon metaphor was popularized by Microsoft when they included it with the release of Office 2007:
With the release of Microsoft Office 2007 came the "Fluent User Interface" or "Fluent UI", which replaced menus and customizable toolbars with a single "Office menu", a miniature toolbar known as "quick-access toolbar" and what came to be known as the ribbon: Multiple tabs, each holding a toolbar bearing buttons and occasionally other controls. -Wikipedia
And DevExpress customers have been requesting a web version for many releases now. I'm happy to tell you that the new DevExpress ASP.NET Ribbon control delivers a stunning UI and great functionality that you'd find in a rich Ribbon control.
It's Responsive!
The DevExpress ASP.NET Ribbon control is responsive:
In the animated gif above, the ribbon is covered by ASPxPopupControl to demonstrate the ribbon responsive layout.
Features
And, you can also set up these properties:
- AllowMinimize – specifies whether or not a ribbon control can be minimized. When this functionality is disabled, the minimize button is not displayed.
- ShowFileTab – specifies the file tab visibility.
- ShowTabs – specifies the tab header visibility.
- ShowGroupLabels – specifies the group label visibility.
Adaptive Layout support
The DevExpress ASP.NET Ribbon also provides an adaptive layout functionality. When a ribbon control has insufficient space to display all its items, groups with more than one item are collapsed, and each collapsed group displays an expand button.
Ribbon w/ Moderno Theme
And the new Ribbon control looks great in the newest DevExpress theme: Moderno.
Data Binding
The DevExpress ASP.NET Ribbon control can be populated with information taken from a data source using the DataSourceID or DataSource property. While binding, the control automatically creates tabs, groups and items; and retrieves their property values from the corresponding data items.
You can specify the data source fields to which the tabs, groups and items properties are mapped using the TabDataFields, GroupDataFields, and ItemDataFields properties, respectively.
Additionally, ASPxRibbon provides specific events related to data binding that can be handled according to your application logic.
- TabDataBound – allows you to customize the settings of an individual tab immediately after it is bound to data.
- GroupDataBound – allows you to customize the settings of an individual group immediately after it is bound to data.
- ItemDataBound – allows you to customize the settings of an individual item immediately after it is bound to data.
- DataBound – occurs after the control data binding is complete, and allows you to customize the control.
Templates
The DevExpress ASP.NET Ribbon (ASPxRibbon) control also supports ASP.NET templates which allow you to customize a control's appearance and layout. You can create templates for two elements: file tab (FileTabTemplate) and item (Template).
In the image above, the FileTabTemplate property is used to replace tab text with an arrow image that invokes a popup menu.
Menu Emulation
This example demonstrates how the ASPxRibbon control can be customized to implement the look and feel of a menu. For this purpose, all items are displayed large in size (the Size property is set to Large). The following properties are used to hide ribbon elements.
- ShowFileTab – specifies the file tab visibility.
- ShowTabs – specifies the tab header visibility.
- ShowGroupLabels – specifies the group label visibility.
Client-Side Events
The DevExpress ASP.NET Ribbon control provides you advanced client-side event support. Client-side events are triggered in response to specific actions or events on the client. You can create client-side code for the following events:
- ActiveTabChanged – fires after the active tab is changed.
- FileTabClicked – fires after a file tab is clicked.
- CommandExecuted – occurs after an action is executed on a ribbon item (e.g., an end-user clicks a button or changes an editor value).
- Init – occurs on the client side after the control is initialized, but prior to its display in the browser.
- MinimizationStateChanged – occurs when the ribbon minimization state is changed.
Available for WebForms & MVC!
The new ASP.NET Ribbon is available as a WebForms control:
And as a native ASP.NET MVC extension:
Thanks!