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!

11 comment(s)
Noufal Aboobacker 1
Noufal Aboobacker 1

Hi Mehul,

You guys are rocking. I was just about to start our new project and thank you all that you made my life easier than ever.

One request. Please provide all what you have for Asp WebForms to MVC at the same time.

18 November, 2013
Nate Laff
Nate Laff

Obligatory "when will this get added to XAF?" post :)

18 November, 2013
Dennis (DevExpress Support)
Dennis (DevExpress Support)

Thanks for your interest, Nate. I think that quite many complex XAF Web apps may benefit from this UI as it enables better organization of commands. We will surely consider  this integration for the future.

19 November, 2013
Robbert Speet
Robbert Speet

That looks awesome !

I wonder what else you've got coming with the new release :-P

19 November, 2013
J Joubert
J Joubert

Fantastic. i am looking forward to seeing whats next!!

19 November, 2013
Gosha
Gosha

I wish this is being implemented for XAF as well... :)

19 November, 2013
George Fahnbulleh_1
George Fahnbulleh_1

Nice Mehul, will aspxMenu also be responsive?

19 November, 2013
Jim Foye
Jim Foye

Impressive.

19 November, 2013
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@George,

Thanks. The ASPxMenu doesn't support adaptive mode in 13.2 because we've had a lot of other big tasks in this release. :)

It's on the plans for future release. Track this suggestion to get updates: www.devexpress.com/.../S171683

29 November, 2013
Christopher Sato 2
Christopher Sato 2

I have a question for the ASP.NET MVC DevExpress Ribbon :

if i use a popupcontrol in a modal dialog can i put a ribbon inside the dialog?

27 November, 2014
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

Hi Christopher,

Could you please contact the DevExpress support team here and they can help you:

www.devexpress.com/.../Create

Thanks.

30 November, 2014

Please login or register to post comments.