Device-Responsive Reporting with DevExpress
This tutorial demonstrates how to add a device-responsive document viewer to a web application.
Add a Report to an existing Web Application
DevExpress is flexible when it comes to report storage, but an easy way to use reports in a web app is to create a new report directory. To do this, open an existing web application in Visual Studio.
1. Reference the DevExpress assembly in your project's references (Right-click references > "Add Reference" > "Extensions" > "DevExpress.Web.Mvc5")
2. Add a new folder to the project named "Reports"
3. Right click the reports folder >”Add DevExpress Item”>”New Item”>”XtraReports Wizard Web”
4. Provide a name for the report and click add. Select empty report and click ok
5. With the report designer open, click the reports smart tag > “Open/import”> navigate to your report definition, select the report and click open
To learn how to bind a report with a document viewer, view this tutorial.
Make a Document Viewer Device-Responsive
To support device-responsive reporting, you must use the HTML5/JS based document viewer, and enable mobile viewing.
To enable mobile viewing, toggle open a document viewer's smart tag, and select "Mobile Mode"
By default, a report added to a document viewer appears in its full-size format, and can be zoomed-in to view report details. To create a report that is truly device-responsive, we developed two versions of our reports. One that can be viewed in standard desktop platforms, and one scaled to fit a mobile screen size.