Mobile Mode
- 4 minutes to read
This topic describes the Mobile Viewer that enables you to view, navigate and export documents on phones and tablets.
This topic consists of the following sections.
Add the Mobile Viewer to a Web Page
To add the Mobile Viewer to a web page, do the following.
In Visual Studio, expand the DX.17.2: Reporting Toolbox tab and drop the ASPxWebDocumentViewer control onto the page.
To switch an ASPxWebDocumentViewer to the mobile version, click the control’s smart tag to invoke its actions list and enable the ASPxWebDocumentViewer.MobileMode option.
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.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />The “content” attribute defines the following options.
- The width of the page is set to fit the width of the device’s screen (which varies depending on the device).
- The initial zoom level when the page is first loaded by the browser is set to a default value.
- Users are prevented from zooming the web page (only the displayed document can be zoomed instead).
To assign a report to the Mobile Viewer, click the control’s smart tag to invoke its actions list. Then, expand the drop-down list for the Report property and select your report.
To assign a report in code, use the ASPxWebDocumentViewer.OpenReport or ASPxWebDocumentViewer.OpenReportXmlLayout method.
To automatically transfer all necessary script files to a client application, add the “resources” section to the application’s Web.config file, as shown below.
<devExpress> <!-- ... --> <resources> <add type="ThirdParty" /> <add type="DevExtreme" /> </resources> </devExpress>To learn about manual integration of the Document Viewer, see the System Requirements section in the HTML5 Document Viewer document.
Mobile Viewer Features
The Mobile Viewer provides the following main features.
Navigation
To navigate between document pages, swipe the screen to the left or right.
While in the swipe mode, the Mobile Viewer displays the current page number and the total number of pages in the document.
Zooming
The Mobile Viewer enables you to zoom in and out of a document using touch gestures.
Zoom In Zoom Out 
When in the multi-page mode, the Mobile Viewer displays as many document pages at once as it is possible (depending on the screen size and the document zoom factor).
Text Search
To search for a specific text, tap a document and then tap the
button in the displayed toolbar.Alternatively, swipe down the document page and tap the dedicated area at the top.
Then, in the invoked search editor, enter the required text and tap ENTER on the screen keyboard.
Exporting
To export a document to one of the supported formats, tap the
button in the Viewer’s toolbar and select a required format.
You can customize the collection of available export formats on the client side. The following example illustrates how to replace RTF with MHT.
var previewModel = webDocumentViewer1.GetPreviewModel(); var rtfIndex = previewModel.availableFormats.indexOf(DevExpress.Report.Preview.ExportFormatID.RTF); if(rtfIndex > 0){ previewModel.availableFormats.splice(rtfIndex, 1, DevExpress.Report.Preview.ExportFormatID.MHT); }Report Parameters
If a report contains any parameters, the Mobile Viewer toolbar displays the
button.
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
By default, the Mobile Viewer is switched to the reader mode, displaying document pages without indicating page borders.
Reader Mode = True Reader Mode = False 
To disable the reader mode, use the MobileWebDocumentViewerSettings.ReaderMode property of a MobileWebDocumentViewerSettings object assigned to the ASPxWebDocumentViewer.SettingsMobile property of the Web Document Viewer.
By default, most of the actions performed over a document in the Mobile Viewer are animated.
To disable this animation, set the MobileWebDocumentViewerSettings.AnimationEnabled property to false.