How to render the ReportViewer Control on Mobile/Desktop layout?

1 min read

This article explains how to render the ReportViewer control on Mobile/Desktop layout.

You can refer to the Getting Started of JavaScript ReportViewer from the following User Guide link.

http://help.syncfusion.com/ug/js/Documents/createyourfirstreportviewerinjavascript.htm

Rendering the ReportViewer on Mobile/Desktop layout

The JavaScript ReportViewer control provides inherent support to render mobile/desktop layout. Initially ReportViewer control renders Mobile/Desktop layout based on the device and you can modify this layout option by using the renderMode property.

The ReportViewer has the following RenderMode enum options:

Default	Combination of mobile and desktop Layout based on the Device
Desktop	Desktop layout
Mobile	Mobile Layout

The following code example explains how to render the ReportViewer control on Mobile layout.

JS

<script type="text/javascript">
        $(function () {
            $("#container").ejReportViewer(
                {
                    reportServiceUrl: "/api/ReportApi",
                    renderMode: ej.ReportViewer.RenderMode.Mobile,
                    processingMode: ej.ReportViewer.ProcessingMode.Remote,
                    reportPath: "~/App_Data/InvoiceTemplateXML.rdl"
                });
        });
    </script>

Run the sample application and you can see the ReportViewer on the page as displayed in the following screenshot.

Sample is Generate in ReportViewer