reporting-docs/web-designer-in-webforms-page.md в 7fe5410e8187ea13cbe97b18555c96ea2c1e4e7d

3.0 KiB

Исходник Ответственный История

title	description	type	page_title	slug	position	tags	ticketid	res_type
Web Report Designer within ASP.NET Web Forms Application	Learn how to host Telerik Reporting Web Report Designer within ASP.NET Web Forms ASPX page and Avoid Unnecessary Post-Back Request.	how-to	Host Web Designer in Web Forms ASPX Page	web-designer-in-webforms-page			1606288	kb

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]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) 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.

3.0 KiB Исходник Ответственный История

Environment

Description

Solution

See Also

3.0 KiB

Исходник Ответственный История