Mehul Harry's DevExpress Blog

This Blog


Mehul Harry is the DevExpress Web Program Manager. Follow him on twitter: @Mehulharry

Subscribe (RSS, Email)


Dashboards: Mobile Layout for the Web (v17.2 CTP)

Now that the DevExpress Dashboard has been out for a few releases, we're seeing a growing demand from our customers for improving the Web Dashboard usage on mobile devices.

Good news! In this v17.2 release, we have experimented with a Mobile layout to make dashboards more user-friendly and interactive on mobile devices, as they are on Desktop browsers. This new mobile layout will be available as a CTP (Community Technology Preview) in the v17.2 release.

This was a challenging task to adapt a Dashboard that has many visual controls on it and shrink it to fit on mobile browsers. There are some difficulties centering around the Dashboard concept itself. For example, in dashboards, a user interacts with multiple connected items at the same time; but that is not possible on smartphone apps because of the small viewing area.

However, we've come up with a good solution. Our new mobile version will attempt to find a balance between usability of the entire dashboard versus viewing and interacting with one particular Dashboard Item.

To see this in action, check out this animation:

Visit our online demo and experience yourself:

Gallery View

In our mobile layout, we utilize a well-known mobile UI pattern – the Gallery.

The Gallery allows users to slide between dashboard items sequentially for data analysis or jump directly to an item for futher research.

Besides implementing the Gallery, we rethought a concept of the Dashboard Title and Items' toolbars so that they adapt to become mobile-friendly.

How to enable Mobile Layout

You can use mobile layout with any approach – Web Forms, MVC, .NET Core (CTP), or in a native Client-Side Approach. Follow this link to find more info about extensions: How to work with extensions.

To enable the mobile layout, follow the steps below:

  1. Make sure that your HTML page is mobile-friendly by setting the corresponding ViewPort metatag:
<meta name="viewport" content="width=device-width, initial-scale=1">

This meta tag is a common requirement for Mobile Browsers.

  1. Go to the Web Dashboard declaration and register the Mobile Layout extension using the following code snippet:
function onBeforeRender(sender) { 
  var dashboardControl = sender.GetDashboardControl(); 
    new DevExpress.Dashboard.MobileLayoutExtension(dashboardControl)

That’s it. Note that a mobile layout does not replace the classic layout; it’s enabled only in certain conditions:

  • The Web Dashboard control is set to the Viewer / ViewerOnly mode
  • The page is open in a mobile browser

Tip: You can use the Device Mode in the Chrome Developer Tools to test mobile views.

Project Status

Once again, this is a CTP version. Report any issues, missing functionality, or suggestions as regular Support Center tickets. We'll be happy to review your feedback and optimize the API based on what we hear. This also serves as a reminder that the API is subject to change until we officially release.

Known limitations

This current version of the Dashboard's mobile layout does not visually indicate a Dashboard Item Group. This means that dashboard items filtering may not work in an obvious way for the end users. To avoid this issue, we recommend that you not show a dashboard with Groups in the Mobile Layout.

We'll continue to work on improving the Dashboard before the final release.

Are you excited by the DevExpress Web Dashboard's Mobile Layout? Drop me a line below.



Twitter: @mehulharry

Published Nov 22 2017, 09:00 AM by
Filed under: , ,
Bookmark and Share


Shamil Mustafin

This is very good news!

P.S. it will be a separate product ?

November 23, 2017 9:18 PM

Anurag Mahato

what about devextreme(angular) ?

November 25, 2017 8:50 PM

Alfred Rakgole 2

Great news!

DevExtreme dashboard viewer would be a great addition, but this is a very good start for mobile enabled dashboard viewer.

November 26, 2017 5:49 PM

Sergi (DevExpress Support)


@Shamil, Mobile Layout is an addition to the current Web Dashboard product.

@Anurag, at the moment, Web Dashboard does not provide native support for Angular. However, it should be possible to embed our HTML5 JavaScript Dashboard Control to any JavaScript application and use ASP.NET MVC 5 or ASP.NET Core server side as a backend. If you need more information on the subject, please post a ticket to our Support Center. We will be happy to assist you.

November 27, 2017 5:02 AM


We have been trying this feature for a while.

Quite soon you find that you miss the overview you

get on a designed layout. We use “master filter” in almost every dashboard,

and showing the items “one by one” makes a bad interaction.

- We would like to see way to toggle between the “designed layout”, and the “one by one”

Is that a coming feature?

January 14, 2018 11:31 PM

Andrey (DevExpress)


Thank you for sharing your feedback. It matches our UX testing results of the current CTP product.

Currently, we are thinking over different ways of improving this interaction part.

January 15, 2018 2:35 AM

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at You can also follow him on Twitter:

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 or call us at +1 (818) 844-3383


DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, Delphi, HTML5 or iOS & Android development. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

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