xtrareports-400244-web-reporting-asp-net-mvc-reporting-document-viewer-in-asp-net-mvc-applications-mobile-mode.md
The Web Document Viewer in Mobile Mode allows you to navigate and export reports on mobile devices.
If your application already contains the Web Document Viewer, proceed to step 3. Steps 1 and 2 describe how to add the Document Viewer to an application and how to enable Mobile Mode for the newly added Document Viewer.
Open the view and right-click anywhere in the view window. In the invoked context menu, select Insert DevExpress MVC Extension.
In the invoked dialog, select the Reports tab and the WebDocumentViewer extension.
The following code is generated automatically:
```cshtml
@Html.DevExpress().WebDocumentViewer(settings => {
settings.Name = "WebDocumentViewer";
settings.MobileMode = true;
}).Bind(new DevExpress.XtraReports.Web.CachedReportSourceWeb(new DXWebApplication1.XtraReport1())).GetHtml()
Skip the next step and proceed to step 4.
1. Enable the **MobileMode** option:
2. Use the **viewport meta tag** to inform the Document Viewer about the viewport width to properly render the document on mobile devices. Include the following tag in the **\<head\>** section on your page:
3. The Document Viewer has no default height, so you should position the Document Viewer on a page and specify its height depending on the size of the target viewport in the mobile browser. For better display you can use JavaScript or CSS to automatically adjust the Document Viewer’s size when the browser window resizes or changes orientation (portrait/landscape).
## Mobile Viewer Features
### Navigation
Swipe the screen to the left or right to navigate between document pages.
When end-users navigate between pages, 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 into or out of a document.
| Zoom In | Zoom Out |
| --- | --- |
|  |  |
End-users can zoom out to display multiple pages on screen. The maximum number of document pages depends on the mobile device’s screen size.
### 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.
In the search editor, enter the text and tap ENTER.
### Export
To export a document to supported formats, tap the Export button ( ) in the Viewer’s toolbar and select the format.
### Report Parameters
The Mobile Viewer toolbar displays the Parameters button ( ) if a report contains any [parameters](/XtraReports/4812/feature-guide-to-devexpress-reports/use-report-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](/XtraReports/117343/feature-guide-to-devexpress-reports/provide-interactivity/edit-content-in-print-preview) when this feature is enabled in a report document.
### Reader Mode
You can switch the Mobile Viewer to the reader mode (display document pages without borders).
| Reader Mode On | Reader Mode Off |
| --- | --- |
|  |  |
You can toggle the Reader mode in code.
### Animation
Most of the actions performed on a document in the Mobile Viewer are animated. You can disable animation in code.
## Customize the Viewer
### Customize the Reader Mode
The reader mode that displays document pages without borders. Use the [MobileWebDocumentViewerSettings.ReaderMode](/XtraReports/DevExpress.XtraReports.Web.WebDocumentViewer.MobileWebDocumentViewerSettings.ReaderMode) setting to turn off reader mode:
- [CHTML](#tabpanel_5dWmwmSBaw-3_tabid-mvcReaderMode)
```cshtml
@Html.DevExpress().WebDocumentViewer(settings =>
{
settings.Name = "WebDocumentViewer1";
settings.MobileMode = true;
settings.Height = Unit.Pixel(560);
settings.SettingsMobile.ReaderMode = false;
}).Bind("TestReport").GetHtml()
| Reader Mode On | Reader Mode Off |
|---|---|
Use the MobileWebDocumentViewerSettings.AnimationEnabled setting to disable animation:
@Html.DevExpress().WebDocumentViewer(settings =>
{
settings.Name = "WebDocumentViewer1";
settings.MobileMode = true;
settings.Height = Unit.Pixel(560);
settings.SettingsMobile.AnimationEnabled=false;
}).Bind("TestReport").GetHtml()
You can handle the client-side CustomizeMenuActions event to customize the Mobile Viewer’s toolbar.
The event argument’s Actions property value is a collection that contains the Mobile Viewer’s commands. You can modify existing commands and add new commands to the collection. Each action includes the following settings:
The following code hides the Search action and adds a new custom action with a custom icon:
<script type="text/javascript">
function onCustomizeMenuActions(s, e) {
var actions = e.Actions;
// Hide the 'Search' action.
actions[0].visible = false;
// Add a new action.
actions.push({
imageClassName: "customButton",
imageTemplateName: "checkImage",
visible: true,
clickAction: function () {
alert('Clicked.');
}
})
}
</script>
<script type="text/html" id="checkImage">
<?xml version='1.0' encoding='UTF-8'?>
<svg viewBox="-2 -5 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_1" transform="translate(-2, -5)" style="enable-background:new 0 0 32 32">
<g id="Check">
<polygon class="dxd-icon-fill" points="27,5 11,21 5,15 2,18 11,27 30,8 " />
</g>
</g>
</svg>
</script>
@Html.DevExpress().WebDocumentViewer(settings =>
{
settings.Name = "WebDocumentViewer1";
settings.MobileMode = true;
settings.Height = Unit.Pixel(560);
settings.ClientSideEvents.CustomizeMenuActions = "onCustomizeMenuActions";
}).Bind("TestReport").GetHtml()
The result is shown in the image below:
You can hide the specified export format in the Export Formats panel.
The following code uses the handles the CustomizeExportOptions property to specify the CustomizeExportOptions event handler. The event handler function hides the XLS format in the Export Formats panel:
<script type="text/javascript">
function onCustomizeExportOptions(s, e) {
e.HideFormat(DevExpress.Reporting.Viewer.ExportFormatID.XLS);
}
</script>
@Html.DevExpress().WebDocumentViewer(settings =>
{
settings.Name = "WebDocumentViewer1";
settings.MobileMode = true;
settings.Height = Unit.Pixel(560);
settings.ClientSideEvents.CustomizeExportOptions = "onCustomizeExportOptions";
}).Bind("TestReport").GetHtml()
The result is shown below: