reporting-docs/knowledge-base/web-designer-in-webforms-pa...

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

## Environment

<table>
	<tbody>
		<tr>
			<td>Product</td>
			<td>Progress® Telerik® Reporting</td>
		</tr>
		<tr>
			<td>.Net Framework</td>
			<td>Version 4.5.1+</td>
		</tr>
	</tbody>
</table>


## 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.

````HTML
<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.

## See Also

* [Congfiguring in ASP.NET Framework application]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/how-to-set-up-in-.net-framework-application%})
* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%})
Update outofmemoryexception-on-exporting-or-printing-telerik-report-f… (#1002) * Update outofmemoryexception-on-exporting-or-printing-telerik-report-from-azure-webapps.md * Create web-designer-in-webforms-page.md * Update web-designer-in-webforms-page.md * Update web-designer-in-webforms-page.md --------- Co-authored-by: Dimitar Nikolov <dnikolov@progress.com> 2023-04-25 14:52:32 +03:00			`---`
			`title: Web Report Designer within ASP.NET Web Forms Application`
			`description: "Learn how to host Telerik Reporting Web Report Designer within ASP.NET Web Forms ASPX page and Avoid Unnecessary Post-Back Request."`
			`type: how-to`
			`page_title: Host Web Designer in Web Forms ASPX Page`
			`slug: web-designer-in-webforms-page`
			`position:`
			`tags:`
			`ticketid: 1606288`
			`res_type: kb`
			`---`

			`## Environment`

			`<table>`
			`<tbody>`
			`<tr>`
			`<td>Product</td>`
			`<td>Progress® Telerik® Reporting</td>`
			`</tr>`
			`<tr>`
			`<td>.Net Framework</td>`
Update web-designer-in-webforms-page.md (#1005) 2023-04-26 10:48:06 +03:00			`<td>Version 4.5.1+</td>`
Update outofmemoryexception-on-exporting-or-printing-telerik-report-f… (#1002) * Update outofmemoryexception-on-exporting-or-printing-telerik-report-from-azure-webapps.md * Create web-designer-in-webforms-page.md * Update web-designer-in-webforms-page.md * Update web-designer-in-webforms-page.md --------- Co-authored-by: Dimitar Nikolov <dnikolov@progress.com> 2023-04-25 14:52:32 +03:00			`</tr>`
			`</tbody>`
			`</table>`


			`## 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.`

Update web-designer-in-webforms-page.md (#1005) 2023-04-26 10:48:06 +03:00			`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.`
Update outofmemoryexception-on-exporting-or-printing-telerik-report-f… (#1002) * Update outofmemoryexception-on-exporting-or-printing-telerik-report-from-azure-webapps.md * Create web-designer-in-webforms-page.md * Update web-designer-in-webforms-page.md * Update web-designer-in-webforms-page.md --------- Co-authored-by: Dimitar Nikolov <dnikolov@progress.com> 2023-04-25 14:52:32 +03:00
			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.

			````HTML
			`<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>`
			````

Update web-designer-in-webforms-page.md (#1005) 2023-04-26 10:48:06 +03:00			`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.`
Update outofmemoryexception-on-exporting-or-printing-telerik-report-f… (#1002) * Update outofmemoryexception-on-exporting-or-printing-telerik-report-from-azure-webapps.md * Create web-designer-in-webforms-page.md * Update web-designer-in-webforms-page.md * Update web-designer-in-webforms-page.md --------- Co-authored-by: Dimitar Nikolov <dnikolov@progress.com> 2023-04-25 14:52:32 +03:00
			`## See Also`

			`* [Congfiguring in ASP.NET Framework application]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/how-to-set-up-in-.net-framework-application%})`
			`* [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%})`