<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ReportViewerForm1.aspx.cs" Inherits="WebApplication2.ReportViewerForm1" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Telerik HTML5 Report Viewer Demo</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

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

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <link href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css" rel="stylesheet" id="common-css" />
    <link href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.blueopal.min.css" rel="stylesheet" id="skin-css" />

    <!--kendo.all.min.js can be used as well kendo.web.min.js and kendo.mobile.min.js-->
    <script src="/ReportViewer/js/kendo.subset.2015.3.930.min.js"></script>

    <script src="/ReportViewer/js/telerikReportViewer-10.2.16.1025.js"></script>

    <style>
        body
        {
            margin: 5px;
        }

        #reportViewer1
        {
            position: absolute;
            left: 5px;
            right: 5px;
            top: 40px;
            bottom: 5px;
            overflow: hidden;
            font-family: Verdana, Arial;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="reportViewer1">
        loading...
    </div>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#reportViewer1")
                .telerik_ReportViewer({
                    serviceUrl: "api/reports/",
                    reportSource: {
                        report: "SampleReport.trdp",
                        parameters: {}
                    },
                    viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
                    scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
                    scale: 1.0,
                });
        });
    </script>

</body>
</html>
