This topic describes the Web Dashboard's mobile layout that enables you to display dashboards on mobile phones. The MobileLayoutExtension extension allows you to use a mobile layout for mobile browsers when the Web Dashboard operates in the 'Viewer' and 'ViewerOnly' modes.
Go to the Mobile-Ready Dashboard Layout demo to see this functionality in action.
The Web Dashboard control has the following requirements to work correctly on the mobile phones:
Make sure that all required client libraries are added to the web page.
The browser requires a special tag to properly render its content in a mobile browser. Without a viewport meta tag, mobile devices render pages at typical desktop screen widths, and then scale the pages to fit the mobile screens. Setting the viewport enables you to control the width and scaling of the viewport. Include the viewport <meta> tag in your HTML file inside the <head> block as shown below:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The content attribute defines the following options:
Web Dashboard in the mobile layout consists of the following views:
The List view displays all dashboard items used in the current dashboard. The item's interactivity is disabled. Filter elements are not displayed in the List view (see Dashboard Items Behavior).
The Item view displays the selected item. Interactivity is supported. Filter elements are not displayed in the Item view (see Dashboard Items Behavior).
The Filter panel displays filters that are applied to the entire dashboard / dashboard items. Click the Filter button (the icon) in the List view / Item view to see the filters applied to the entire dashboard / dashboard item, respectively. Click the required filter in the Filter panel to open the corresponding filter element and filter data.
You can register the dashboard panel extension to display a list of available dashboards in a mobile layout and have a capability to switch between them. The Dashboards button is displayed at the top of the control after you register the extension.
The Mobile layout is automatically enabled on mobile phones. You can use the MobileLayoutEnabled property of the corresponding technology/framework to change the mobile layout's mode:
Technology / Framework
ASP.NET Web Forms
ASP.NET Core MVC
The code below shows how to change the mobile layout's mode for different technologies/frameworks:
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server" MobileLayoutEnabled="Always" WorkingMode="Viewer"> </dx:ASPxDashboard>
The items listed below are displayed with the following specifics when used in the mobile layout: