some snippets

embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/overview.md

@@ -20,15 +20,7 @@ All viewer-related classes are supplied by a single CSS stylesheet that is refer
 
 For reference, you can use the templates located in **%programfiles(x86)%\Progress\Reporting {{site.suiteversion}}\Html5\ReportViewer\templates**:
 
-```JavaScript
-<script type="text/javascript">
-	$("#reportViewer1")
-	.telerik_ReportViewer({
-		serviceUrl: "/api/reports/",
-		templateUrl: "/custom-templates-directory/templates/telerikReportViewerTemplate-{{site.buildversion}}.html"
-	});
-</script>
-```
+{{source=CodeSnippets\Blazor\Docs\html\Html5ReportViewerCustomTemplate.html region=Html5ReportViewerCustomTemplate}}
 
 The template relies on the [Kendo UI SASS Themes](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/overview) to provide layout settings and the color schema for the HTML5 Report Viewer:
 

embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/providing-custom-templates.md

@@ -16,15 +16,7 @@ The article elaborates on how to use a customized HTML template for the HTML5 Re
 
 Once you create a custom HTML template, you can provide it to the HTML5 Report through the `templateUrl` property:
 
-````JavaScript
-$("#reportViewer1").telerik_ReportViewer({
-	serviceUrl: "api/reports/",
-	templateUrl: '/custom-template-directory/telerikReportViewerTemplate.html',
-	reportSource: { 
-		report: "Product Catalog.trdp" 
-		}
-});
-````
+{{source=CodeSnippets\Blazor\Docs\JavaScript\Html5ReportViewerCustomTemplate.js region=Html5ReportViewerCustomTemplate}}
 
 The HTML template file is essentially a page that includes HTML document fragments nested inside __template__ tags. For example, this is what the report parameter template looks like:
 
@@ -34,18 +26,7 @@ The templates are loaded during the initialization of the __telerik_ReportViewer
 
 To find when the report viewer is loaded, provide an event handler function for the __telerik_ReportViewer__ widget's [ready()](slug:telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/reportviewer/events#ready) event:
 
-````JavaScript
-$("#reportViewer1").telerik_ReportViewer({
-	serviceUrl: "api/reports/",
-	templateUrl: '/custom-template-directory/telerikReportViewerTemplate.html',
-	reportSource: { 
-		report: "Product Catalog.trdp" 
-		},
-	ready: function() {
-		// report viewer is now ready for action
-	}
-});
-````
+{{source=CodeSnippets\Blazor\Docs\JavaScript\Html5ReportViewerCustomTemplate.js region=Html5ViewerCustomTemplateReadyEvent}}
 
 
 ## See Also

embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/templates-overview.md

@@ -30,9 +30,7 @@ While loading the template content, the widget looks for elements marked with th
 
 is mapped to:
 
-````JavaScript
-jQuery.fn.telerik_ReportViewer_ParametersArea(options)
-````
+{{source=CodeSnippets\Blazor\Docs\JavaScript\Html5ReportViewerCustomTemplate.js region=Html5ViewerParametersAreaFunction}}
 
 If such a function exists, it is invoked onto the HTML element (that owns the data-role attribute) passing an options object with the following properties:
 

embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/event-binding.md

@@ -18,23 +18,7 @@ The HTML5 Report Viewer exposes the events listed in [Events](slug:telerikreport
 
 The report viewer currently exposes two ways for binding event handlers to events. You may attach event handlers when you instantiate the report viewer, or after that, using the bind method. 
 
-````JavaScript
-// $(handler) is jQuery's shorthand for $(document).ready(handler)
-$(function () {
-	$("#reportViewer1").telerik_ReportViewer({
-		serviceUrl: "api/reports/",
-		reportSource: {
-			report: "Report Catalog.trdp"
-		},
-		pageReady: function(e) { console.log("this event handler was attached in the constructor"); }
-	});
-
-	var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");
-	reportViewer.bind(telerikReportViewer.Events.PAGE_READY, function(e) {
-		console.log("this event handler was attached using the bind method");
-	});
-});
-````
+{{source=CodeSnippets\Blazor\Docs\JavaScript\Html5ReportViewerCustomTemplate.js region=Html5ViewerEventBinding}}
 
 For a complete list of event handler options please check [Report Viewer Initialization](slug:telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/reportviewer/overview) and for a complete list of all event names exposed through telerikReportViewer.Events please check [Events](slug:telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/reportviewer/events).
 
@@ -44,24 +28,7 @@ The report viewer passes one argument to the event handler, the `Event` object.
 
 To unbind from a given event you must keep a reference to the event handler function and call the unbind method with this reference as an argument.
 
-````JavaScript
-function onPageReady(e) {
-	console.log("page ready");
-}
-// $(handler) is jQuery's shorthand for $(document).ready(handler)
-$(function () {
-	$("#reportViewer1").telerik_ReportViewer({
-		serviceUrl: "api/reports/",
-		reportSource: {
-			report: "Report Catalog.trdp"
-		},
-		pageReady: onPageReady
-	});
-
-	var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");
-	reportViewer.unbind(telerikReportViewer.Events.PAGE_READY, onPageReady);
-});
-````
+{{source=CodeSnippets\Blazor\Docs\JavaScript\Html5ReportViewerCustomTemplate.js region=Html5ViewerUnbindingEvent}}
 
 To __unbind all event handlers__ from the event, call the unbind method with only one argument, the event name.
 

embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-report-server.md

@@ -29,23 +29,23 @@ The VS item template will integrate the HTML5 Report Viewer in a.html page and w
 - You will be prompted to accept building the project. Click 'OK'.
 - The item template will open the **'Add new Report Viewer'** dialog with the following steps:
 
-  1.  **'Configure reporting engine'** will configure the type of reporting engine that will process and render the reports. You have two options - REST service or Report server. Choose **Report Server** option. This way, the reports will be processed and rendered by the specified Report Server instance. On the right side of the dialog, there are two things that you should enter:
+	1. **'Configure reporting engine'** will configure the type of reporting engine that will process and render the reports. You have two options - REST service or Report server. Choose **Report Server** option. This way, the reports will be processed and rendered by the specified Report Server instance. On the right side of the dialog, there are two things that you should enter:
 
-      - **Report Server URI** - enter a valid Report Server URI.
-      - **Runtime credentials** - enter _Username_ and _Password_ for the Registered user or choose [Guest user](https://docs.telerik.com/report-server/implementer-guide/user-management/guest-user) if it suits your needs. Make sure your Report Server instance has its Guest account enabled.
+		- **Report Server URI** - enter a valid Report Server URI.
+		- **Runtime credentials** - enter _Username_ and _Password_ for the Registered user or choose [Guest user](https://docs.telerik.com/report-server/implementer-guide/user-management/guest-user) if it suits your needs. Make sure your Report Server instance has its Guest account enabled.
 
-      ![The Visual Studio item template Add new Report Viewer on the page Configure reporting engine with selected Report Server](images/item-template-reporting-engine-rs.png)
+		![The Visual Studio item template Add new Report Viewer on the page Configure reporting engine with selected Report Server](images/item-template-reporting-engine-rs.png)
 
-  1.  **'Setup Report Source for Report Server'** will choose a report definition for the report viewer. There are two things you should select, but in case you are using the _Guest_ account, you will have to fill in the fields manually. It is because the Guest user cannot read the available categories and reports for security reasons:
+	1. **'Setup Report Source for Report Server'** will choose a report definition for the report viewer. There are two things you should select, but in case you are using the _Guest_ account, you will have to fill in the fields manually. It is because the Guest user cannot read the available categories and reports for security reasons:
 
-      - **Category** - select a category from the drop-down menu that contains the desired report.
-      - **Report name** - select a report from the available reports.
+		- **Category** - select a category from the drop-down menu that contains the desired report.
+		- **Report name** - select a report from the available reports.
 
-      ![The Visual Studio item template Add new Report Viewer on the page Setup Report Source for Report Server](images/item-template-report-source-rs.png)
+		![The Visual Studio item template Add new Report Viewer on the page Setup Report Source for Report Server](images/item-template-report-source-rs.png)
 
-  1.  **'Configure Report Viewer'** exposes the option to enable [accessibility](slug:telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/accessibility) for the report viewer.
+	1. **'Configure Report Viewer'** exposes the option to enable [accessibility](slug:telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/accessibility) for the report viewer.
 
-      ![The Visual Studio item template Add new Report Viewer on the page Configure Report Viewer for Enabling Accessibility](images/item-template-accessibility.png)
+		![The Visual Studio item template Add new Report Viewer on the page Configure Report Viewer for Enabling Accessibility](images/item-template-accessibility.png)
 
 After finishing, the item template automatically does the following:
 
@@ -59,55 +59,19 @@ Although the fastest and most convenient way to get a working HTML5 viewer in yo
 
 1. Follow the steps described in [HTML5 Viewer Manual Setup](slug:telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/manual-setup) article to get your HTML5 viewer working. Examine the produced HTML page and especially the section that configures the viewer:
 
-   ```JavaScript
-   $("#reportViewer1")
-   	.telerik_ReportViewer({
-   		serviceUrl: "/api/reports/",
-   		templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate-{{site.buildversion}}.html',
-   		reportSource: {
-   			report: "Telerik.Reporting.Examples.CSharp.ProductCatalog, CSharp.ReportLibrary",
-   			parameters: {
-   				CultureID: "en"
-   			}
-   		}
-   	});
-   ```
+	{{source=CodeSnippets\Blazor\Docs\JavaScript\Html5ReportViewerCustomTemplate.js region=Html5ViewerFromRestService}}
 
 1. Locate the line that sets the service URL: `serviceUrl: "/api/reports/",`. Comment it out or replace it with the following code:
 
-   ```JavaScript
-   reportServer: {
-   	url: "https://yourReportServerUrl:port",
-   	username: null,
-   	password: null
-   },
-   ```
+	{{source=CodeSnippets\Blazor\Docs\JavaScript\Html5ReportViewerCustomTemplate.js region=Html5ViewerToReportServer}}
 
-   Substitute the `https://yourReportServerUrl:port` with the actual url of your Report Server instance along with the port if needed. Specifying the username and password can be omitted (in this case the Report Server's Guest account will be used) or can be set to an actual account, defined in the Report Server.
+	Substitute the `https://yourReportServerUrl:port` with the actual url of your Report Server instance along with the port if needed. Specifying the username and password can be omitted (in this case the Report Server's Guest account will be used) or can be set to an actual account, defined in the Report Server.
 
 1. If you have modified the Telerik Report Viewer Template HTML file, you can leave the `templateUrl` option intact. Otherwise, it is recommended to delete the line `templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate-{{site.buildversion}}.html'`, so the template will be downloaded automatically from the server.
 1. Locate the lines that set the report source's report definition (it should start with `report: "...`). Replace them with the following line: `report: "{Category}/{ReportName}"`, where `{Category}` and `{ReportName}` are the actual names of the category and report that can be accessed by the Guest user or by the user you have provided login credentials for. Set up the report parameters if needed.
 1. The initialization should look like the following:
 
-   ```JavaScript
-   $("#reportViewer1")
-   	.telerik_ReportViewer({
-   		reportServer: {
-   			url: "https://yourReportServerUrl:port",
-   			username: null,
-   			password: null
-   		},
-   		//templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate-{{site.buildversion}}.html',
-   		reportSource: {
-   			// The report value should contain the Category and ReportName in the following format
-   			// {Category/ReportName}
-   			report: "Samples/Dashboard"
-   			parameters: {
-   				ReportYear: 2004
-   			}
-   		}
-   	});
-   ```
+	{{source=CodeSnippets\Blazor\Docs\JavaScript\Html5ReportViewerCustomTemplate.js region=Html5ViewerInitWithReportServer}}
 
 1. Run the project and you should see the configured in the previous step report appearing in the Report Viewer. If not, check the [Troubleshooting](#Troubleshooting) section below.
 

embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/html5-report-viewer-with-report-server-net.md

@@ -26,14 +26,7 @@ Follow the steps below to set up your HTML5 Report Viewer to work with the Teler
 
 1. Use the following code instead of `serviceUrl: "/api/reports/",` to connect to the Report Server for .NET rather than to a Reporting REST Service:
 
-	```JavaScript
-	reportServer: {
-		url: "https://yourReportServerUrl:port",
-		getPersonalAccessToken: function() {
-			return Promise.resolve("<personal-access-token>");
-		}
-	},
-	```
+	{{source=CodeSnippets\Blazor\Docs\JavaScript\Html5ReportViewerCustomTemplate.js region=Html5ViewerRSNet}}
 
 	> caution The `serviceUrl` option shouldn't be present, or the viewer would default to no authentication scheme utilizing the Report Server for .NET as a regular Reporting REST Service.
 
@@ -43,54 +36,22 @@ Follow the steps below to set up your HTML5 Report Viewer to work with the Teler
 
 	- (**recommended**) The `reportServer.getPersonalAccessToken` option should be set to a function returning the Token of the user who is logging in to the Report Server for .NET wrapped in a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). Here is a sample implementation that relies on a dedicated secure endpoint '/rs-token' to return the token:
 
-		```JavaScript
-		reportServer: {
-			url: "https://yourReportServerUrl:port",
-			getPersonalAccessToken: function() {
-				return fetch('/rs-token')
-					.then(response => response.text())
-			}
-		},
-		```
+		{{source=CodeSnippets\Blazor\Docs\JavaScript\Html5ReportViewerCustomTemplate.js region=Html5ViewerRSNetAuthWithFunction}}
 
 		Server-side, you may configure the endpoint, as shown below, after ensuring the EnvironmentVariable 'RS_NET_TOKEN' is set up correctly. We strongly recommend securing the endpoint:
 
 		{{source=CodeSnippets\Blazor\Docs\ProgramWithRestConfig.cs region=Configuring_the_HTML5_Report_Viewer_to_work_with_the_Report_Server_for_NET}}
 
 	- (_not recommended_) Alternatively, you may use a hardcoded _username_ and _password_ instead of Token authentication. We do not recommend this for security reasons:
 
-		```JavaScript
-		reportServer: {
-			url: "https://yourReportServerUrl:port",
-			username: "<hardcoded-username>",
-			password: "<hardcoded-password>"
-		},
-		```
+		{{source=CodeSnippets\Blazor\Docs\JavaScript\Html5ReportViewerCustomTemplate.js region=Html5ViewerRSNetAuthWithCredentials}}
 
 		> caution The Guest User may connect to the Report Server for .NET only with a Token. It doesn't have a password and cannot connect to the Report Server for .NET with Null credentials, as the Report Server for .NET Framework 4.6.2.
 
 1. Locate the lines that set the report source's report definition (it should start with `report: "...`). Replace them with the following line: `report: "{Category}/{ReportName}"`, where `{Category}` and `{ReportName}` are the actual names of the category and report that can be accessed by the User you have provided Token or login credentials for. Set up the report parameters if needed.
 1. The initialization should look like the following:
 
-	```JavaScript
-	$("#reportViewer1")
-		.telerik_ReportViewer({
-			reportServer: {
-				url: "https://yourReportServerUrl:port",
-				getPersonalAccessToken: function() {
-					return Promise.resolve("<personal-access-token>");
-				}
-			},
-			reportSource: {
-				// The report value should contain the Category and ReportName in the following format
-				// {Category/ReportName}
-				report: "Samples/Dashboard",
-				parameters: {
-					ReportYear: 2004
-				}
-			}
-		});
-	```
+	{{source=CodeSnippets\Blazor\Docs\JavaScript\Html5ReportViewerCustomTemplate.js region=Html5ViewerRSNetInit}}
 
 1. Run the project, and you should see the report configured in the previous step appearing in the Report Viewer.
 

embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/printing-reports.md

@@ -39,20 +39,7 @@ By default when the value is not explicitly set, the widget will try to automati
 
 You can also implement a custom logic for dynamically specifying the print mode. For example:
 
-```JavaScript
-// Force the viewer to always use the PDF plug-in for printing in the Chrome browser.
-// In the other browsers the report document will be downloaded as a PDF file:
-var printMode = /(chrome)/.test(navigator.userAgent.toLowerCase())
-	? telerikReportViewer.PrintModes.FORCE_PDF_PLUGIN
-	: telerikReportViewer.PrintModes.FORCE_PDF_FILE;
-
-$("#reportViewer1")
-	.telerik_ReportViewer({
-		serviceUrl: "api/reports/",
-		reportSource: { report: "product catalog.trdp" },
-		printMode: printMode
-	});
-```
+{{source=CodeSnippets\Blazor\Docs\JavaScript\Html5ReportViewerCustomTemplate.js region=Html5ViewerPrinting}}
 
 ## See Also