This topic describes the Web Dashboard's mobile layout that enables you to display dashboards on mobile phones. The mobile layout is available in the 'Viewer' and 'ViewerOnly' modes and works for mobile browsers only.
Go to the Mobile-Ready Dashboard Layout demo to see this functionality in action.
The MobileLayoutExtension extension allows you to use a mobile layout. The extension is enabled by default. Take into account the following requirements to properly use the Web Dashboard control on mobile phones:
Make sure that all required client libraries are added to the web page.
The Web Dashboard requires a special tag to properly render its content in a mobile browser. 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:
- The page width is set to fit the width of the device's screen (which varies depending on the device).
- Users are prevented from zooming and scaling the web page.
Mobile Layout Views
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 filters applied on 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.
Mobile Layout Mode
The Mobile layout is automatically enabled on mobile phones. You can configure the mobile layout mode using the MobileLayoutEnabled property of the required technology/framework:
Technology / Framework
ASP.NET Web Forms
ASP.NET Core MVC
The code below shows how to change the mobile layout mode for different technologies/frameworks:
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server" MobileLayoutEnabled="Always" WorkingMode="Viewer"> </dx:ASPxDashboard>
Dashboard Items Behavior
Some items in the mobile layout are displayed with the following specifics:
- The Grid always adjusts columns automatically to the minimum width required to completely display its content (the ColumnWidthMode is set to AutoFitToContents).
- Grid hides columns to adapt the content to the screen or container size. Click the ellipsis button in the Grid's row to display hidden data inside the adaptive detail row.
- The default column fit of the sparkline and bars is two times tighter then in a desktop version.
- Column resizing is disabled.
- Cards in the mobile layout are always arranged automatically (the ContentArrangementMode property is set to Auto).
- Filter Elements
- Filter elements are displayed only in the Filter panel and are hidden in the List and Item views.