ASP.NET WebForms and MVC: Ribbon Control (What's new in 13.2)

ASP.NET Team Blog
18 November 2013

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:

Responsive - DevExpress ASP.NET Ribbon Control

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

DevExpress ASP.NET Ribbon - Adaptive layout

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.

DevExpress ASP.NET Ribbon Control in Moderno Theme

Data Binding

Data Binding - DevExpress ASP.NET Ribbon

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

DevExpress ASP.NET Ribbon - 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:

Ribbon for ASP.NET WebForms

And as a native ASP.NET MVC extension:

Ribbon for ASP.NET MVC

Thanks!

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.