New to Telerik Reporting? Download free 30-day trial

Web Report Designer within ASP.NET Web Forms Application

Environment

Product Progress® Telerik® Reporting
.Net Framework Version 4.5.1+

Description

The initial page load works fine and it connects to the Reporting REST API successfully. However, some page actions within the report designer appear to refresh the page.

For example, clicking on the menu and selecting New Report works fine and brings up the Create a Report popup window. However, clicking the Save/Cancel buttons on that popup causes the page to refresh which then appears to restart the report designer.

Another example is when setting the designer's option skipOnboarding: false. The buttons on the onboarding popup cause the page refresh and the report designer restarts, only to reopen the onboarding popup again (creating a loop you can't progress past).

Solution

It is necessary to extract the <div> place holder of the designer outside the ASPX Form element. The scripts may be extracted as well, althought even when left inside the Form they won't cause the page to reload.

<body>
    <div id="webReportDesigner" style="margin-top: 40px">
        loading...
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://reporting.cdn.telerik.com/16.2.22.1109/js/webReportDesigner.kendo.min.js"></script>
    <script src="http://localhost:59655/api/reportdesigner/resources/js/telerikReportViewer"></script>
    <script src="http://localhost:59655/api/reportdesigner/designerresources/js/webReportDesigner-16.2.22.1109.min.js/"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var reportName = "Barcodes Report.trdp";

            $("#webReportDesigner").telerik_WebReportDesigner({
                toolboxArea: {
                    layout: "list"
                },
                serviceUrl: "http://localhost:59655/api/reportdesigner/",
                report: reportName,
                persistSession: true,
                skipOnboarding: false,
            }).data("telerik_WebDesigner");
        });
    </script>

    <form id="form1" runat="server">
    </form>
</body>

The Web Report Designer is a pure HTML5/CSS3/jQuery widget and we recommend to host it outside the ASPX Form in order to behave as expected, without making post-back requests.

See Also

In this article