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

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:

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.

Figure 1: ReportViewer

Demo Sample

You can download the Demo Sample from the following link.

http://www.syncfusion.com/downloads/support/directtrac/138577/ReportViewerSample1364595447.zip

Further References 

You can find the documentation and online demo samples for JavaScript ReportViewer control from the following link.

http://js.syncfusion.com/demos/web/ReportViewer