[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Collapse]Reporting
 [Expand]Product Information
 [Expand]Get Started with DevExpress Reporting
 [Expand]Create Popular Reports
 [Expand]Detailed Guide to DevExpress Reporting
 [Expand]Visual Studio Report Designer
 [Collapse]Create End-User Reporting Applications
   Cross-Platform Reporting
  [Expand]WinForms Reporting
  [Expand]WPF Reporting
  [Collapse]Web Reporting
   [Expand]General Information
   [Collapse]ASP.NET WebForms Reporting
    [Expand]Print and Export
    [Collapse]Document Viewer
     [Expand]Quick Start
      Mobile Mode
     [Expand]API and Customization
      Localization
    [Expand]End-User Report Designer
     Application Deployment
   [Expand]ASP.NET MVC Reporting
   [Expand]ASP.NET Core Reporting
   [Expand]JavaScript Reporting
   [Expand]Application Security
    End-User Documentation
  [Expand]WCF Report Service
  [Expand]Discontinued Platforms
   Localization
   Redistribution and Deployment
 [Expand]API Reference
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Mobile Mode

The Mobile Viewer allows you to view, navigate and export documents on phones and tablets.

Expanded Add the Mobile Viewer to a Web Page

Do the following to add the Mobile Viewer to a web page:

  1. In Visual Studio, expand the DX.19.1: Reporting Toolbox tab and drop the ASPxWebDocumentViewer control onto the page.

  2. Click the control's smart tag to invoke its actions list and enable the ASPxWebDocumentViewer.MobileMode option. This switches an ASPxWebDocumentViewer to the mobile version.

  3. For the Mobile Viewer to properly render document pages in a mobile browser, include the viewport <meta> tag to your HTML file inside the <head> block as shown below.

    The "content" attribute defines the following options:

    • The page width is set to fit the device's screen.
    • The initial zoom level when the browser first loads the page.
    • Users are cannot zoom the web page (they can zoom only the displayed document).
  4. Assign a report to the Mobile Viewer. To do this, click the control's smart tag, expand the Report drop-down list and select your report.

    You can use the ASPxWebDocumentViewer.OpenReport or ASPxWebDocumentViewer.OpenReportXmlLayout method to assign a report in code.

  5. Add the "resources" section to the application's Web.config file as shown below to transfer all the necessary script files to a client application automatically.

    See Document Viewer Requirements and Limitations to learn about manual Document Viewer integration.

Expanded Mobile Viewer Features

The Mobile Viewer provides the following main features:

  • Navigation

    Swipe the screen to the left or right to navigate between document pages.

    In the swipe mode, the Mobile Viewer displays the current page number and the total number of document pages.

  • Zoom

    The Mobile Viewer supports touch gestures that enable you to zoom a document in and out.

    Zoom In Zoom Out

    In the multi-page mode, the Mobile Viewer displays the maximum number of document pages (depending on the screen size and the document's zoom factor).

  • Text Search

    Tap a document and then tap the button in the displayed toolbar to search for specific text.

    Alternatively, swipe down on the document page and tap the dedicated area at the top.

    Then, in the invoked search editor, enter the text and tap ENTER on the screen's keyboard.

  • Export

    To export a document to supported formats, tap the button in the Viewer's toolbar and select the format.

  • Report Parameters

    The Mobile Viewer toolbar displays the button if a report contains any parameters.

    Tap this button to invoke a panel where you can specify and submit new parameter values.

  • Content Editing

    The mobile viewer supports content editing when this feature is enabled in a report document.

  • Reader Mode

    The Mobile Viewer switches to the reader mode that displays document pages without borders.

    Reader Mode = True Reader Mode = False

    Use the MobileWebDocumentViewerSettings.ReaderMode property to disable the reader mode.

  • Animation

    Most of the actions performed on a document in the Mobile Viewer are animated.

    Set the MobileWebDocumentViewerSettings.AnimationEnabled property to false to disable this animation.

Expanded Customize the Mobile Viewer

Customize Export Formats

You can customize the available export formats on the client side. The following example illustrates how to replace RTF with MHT:

Customize Menu Actions

You can handle the client-side CustomizeMenuActions event to customize menu commands on the Mobile Viewer's toolbar.

The event argument provides access to the Actions collection that contains all the Mobile Viewer's commands. You can modify existing commands and add new commands to the collection. Each action provides the following settings:

  • imageClassName - specifies the CSS class of the command's glyph.
  • visible - specifies whether the command is visible in the UI.
  • clickAction - specifies the client-side action to perform when the command is invoked.
  • content - specifies the Knockout template to render after rendering an action.

The code sample below demonstrates how to hide the existing Search action and add a new custom action.

Is this topic helpful?​​​​​​​