The requested page is not available for the requested platform. You are viewing the content for Default platform.

Mobile Mode

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

mobile-viewer-phone-demo-small

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.18.2: Reporting Toolbox tab and drop the ASPxWebDocumentViewer control onto the page.

    drop-control-document-viewer-web-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.

    web-document-viewer-enable-mobile-mode

  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.

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
    

    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.

    aspx-mobile-viewer-set-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.

    <devExpress>
        <!-- ... -->
        <resources>
            <add type="ThirdParty" />
            <add type="DevExtreme" />
        </resources>
    </devExpress>
    

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

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.

    mobile-viewer-phone-navigate

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

    mobile-viewer-phone-page-number

  • Zoom

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

    Zoom In Zoom Out
    mobile-viewer-phone-zooming mobile-viewer-phone-zooming-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 mobile-viewer-button-search 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.

    mobile-viewer-phone-tap-to-search

    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 mobile-viewer-button-export button in the Viewer's toolbar and select the format.

    mobile-viewer-phone-export

  • Report Parameters

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

    mobile-viewer-phone-parameters

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

    mobile-viewer-phone-parameters-panel

  • Content Editing

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

    mobile-viewer-phone-content-editing

  • Reader Mode

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

    Reader Mode = True Reader Mode = False
    mobile-viewer-phone-reader-mode-on mobile-viewer-phone-reader-mode-off

    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.

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:

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);
}

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.

<script type="text/javascript">       
    function customizeMenuActions(s, e) {
        debugger
        var actions = e.Actions;

        // Hide the 'Search' action.
        actions[0].visible = false;

        // Add a new action. 
        actions.push({
            imageClassName: "customButton",
            visible: true,
            clickAction: function () {
                alert('Clicked.');
            }
        })
    }
</script>

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" MobileMode="True" ReportSourceId="WebMobileViewer.XtraReport1">
    <ClientSideEvents CustomizeMenuActions="customizeMenuActions" />
</dx:ASPxWebDocumentViewer>