diff --git a/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/event-binding.md b/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/event-binding.md
index 0a9bc1ff1..fa1f34ba8 100644
--- a/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/event-binding.md
+++ b/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/event-binding.md
@@ -1,7 +1,7 @@
---
title: Event Binding
page_title: Handling Blazor Report Viewer Events
-description: "Learn about what are the events exposed by the Telerik Reporting Blazor Report Viewer and how to attach event handlers to said events."
+description: "Learn about what events are exposed by the Telerik Reporting Blazor Report Viewer and how to attach handlers to them."
slug: telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/blazor-report-viewer/event-binding
tags: event,binding
published: True
@@ -15,32 +15,13 @@ The Blazor Report Viewer exposes events as properties of the `ClientEventsOption
## Bind to a report viewer event
-To attach an event handler to the viewer, specify the name of the event handler function in the `ClientEventsOptions` object. The function name should be fully qualified, e.g. `window.trvEventHandlers.exportBegin`, or just `trvEventHandlers.exportBegin` (the "*window* " qualifier is optional). The event handler functions should be implemented inside **wwwroot/index.html** (Blazor WebAssembly) or **Pages/\_Host.cshtml** (Blazor Server).
+To attach an event handler to the viewer, specify the name of the event handler function in the `ClientEventsOptions` object. The function name should be fully qualified, e.g., `window.trvEventHandlers.exportBegin`, or just `trvEventHandlers.exportBegin` (the "*window* " qualifier is optional). The event handler functions should be implemented inside **wwwroot/index.html** (Blazor WebAssembly) or **Pages/\_Host.cshtml** (Blazor Server).
For example, we can attach handlers to the `ExportBegin` and `ExportEnd` events of the viewer:
-````CSHTML
-
-````
+{{source=CodeSnippets\BlazorAppSnippets\Components\Shared\_ViewerAddEvent.cshtml}}
Then, we can create the event handler functions in the **wwwroot/index.html** (Blazor WebAssembly) or **Pages/\_Host.cshtml** (Blazor Server):
-````HTML
-
-````
+{{source=CodeSnippets\BlazorAppSnippets\Components\Shared\_EventsScirpts.cshtml}}
diff --git a/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-create-a-custom-parameter-editor.md b/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-create-a-custom-parameter-editor.md
index 564e1122c..5896c4303 100644
--- a/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-create-a-custom-parameter-editor.md
+++ b/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-create-a-custom-parameter-editor.md
@@ -13,72 +13,26 @@ position: 4
The article elaborates on how to change the default editors for visible parameters in the Blazor Report Viewer's Parameters Area.
Custom parameter editors are defined through the `ParameterEditors` ([Report Viewer Initialization]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/report-viewer-initialization%})) array of `ParameterEditor` objects passed as an option when creating the report viewer widget.
-Each object represents a parameter editor factory for creating editors suitable to edit a specific report parameter configuration.
+Each object represents a parameter editor factory for creating editors suitable for editing a specific report parameter configuration.
-Each editor is a `ParameterEditor` instance which contains two string properties: `Match` and `CreateEditor`. These strings should point to a global JS variable defined on the [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window) object. This variable should have a _match_ and _createEditor_ javascript methods.
+Each editor is a `ParameterEditor` instance, which contains two string properties: `Match` and `CreateEditor`. These strings should point to a global JS variable defined on the [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window) object. This variable should have a _match_ and _createEditor_ JavaScript methods.
-The `match` method accepts a report parameter to be edited as an argument and returns a boolean value which indicates whether the parameter editor is suitable for this parameter. The parameter variable exposes the properties of the report parameter like name, *allowNull*, *availableValues*, *multiValue*, *type*, etc.
+The `match` method accepts a report parameter to be edited as an argument and returns a boolean value that indicates whether the parameter editor is suitable for this parameter. The parameter variable exposes the properties of the report parameter like name, *allowNull*, *availableValues*, *multiValue*, *type*, etc.
-The main work for creating and utilizing the parameter editor is done in the `createEditor` method. Its purpose is to create the parameter editor UI and wire it to the `parameterChanged` callback when a new value is selected. The returned result is a new object containing the `beginEdit` method which is the entry point for creating the editor from the viewer.
+The main work for creating and utilizing the parameter editor is done in the `createEditor` method. Its purpose is to create the parameter editor UI and wire it to the `parameterChanged` callback when a new value is selected. The returned result is a new object containing the `beginEdit` method, which is the entry point for creating the editor from the viewer.
-This global variable with the _match_ and _createEditor_ methods can be initialized in `\_Host.cshtml/\_Layout.cshtml` for the Blazor Server project and for Blazor WebAssembly can be used in the `wwwroot/index.html` file.
+This global variable with the _match_ and _createEditor_ methods can be initialized in `\_Host.cshtml/\_Layout.cshtml` for the Blazor Server project, and for Blazor WebAssembly, can be used in the `wwwroot/index.html` file.
-The following example uses the **Dashboard** example report that we ship with the installation of Telerik Reporting and illustrates how to use the [Kendo DropDownList](https://demos.telerik.com/kendo-ui/dropdownlist/index) widget for a single parameter value parameter editor which also has available values:
+The following example uses the **Dashboard** example report that we ship with the installation of Telerik Reporting and illustrates how to use the [Kendo DropDownList](https://demos.telerik.com/kendo-ui/dropdownlist/index) widget for a single parameter value parameter editor, which also has available values:
- In **\_Host.cshtml**
-````HTML
-
-
-
-
-````
+ {{source=CodeSnippets\BlazorAppSnippets\Components\Shared\_CustomParameterEditor_Host.cshtml}}
- Then in the Blazor Report Viewer Initialization:
-````CSHTML
-note Some options differ between the item templates based on the project they are being added to. For example, the option to host a new REST Service is not available in a Blazor WebAssembly project, since it is a strictly client-side application.
@@ -36,106 +33,42 @@ If you wish to connect the Report Viewer to a Report Server instance, refer to t
## Adding the Blazor Report Viewer component manually
-1. Add NuGet package reference to the `Telerik.ReportViewer.Blazor` (or `Telerik.ReportViewer.Blazor.Trial`) package hosted on the Progress Telerik proprietary NuGet feed. Make sure you have the needed NuGet feed added to the Visual Studio setting using the article [How to add the Telerik private NuGet feed to Visual Studio]({%slug telerikreporting/using-reports-in-applications/how-to-add-the-telerik-private-nuget-feed-to-visual-studio%}).
+1. Add NuGet package reference to the `Telerik.ReportViewer.Blazor` (or `Telerik.ReportViewer.Blazor.Trial`) package hosted on the Progress Telerik proprietary NuGet feed. Make sure you have the needed NuGet feed added to the Visual Studio settings using the article [How to add the Telerik private NuGet feed to Visual Studio]({%slug telerikreporting/using-reports-in-applications/how-to-add-the-telerik-private-nuget-feed-to-visual-studio%}).
1. Make sure app configuration inside the `Configure` method of the `Startup.cs`(or `Program.cs` if .NET 6+ is used) can serve static files:
- ````CSharp
-app.UseStaticFiles();
-````
-
+ {{source=CodeSnippets\BlazorAppSnippets\Program.cs region=UseStaticFiles}}
1. Add JavaScript dependencies to the `head` element of the `Pages/_Host.cshtml` (Blazor Server) or `wwwroot/index.html` (Blazor WebAssembly), or `Components/App.razor` (Blazor Web App):
- ````HTML
-
- @* For Reports service hosted in the same project: *@
-
- @* For Reports service hosted in another application / Report Server use absolute URI: *@
- @**@
-````
-
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\JavaScriptDependencies.html}}
-1. Add [Telerik Kendo UI SASS-Based Themes](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/overview) to the `head` element of the `Pages/_Host.cshtml` (Blazor Server) or `wwwroot/index.html` (Blazor WebAssembly), or `Components/App.razor` (Blazor Web App). The Razor syntax for a server application differs and you need to escape the __@__ symbol as __@@__:
+1. Add [Telerik Kendo UI SASS-Based Themes](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/overview) to the `head` element of the `Pages/_Host.cshtml` (Blazor Server) or `wwwroot/index.html` (Blazor WebAssembly), or `Components/App.razor` (Blazor Web App). The Razor syntax for a server application differs, and you need to escape the __@__ symbol as __@@__:
- ````HTML
-
-````
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\KendoSassTheme.html}}
Alternatively, you can use the [Kendo UI LESS-Based Themes](https://docs.telerik.com/kendo-ui/styles-and-layout/less-themes/overview) (Kendo UI LESS-Based Themes are not compatible with Telerik UI for Blazor and should not be used together):
- ````HTML
-
-
-````
-
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\KendoLessTheme.html}}
1. Add the dedicated `interop.js` dependency at the end of the `body` element of the `Pages/_Host.cshtml` (Blazor Server) or `wwwroot/index.html` (Blazor WebAssembly), or `Components/App.razor` (Blazor Web App):
- ````HTML
-
- @* Or this one if using the Telerik.ReportViewer.Blazor.Trial package *@
- @**@
-````
-
-
-1. If using the Telerik Reporting web service (either locally hosted or in another application) use the following snippet to place the viewer component in a razor page like `Pages/Index.razor`.
-
- >note When referencing the Reports service from another application the `ServiceUrl` setting should be the absolute URI to the service. Please remember to set the actual `ReportSource` along with the eventual parameters:
-
- ````CSHTML
-@page "/"
- @* For Blazor Web Apps, an interactive render mode should be used, for example: *@
- @* @rendermode InteractiveServer *@
- @using Telerik.ReportViewer.Blazor
-
-
-````
-
-
-1. If displaying reports from a Report Server instance use the following snippet to place the viewer component in a razor page like `Pages/Index.razor`. Please remember to set the actual `ReportServer` and `ReportSource` settings:
-
- ````CSHTML
-@page "/"
- @* For Blazor Web Apps, an interactive render mode should be used, for example: *@
- @* @rendermode InteractiveServer *@
- @using Telerik.ReportViewer.Blazor
-
-
-````
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\InteropDependency.html}}
+1. If using the Telerik Reporting web service (either locally hosted or in another application), use the following snippet to place the viewer component in a Razor page like `Pages/Index.razor`.
+
+ >note When referencing the Reports service from another application, the `ServiceUrl` setting should be the absolute URI to the service. Please remember to set the actual `ReportSource` along with the eventual parameters:
+
+ {{source=CodeSnippets\BlazorAppSnippets\Components\Pages\ViewerRestService.razor}}
+
+1. If displaying reports from a Report Server instance, use the following snippet to place the viewer component in a Razor page like `Pages/Index.razor`. Please remember to set the actual `ReportServer` and `ReportSource` settings:
+
+ {{source=CodeSnippets\BlazorAppSnippets\Components\Pages\ViewerReportServer.razor}}
1. Use the rest of the parameters exposed on the Blazor viewer component to set up its appearance and behavior as desired.
1. Finally, run the project to see the rendered report.
-
## See Also
+
* [Blazor Integration with Telerik Reporting](https://docs.telerik.com/blazor-ui/integrations/reporting) documentation article.
diff --git a/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/methods-and-commands.md b/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/methods-and-commands.md
index 0a91c7971..be2393fe7 100644
--- a/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/methods-and-commands.md
+++ b/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/methods-and-commands.md
@@ -1,9 +1,9 @@
---
title: Methods and Commands
page_title: Methods and Commands of the Blazor Report Viewer
-description: "Learn about what are the methods and commands exposed by the Telerik Reporting Blazor Report Viewer and how to use them."
+description: "Learn about what the methods and commands exposed by the Telerik Reporting Blazor Report Viewer are and how to use them."
slug: telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/blazor-report-viewer/methods-and-commands
-tags: methods,and,commands,blazor,report,viewer
+tags: methods,commands,blazor,report,viewer
published: True
position: 3
previous_url: /blazor-report-viewer-methods-and-commands
@@ -11,28 +11,11 @@ previous_url: /blazor-report-viewer-methods-and-commands
# Methods and Commands Overview
-The Blazor Report Viewer exposes methods and commands that allow to control its behavior from application code.
+The Blazor Report Viewer exposes methods and commands that allow you to control its behavior from application code.
-## Get a report viewer reference to access API
+## Get a report viewer reference to access the API
-To call report viewer methods and execute commands it is required to first get a reference to the report viewer object using the `@ref` attribute. Then use the __reportViewer1__ object to access the report viewer API. For example, refresh and print of the current report can be triggered like this:
+To call report viewer methods and execute commands, it is required to first get a reference to the report viewer object using the `@ref` attribute. Then use the __reportViewer1__ object to access the report viewer API. For example, a refresh and print of the current report can be triggered like this:
-````CSharp
-
-
-...
-');
- var parameter,
- valueChangedCallback = options.parameterChanged,
- dropDownList;
- function onChange() {
- var val = dropDownList.value();
- valueChangedCallback(parameter, val);
- }
- return {
- beginEdit: function (param) {
- parameter = param;
- $(dropDownElement).kendoDropDownList({
- dataTextField: "name",
- dataValueField: "value",
- value: parameter.value,
- dataSource: parameter.availableValues,
- change: onChange
- });
- dropDownList = $(dropDownElement).data("kendoDropDownList");
- }
- };
- }
-}
-````
+{{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\SingleParameterEditor.js}}
Passing the parameter editor to the viewer:
-````JavaScript
-
-````
+{{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\PassingParameterEditorToViewer.html}}
>tip You can use any other custom UI covering the requirements of the `createEditor` method.
diff --git a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/how-to-pass-values-to-report-parameters.md b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/how-to-pass-values-to-report-parameters.md
index b9a447e93..82e34be0f 100644
--- a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/how-to-pass-values-to-report-parameters.md
+++ b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/how-to-pass-values-to-report-parameters.md
@@ -1,9 +1,9 @@
---
title: Passing Values to Report Parameters
page_title: Sending Values to Report Parameters from outside HTML5 ReportViewer
-description: "Learn How to pass Values to Report Parameters from Components Located Outside the HTML5 ReportViewer in Telerik Reporting."
+description: "Learn how to pass values to Report Parameters from Components located outside the HTML5 ReportViewer in Telerik Reporting."
slug: telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/customizing/how-to-pass-values-to-report-parameters
-tags: how,pass,values,report,parameters
+tags: pass,values,report,parameters
published: True
position: 4
previous_url: /html5-report-viewer-howto-custom-parameters
@@ -11,162 +11,38 @@ previous_url: /html5-report-viewer-howto-custom-parameters
# Passing Values to Report Parameters from Components Outside the HTML5 Report Viewer
-This topic explains how to use custom parameters UI to update the report parameters instead of using the report viewer's default implementation of the parameters area. The report and all required parameters for it are packed in a ReportSource object. To update the report source the [ReportViewer.reportSource(rs)]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/reportviewer/methods/reportsource(rs)%}) method is used.
+This topic explains how to use the custom parameters UI to update the report parameters instead of using the report viewer's default implementation of the parameters area. The report and all required parameters for it are packed in a ReportSource object. To update the report source the [ReportViewer.reportSource(rs)]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/reportviewer/methods/reportsource(rs)%}) method is used.
-To give an example we will use the Invoice report from our examples and will update its __OrderNumber__ parameter from a custom parameter UI.
+To give an example, we will use the Invoice report from our examples and will update its __OrderNumber__ parameter from a custom parameter UI.
## Pass values to report parameters
-> All path references in the described steps should be adapted according to your project setup. For more information please refer to the MSDN article [ASP.NET Web Project Paths](https://learn.microsoft.com/en-us/previous-versions/ms178116(v=vs.140))
+> All path references in the described steps should be adapted according to your project setup. For more information, please refer to the MSDN article [ASP.NET Web Project Paths](https://learn.microsoft.com/en-us/previous-versions/ms178116(v=vs.140))
-1. Add a new html page CustomParameters.html to the CSharp.Html5Demo or VB.Html5Demo project.
+1. Add a new html page `CustomParameters.html` to the _CSharp.Html5Demo_ or _VB.Html5Demo_ project.
1. Add the references to all required JavaScript libraries and stylesheets:
- ````HTML
-
-
-
- Telerik HTML5 Report Viewer
-
-
-
-
-
-
-
-
-````
-
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\AddRequiredSriptsAndStyles.html}}
1. Add the custom parameter UI - a dropdown selector with a few values:
- ````HTML
-
-````
-
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\AddTrvPlaceHolder.html}}
-1. Now initialize the report viewer. We will use the minimal set of all [possible options]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/report-viewer-initialization%}). Please note how the value from the custom UI is used to set the __OrderNumber__ report parameter initially:
-
- ````JavaScript
-$(document).ready(function () {
- $("#reportViewer1").telerik_ReportViewer({
- serviceUrl: "api/reports/",
- reportSource: {
- report: "Telerik.Reporting.Examples.CSharp.Invoice, CSharp.ReportLibrary",
- parameters: { OrderNumber: $('#invoiceId option:selected').val() }
- },
- ready: function () {
- //this.refreshReport();
- }
- });
- });
-````
+1. Now, initialize the report viewer. We will use the minimal set of all [possible options]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/report-viewer-initialization%}). Please note how the value from the custom UI is used to set the __OrderNumber__ report parameter initially:
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\TrvInitialize.js}}
1. Add code that updates the ReportSource parameters collection with the selected __Invoice Id__ from the dropdown box:
- ````JavaScript
-$('#invoiceId').change(function () {
- var viewer = $("#reportViewer1").data("telerik_ReportViewer");
- viewer.reportSource({
- report: viewer.reportSource().report,
- parameters: { OrderNumber: $(this).val() }
- });
- //setting the HTML5 Viewer's reportSource causes a refresh automatically
- //if you need to force a refresh for other cases, use:
- //viewer.refreshReport();
- });
-````
-
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\UpdateReportSource.js}}
1. The HTML page that we have just created should look like this:
- ````HTML
-
-
-
- Telerik HTML5 Report Viewer Demo With Custom Parameter
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- loading...
-
-
-
-
-````
-
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\CustomPage-01.html}}
1. Run the project and verify that the __Invoice Id__ selection really updates the report.
diff --git a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/localization.md b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/localization.md
index 0ddd3fcd7..eafe25acb 100644
--- a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/localization.md
+++ b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/localization.md
@@ -1,7 +1,7 @@
---
title: Localization
page_title: Localization of the HTML5 ReportViewer Explained
-description: "Learn how to Localize the HTML5 ReportViewer for use with multiple languages in Telerik Reporting."
+description: "Learn how to localize the HTML5 ReportViewer for use with multiple languages in Telerik Reporting."
slug: telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/customizing/localization
tags: localization
published: True
@@ -17,182 +17,13 @@ The article elaborates on how to localize the messages displayed by the HTML5 Re
{{source=CodeSnippets\js\telerikReportViewer.stringResources}}
- ````JavaScript
-(() => {
- var sr = {
- //warning and error string resources
- controllerNotInitialized: "Controller is not initialized.",
- noReportInstance: "No report instance.",
- missingTemplate: "!obsolete resource!",
- noReport: "No report.",
- noReportDocument: "No report document.",
- missingOrInvalidParameter: "There are missing or invalid parameter values. Please input valid data for the following parameters:\n",
- invalidParameter: "Please input a valid value.",
- invalidDateTimeValue: "Please input a valid date.",
- parameterIsEmpty: "Parameter value cannot be empty.",
- cannotValidateType: "Cannot validate parameter of type {type}.",
- loadingFormats: "Loading...",
- loadingReport: "Loading report...",
- preparingDownload: "Preparing document to download. Please wait...",
- preparingPrint: "Preparing document to print. Please wait...",
- errorLoadingTemplates: "Error loading the report viewer's templates. (templateUrl = '{0}').",
- errorServiceUrl: "Cannot access the Reporting REST service. (serviceUrl = '{0}'). Make sure the service address is correct and enable CORS if needed. (https://enable-cors.org)",
- errorServiceVersion: "The version of the Report Viewer '{1}' does not match the version of the Reporting REST Service '{0}'. Please make sure both are running same version.",
- loadingReportPagesInProgress: "{0} pages loaded so far...",
- loadedReportPagesComplete: "Done. Total {0} pages loaded.",
- noPageToDisplay: "No page to display.",
- errorDeletingReportInstance: "Error deleting report instance: '{0}'.",
- errorRegisteringViewer: "Error registering the viewer with the service.",
- noServiceClient: "No serviceClient has been specified for this controller.",
- errorRegisteringClientInstance: "Error registering client instance.",
- errorCreatingReportInstance: "Error creating report instance (Report = '{0}').",
- errorCreatingReportDocument: "Error creating report document (Report = '{0}'; Format = '{1}').",
- unableToGetReportParameters: "Unable to get report parameters.",
- errorObtainingAuthenticationToken: "Error obtaining authentication token.",
- clientExpired: "Click 'Refresh' to restore client session.",
- promisesChainStopError: "Error shown. Throwing promises chain stop error.",
- renderingCanceled: "Report processing was canceled.",
- tryReportPreview: "The report may now be previewed.",
- //viewer template string resources
- parameterEditorSelectNone: "clear selection",
- parameterEditorSelectAll: "select all",
- parametersAreaPreviewButton: "Preview",
- menuNavigateBackwardText: "Navigate Backward",
- menuNavigateBackwardTitle: "Navigate Backward",
- menuNavigateForwardText: "Navigate Forward",
- menuNavigateForwardTitle: "Navigate Forward",
- menuStopRenderingText: "Stop Rendering",
- menuStopRenderingTitle: "Stop Rendering",
- menuRefreshText: "Refresh",
- menuRefreshTitle: "Refresh",
- menuFirstPageText: "First Page",
- menuFirstPageTitle: "First Page",
- menuLastPageText: "Last Page",
- menuLastPageTitle: "Last Page",
- menuPreviousPageTitle: "Previous Page",
- menuNextPageTitle: "Next Page",
- menuPageNumberTitle: "Page Number Selector",
- menuDocumentMapTitle: "Toggle Document Map",
- menuParametersAreaTitle: "Toggle Parameters Area",
- menuZoomInTitle: "Zoom In",
- menuZoomOutTitle: "Zoom Out",
- menuPageStateTitle: "Toggle FullPage/PageWidth",
- menuPrintText: "Print...",
- menuContinuousScrollText: "Toggle Continuous Scrolling",
- menuSendMailText: "Send an email",
- menuPrintTitle: "Print",
- menuContinuousScrollTitle: "Toggle Continuous Scrolling",
- menuSendMailTitle: "Send an email",
- menuExportText: "Export",
- menuExportTitle: "Export",
- menuPrintPreviewText: "Toggle Print Preview",
- menuPrintPreviewTitle: "Toggle Print Preview",
- menuSearchText: "Search",
- menuSearchTitle: "Toggle Search",
- menuSideMenuTitle: "Toggle Side Menu",
- sendEmailFromLabel: "From:",
- sendEmailToLabel: "To:",
- sendEmailCCLabel: "CC:",
- sendEmailSubjectLabel: "Subject:",
- sendEmailFormatLabel: "Format:",
- sendEmailSendLabel: "Send",
- sendEmailCancelLabel: "Cancel",
- //accessibility string resources
- ariaLabelPageNumberSelector: "Page number selector. Showing page {0} of {1}.",
- ariaLabelPageNumberEditor: "Page number editor",
- ariaLabelExpandable: "Expandable",
- ariaLabelSelected: "Selected",
- ariaLabelParameter: "parameter",
- ariaLabelErrorMessage: "Error message",
- ariaLabelParameterInfo: "Contains {0} options",
- ariaLabelMultiSelect: "Multiselect",
- ariaLabelMultiValue: "Multivalue",
- ariaLabelSingleValue: "Single value",
- ariaLabelParameterDateTime: "DateTime",
- ariaLabelParameterString: "String",
- ariaLabelParameterNumerical: "Numerical",
- ariaLabelParameterBoolean: "Boolean",
- ariaLabelParametersAreaPreviewButton: "Preview the report",
- ariaLabelMainMenu: "Main menu",
- ariaLabelCompactMenu: "Compact menu",
- ariaLabelSideMenu: "Side menu",
- ariaLabelDocumentMap: "Document map area",
- ariaLabelDocumentMapSplitter: "Document map area splitbar.",
- ariaLabelParametersAreaSplitter: "Parameters area splitbar.",
- ariaLabelPagesArea: "Report contents area",
- ariaLabelSearchDialogArea: "Search area",
- ariaLabelSendEmailDialogArea: "Send email area",
- ariaLabelSearchDialogStop: "Stop search",
- ariaLabelSearchDialogOptions: "Search options",
- ariaLabelSearchDialogNavigateUp: "Navigate up",
- ariaLabelSearchDialogNavigateDown: "Navigate down",
- ariaLabelSearchDialogMatchCase: "Match case",
- ariaLabelSearchDialogMatchWholeWord: "Match whole word",
- ariaLabelSearchDialogUseRegex: "Use regex",
- ariaLabelMenuNavigateBackward: "Navigate backward",
- ariaLabelMenuNavigateForward: "Navigate forward",
- ariaLabelMenuStopRendering: "Stop rendering",
- ariaLabelMenuRefresh: "Refresh",
- ariaLabelMenuFirstPage: "First page",
- ariaLabelMenuLastPage: "Last page",
- ariaLabelMenuPreviousPage: "Previous page",
- ariaLabelMenuNextPage: "Next page",
- ariaLabelMenuPageNumber: "Page number selector",
- ariaLabelMenuDocumentMap: "Toggle document map",
- ariaLabelMenuParametersArea: "Toggle parameters area",
- ariaLabelMenuZoomIn: "Zoom in",
- ariaLabelMenuZoomOut: "Zoom out",
- ariaLabelMenuPageState: "Toggle FullPage/PageWidth",
- ariaLabelMenuPrint: "Print",
- ariaLabelMenuContinuousScroll: "Continuous scrolling",
- ariaLabelMenuSendMail: "Send an email",
- ariaLabelMenuExport: "Export",
- ariaLabelMenuPrintPreview: "Toggle print preview",
- ariaLabelMenuSearch: "Search in report contents",
- ariaLabelMenuSideMenu: "Toggle side menu",
- ariaLabelSendEmailFrom: "From email address",
- ariaLabelSendEmailTo: "Recipient email address",
- ariaLabelSendEmailCC: "Carbon Copy email address",
- ariaLabelSendEmailSubject: "Email subject:",
- ariaLabelSendEmailFormat: "Report format:",
- ariaLabelSendEmailSend: "Send email",
- ariaLabelSendEmailCancel: "Cancel sending email",
- //search dialog resources
- searchDialogTitle: "Search in report contents",
- searchDialogSearchInProgress: "searching...",
- searchDialogNoResultsLabel: "No results",
- searchDialogResultsFormatLabel: "Result {0} of {1}",
- searchDialogStopTitle: "Stop Search",
- searchDialogNavigateUpTitle: "Navigate Up",
- searchDialogNavigateDownTitle: "Navigate Down",
- searchDialogMatchCaseTitle: "Match Case",
- searchDialogMatchWholeWordTitle: "Match Whole Word",
- searchDialogUseRegexTitle: "Use Regex",
- searchDialogCaptionText: "Find",
- searchDialogPageText: "page",
- // Send Email dialog resources
- sendEmailDialogTitle: "Send Email",
- sendEmailValidationEmailRequired: "Email field is required",
- sendEmailValidationEmailFormat: "Email format is not valid",
- sendEmailValidationSingleEmail: "The field accepts a single email address only",
- sendEmailValidationFormatRequired: "Format field is required",
- errorSendingDocument: "Error sending report document (Report = '{0}')."
- };
- window.telerikReportViewer ||= {};
- window.telerikReportViewer.sr ||= sr;
-})();
-````
-
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\HardCodedStringResources.js}}
1. Specify the name of the file using the following convention: `stringResources.[culture].js` where *[culture]* is the name of the culture for the specified localization resource. For example, to provide a localization resource for the French-Belgian culture, the corresponding resource file could be named as follows: `stringResources.fr-BE.js`.
1. Translate the texts for the specified culture
1. Load the `JS` file with the translated text before loading the report viewer:
- ````HTML
-
-
-````
-
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\AddTranslatedStringResources.html}}
> To modify the HTML5 Viewer's HTML template that contains the toolbar, Preview, Parameters, and DocumentMap areas, you will have to set the viewer's `templateUrl`. For more details on this, please check [Providing Templates]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/providing-custom-templates%}).
diff --git a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/overview.md b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/overview.md
index e84f73257..2e328848f 100644
--- a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/overview.md
+++ b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/overview.md
@@ -11,59 +11,25 @@ previous_url: /html5-report-viewer-styling-and-appearance, /embedding-reports/di
# Styling and Appearance of the HTML5 Report Viewer
-The article elaborates on the styles used by the HTML5 Report Viewer, and how they can be loaded manually to be modified.
+The article elaborates on the styles used by the HTML5 Report Viewer and how they can be loaded manually to be modified.
The styling and appearance of the HTML5 Report Viewer are controlled entirely through a set of CSS3 styles organized in classes with predefined names.
-> All path references in the article should be adapted according to your project setup. For more information please refer to the MSDN article [ASP.NET Web Project Paths](https://learn.microsoft.com/en-us/previous-versions/ms178116(v=vs.140)) The mentioned Report Viewer Template files are provided with your Telerik Reporting Installation - [Installation Directories]({%slug telerikreporting/installation%}#directories-and-asemblies).
+> All path references in the article should be adapted according to your project setup. For more information, please refer to the MSDN article [ASP.NET Web Project Paths](https://learn.microsoft.com/en-us/previous-versions/ms178116(v=vs.140)). The mentioned Report Viewer Template files are provided with your Telerik Reporting Installation - [Installation Directories]({%slug telerikreporting/installation%}#directories-and-asemblies).
-All viewer-related classes are supplied by a single CSS stylesheet referenced in the report viewer HTML template. The template is provided by the Reporting REST service. To force a custom template with a custom or default CSS specify the __templateUrl__ of the HTML5 Viewer widget option. For reference, you can use the templates located in __%programfiles(x86)%\Progress\Reporting {{site.suiteversion}}\Html5\ReportViewer\templates__:
+All viewer-related classes are supplied by a single CSS stylesheet referenced in the report viewer HTML template. The template is provided by the Reporting REST service. To force a custom template with a custom or default CSS, specify the __templateUrl__ of the HTML5 Viewer widget option. For reference, you can use the templates located in __%programfiles(x86)%\Progress\Reporting {{site.suiteversion}}\Html5\ReportViewer\templates__:
-````JavaScript
-
-````
+{{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\AddTemplate.html}}
-In addition, the Kendo UI CSS needs to be supplied for the Kendo UI widgets to be operational:
+In addition, the Kendo UI CSS needs to be supplied for the Kendo UI widgets to be operational. While these classes provide layout settings, the HTML5 Report Viewer depends on the Kendo UI themes for its colors (theme):
-````HTML
-
-````
-
-While these classes provide layout settings the HTML5 Report Viewer depends on the Kendo UI themes for its colors (theme):
-
-````HTML
-
-````
+{{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\AddKendoStyles.html}}
The default template depends on the Telerik Web UI font provided by the Reporting REST service.
-Additionally, we provide a template that depends on [Font Awesome](https://fontawesome.com/) for the menu icons. Font Awesome is not part of the Telerik HTML5 Report Viewer distribution and could be obtained from [https://fontawesome.com/download](https://fontawesome.com/download).
-
-> Please note that you are not required nor limited to using our font or Font Awesome. The distributed templates provide only a base/reference implementation of the report viewer’s content that can be modified according to your needs.
-
-To use Font Awesome you have to specify the Font Awesome template. The template is located in (%programfiles(x86)%\Progress\Reporting {{site.suiteversion}}\Html5\ReportViewer\templates):
-
-````JavaScript
-
-````
-
-The default viewer template and stylesheet depend on CSS media queries to adapt its layout according to the device and display. In order for the media queries to be activated properly the browser’s viewport needs to be initialized like this:
+The default viewer template and stylesheet also depend on CSS media queries to adapt their layout according to the device and display. For the media queries to be activated properly, the browser’s viewport needs to be initialized like this:
-````HTML
-
-````
+{{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\InitializeViewport.html}}
## See Also
diff --git a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/providing-custom-templates.md b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/providing-custom-templates.md
index 37fd2e171..3eeb2196e 100644
--- a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/providing-custom-templates.md
+++ b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/providing-custom-templates.md
@@ -13,49 +13,19 @@ previous_url: /html5-report-viewer-customizing-providing-template
The article elaborates on how to use a customized HTML template for the HTML5 Report Viewer.
-> All path references in the article should be adapted according to your project setup. For more information please refer to the MSDN article [ASP.NET Web Project Paths](https://learn.microsoft.com/en-us/previous-versions/ms178116(v=vs.140)). The mentioned Report Viewer Template files are provided with your Telerik Reporting Installation - [Installation Directories]({%slug telerikreporting/installation%}#directories-and-asemblies).
-
-If you have a custom HTML template you should provide it to the telerik_ReportViewer plugin’s options:
-
-````JavaScript
-$("#reportViewer1").telerik_ReportViewer({
- serviceUrl: "../api/reports/",
- templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate.html',
- reportSource: { report: "product catalog.trdp" }
-});
-````
-
-The HTML template file is an HTML page while the templates are HTML document fragments inside HTML5 __template__ elements:
-
-````HTML
-
-
-
- Telerik HTML5 Report Viewer Templates
-
-
-
-
- ...
-
-
-
-
-````
-
-The templates are loaded during the initialization of the __telerik_ReportViewer__ widget. Since this is an asynchronous network operation(the template HTML is loaded with an HTTP GET request) that takes an unpredictable amount of time, the widget is not operational until it is successful; to find when the viewer is completely loaded provide a callback function to the __telerik_ReportViewer__ widget:
-
-````JavaScript
-$("#reportViewer1").telerik_ReportViewer({
- serviceUrl: "../api/reports/",
- templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate',
- reportSource: { report: "product catalog.trdp" },
- ready: function() {
- // report viewer is now ready for action
- }
-});
-````
+> All path references in the article should be adapted according to your project setup. For more information, please refer to the MSDN article [ASP.NET Web Project Paths](https://learn.microsoft.com/en-us/previous-versions/ms178116(v=vs.140)). The mentioned Report Viewer Template files are provided with your Telerik Reporting Installation - [Installation Directories]({%slug telerikreporting/installation%}#directories-and-asemblies).
+If you have a custom HTML template, you should provide it to the `telerik_ReportViewer` plugin’s options:
+
+{{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\AddTemplate.html}}
+
+The HTML template file is an HTML page, while the templates are HTML document fragments inside HTML5 __template__ elements:
+
+{{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\HtmlTemplate.html}}
+
+The templates are loaded during the initialization of the __telerik_ReportViewer__ widget. Since this is an asynchronous network operation(the template HTML is loaded with an HTTP GET request) that takes an unpredictable amount of time, the widget is not operational until it is successful; to find when the viewer is completely loaded, provide a callback function to the __telerik_ReportViewer__ widget:
+
+{{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\AddTemplateAndReadyEvent.html}}
## See Also
diff --git a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/templates-overview.md b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/templates-overview.md
index c2b5254d2..47b63e15d 100644
--- a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/templates-overview.md
+++ b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/templates-overview.md
@@ -15,7 +15,7 @@ The article elaborates on the structure of the HTML template file of the HTML5 R
The default viewer's template is divided into 3 areas:
-* the Pages Area that is responsible for displaying the report pages, viewer’s status, and error messages;
+* the Pages Area that is responsible for displaying the report pages, the viewer’s status, and error messages;
* the Parameters Area that is responsible for displaying the editor UI for the visible report parameters;
* the Document Map Area that displays the report’s document map and allows navigation in its content;
@@ -25,21 +25,17 @@ All these elements of the HTML5 Report Viewer are provided through the __trv-rep
While loading the template content, the widget looks for elements marked with the data-role attribute and maps its value to a jQuery plugin function that provides the element behavior. For example:
-````HTML
-
…
-````
+{{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\data-role-attribute.html}}
is mapped to:
-````JavaScript
-jQuery.fn.telerik_ReportViewer_ParametersArea(options)
-````
+{{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\data-role-attribute-map.js}}
-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:
+If such a function exists, it is invoked on the HTML element (that owns the data-role attribute), passing an options object with the following properties:
* __controller__ - a `telerikReportViewer.ReportViewerController` object that is responsible for the basic viewer operations;
* __commands__ - a `telerikReportViewer.CommandSet` object that contains all commands;
-* __templates__ - an object that contains all templates loaded for the current report viewer instance. The id of the template is used as a property’s name, and the value is the template HTML content.
+* __templates__ - an object that contains all templates loaded for the current report viewer instance. The id of the template is used as a property’s name, and the value is the template's HTML content.
Using this completely declarative approach of describing the viewer’s layout and behavior allows users to easily tweak any parts of it by simply modifying the templates. Following the above pattern, one can create its own data role and extend the default viewer behavior.
diff --git a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/templates-structure.md b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/templates-structure.md
index bb911be80..b42214e1d 100644
--- a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/templates-structure.md
+++ b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/templates-structure.md
@@ -1,7 +1,7 @@
---
title: Templates Structure
page_title: Templates Structure of the HTML5 Report Viewer Explained in details
-description: "Learn more about the detailed structure of the HTML5 Report Viewer Templates in Telerik Reporting which is the basic template file."
+description: "Learn more about the detailed structure of the HTML5 Report Viewer Templates in Telerik Reporting, which is the basic template file."
slug: telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/customizing/styling-and-appearance/templates-structure
tags: templates,structure
published: True
@@ -13,7 +13,7 @@ previous_url: /html5-report-viewer-templates
The article elaborates on the templates included in the HTML template file of the HTML5 Report Viewer.
-By default the HTML5 Report Viewer does not have any content; instead, the entire markup is provided through templates.
+By default, the HTML5 Report Viewer does not have any content; instead, the entire markup is provided through templates.
All report viewer templates are supplied by a single-page markup:
@@ -21,8 +21,8 @@ All report viewer templates are supplied by a single-page markup:
The templates are recognized by well-known identifiers supplied by the __id__ attribute. These templates are:
-* __trv-report-viewer__ - provides the base viewer markup. The default viewer template contains a page area, a document map, a parameters area, a large menu when displaying on desktop browsers, and a small menu and a side menu optimized for mobile browsers;
-* __trv-parameter__ - provides the default markup for the report parameter editors including the title, error message box, and the editor itself;
+* __trv-report-viewer__ - provides the base viewer markup. The default viewer template contains a page area, a document map, a parameters area, a large menu when displaying on desktop browsers, and a small menu and a side menu optimized for mobile browsers.
+* __trv-parameter__ - provides the default markup for the report parameter editors, including the title, error message box, and the editor itself;
* __trv-parameter-editor-available-values-multiselect__ - the default ListView editor for report parameters of any type with specified available values and an option to select more than one value;
* __trv-parameter-editor-available-values-multiselect-combo__ - the default ComboBox editor for report parameters of any type with specified available values and an option to select more than one value;
* __trv-parameter-editor-available-values__ - the default ListView editor for report parameters of any type with specified available values and limited to selecting a single value;
diff --git a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/event-binding.md b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/event-binding.md
index 0c4c535c4..07bab611d 100644
--- a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/event-binding.md
+++ b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/event-binding.md
@@ -3,7 +3,7 @@ title: Event Binding
page_title: Event Binding in HTML5 ReportViewer Explained
description: "Learn how to bind to and unbind from Client Events in the HTML5 Report Viewer in Telerik Reporting."
slug: telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/event-binding
-tags: event,binding
+tags: event,binding,unbinding
published: True
position: 9
previous_url: /html5-report-viewer-event-binding
@@ -17,56 +17,22 @@ The HTML5 Report Viewer exposes the events listed in [Events]({%slug telerikrepo
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/",
- templateUrl: 'ReportViewer/templates/telerikReportViewerTemplate-{{buildversion}}.html',
- reportSource: {
- report: "Telerik.Reporting.Examples.CSharp.Invoice, CSharp.ReportLibrary"
- },
- 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\BlazorAppSnippets\wwwroot\HTML5EventBinding.js}}
-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/report-viewer-initialization%}) 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/telerikreportviewer-namespace/events%}).
+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/report-viewer-initialization%}), 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/telerikreportviewer-namespace/events%}).
-The report viewer passes one argument to the event handler, the Event object. This is the Event object implemented by jQuery so for more information you can check the official jQuery documentation. The sender of the event is passed through [jQuery's event.data](https://api.jquery.com/event.data/) - e.data.sender and for all events, this is the report viewer.
+The report viewer passes one argument to the event handler, the Event object. This is the Event object implemented by jQuery, so for more information, you can check the official jQuery documentation. The sender of the event is passed through [jQuery's event.data](https://api.jquery.com/event.data/) - `e.data.sender` and for all events, this is the report viewer.
## Unbind from a report viewer widget event
-To unbind from a given event you should keep a reference to the event handler function and call the unbind method with this reference as an argument.
+To unbind from a given event, you should 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/",
- templateUrl: 'ReportViewer/templates/telerikReportViewerTemplate-{{buildversion}}.html',
- reportSource: {
- report: "Telerik.Reporting.Examples.CSharp.Invoice, CSharp.ReportLibrary"
- },
- pageReady: onPageReady
- });
- var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");
- reportViewer.unbind(telerikReportViewer.Events.PAGE_READY, onPageReady);
-});
-````
+{{source=CodeSnippets\BlazorAppSnippets\wwwroot\HTML5EventUnBinding.js}}
-To __unbind all event handlers__ from the event just call the unbind method with only one argument, the event name.
+To __unbind all event handlers__ from the event, just call the unbind method with only one argument, the event name.
> You can unbind anonymous event handlers by calling the unbind method with one argument.
-
## See Also
* [HTML5 Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/overview%})
diff --git a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-in-an-asp.net-core-in-.net-5-application.md b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-in-an-asp.net-core-in-.net-5-application.md
index be5446188..b957d033a 100644
--- a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-in-an-asp.net-core-in-.net-5-application.md
+++ b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-in-an-asp.net-core-in-.net-5-application.md
@@ -3,13 +3,13 @@ title: Using in .NET
page_title: HTML5 Report Viewer in ASP.NET Core - Telerik Reporting
description: "Learn how to add an HTML5 Report Viewer in an ASP.NET Core in .NET 6, .NET 7, and .NET 8 web app."
slug: telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-in-an-asp.net-core-in-.net-5-application
-tags: how,use,html5,report,viewer,asp.net,core,.net,application
+tags: html5,report,viewer,asp.net,core,.net,application
published: True
position: 5
previous_url: /manual-setup-of-html5-report-viewer-in-aspnetcore-net5
---
-# Using the HTML5 Report Viewer in an ASP.NET Core application in .NET 6, .NET 8 and .NET 9
+# Using the HTML5 Report Viewer in an ASP.NET Core application in .NET 6, .NET 8, and .NET 9
This article guides you on how to add an HTML5 Report Viewer in an [ASP.NET Core in .NET 6](https://learn.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-6.0?view=aspnetcore-6.0) web application.
@@ -30,7 +30,7 @@ The [HTML5 Report Viewer]({%slug telerikreporting/using-reports-in-applications/
* `Telerik Razor Report Viewer Page {{site.suiteversion}}`
* `Telerik HTML5 Report Viewer Page {{site.suiteversion}}`
-The first template should be used when the project uses [Razor Pages](https://learn.microsoft.com/en-us/aspnet/core/razor-pages/) while the second can be used in all other scenario. The item templates allow you to quickly and easily add the HTML5 Report Viewer to the application. The wizards are the same for both item templates.
+The first template should be used when the project uses [Razor Pages](https://learn.microsoft.com/en-us/aspnet/core/razor-pages/), while the second can be used in all other scenarios. The item templates allow you to quickly and easily add the HTML5 Report Viewer to the application. The wizards are the same for both item templates.
If you wish to connect the Report Viewer to a REST service, you can follow the steps outlined in the [How to Use HTML5 Report Viewer with REST Service]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-rest-service%}) documentation article.
@@ -41,68 +41,18 @@ If you wish to connect the Report Viewer to a Report Server instance, refer to t
1. This tutorial uses the `Barcodes Report.trdp` report definitions file that must be located in a `Reports` folder inside the project.
1. Make sure that the app configuration inside the `Configure` method of the `Startup.cs` can serve static files:
- ````C#
-app.UseStaticFiles();
-````
-
+ {{source=CodeSnippets\BlazorAppSnippets\Program.cs region=UseStaticFiles}}
1. Add an HTML Page for the HTML5 Report Viewer by right-clicking on *wwwroot* and __Add > New Item... > HTML Page__. Name the file __index.html__ and add the HTML5 Report Viewer's initialization. For a detailed explanation, check the HTML5 Report Viewer [Manual Setup]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/manual-setup%}) help article. The required references to jQuery and Telerik Kendo UI CSS and JS files are listed in the example below. By default, the necessary Report Viewer scripts and styles are served by the REST Service. The complete report viewer page should look like this:
- ````HTML
-
-
-
- Telerik HTML5 Report Viewer Demo in ASP.NET Core in .NET 6
-
-
-
-
-
-
-
-
-
-
- loading...
-
-
-
-
-````
-
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\HTML5ViewerInDotNet.html}}
1. Set the *launchSettings.json* `launchUrl` to the new HTML page.
1. Finally, run the project to see the report.
## Demo project
-A full example can be found in the installation folder of Telerik Reporting, by default: `C:\Program Files (x86)\Progress\Telerik Reporting {{site.suiteversion}}\Examples\CSharp\.NET 6\Html5IntegrationDemo`. Examples are available also for .NET 8 and .NET 9 in the corresponding subfolders.
+A full example can be found in the installation folder of Telerik Reporting, by default: `C:\Program Files (x86)\Progress\Telerik Reporting {{site.suiteversion}}\Examples\CSharp\.NET 6\Html5IntegrationDemo`. Examples are also available for .NET 8 and .NET 9 in the corresponding subfolders.
## See Also
diff --git a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-report-server.md b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-report-server.md
index 05343310a..101899c89 100644
--- a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-report-server.md
+++ b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-report-server.md
@@ -3,7 +3,7 @@ title: Using with Report Server
page_title: Using HTML5 Report Viewer with Telerik Report Server
description: "Learn how to configure and use the Telerik Reporting HTML5 Report Viewer with a Telerik Report Server instance."
slug: telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-report-server
-tags: how,use,html5,report,viewer,report,server
+tags: html5,report,viewer,server
published: True
position: 3
previous_url: /html5-report-viewer-howto-use-it-with-reportserver
@@ -18,7 +18,7 @@ The quickest way to add an HTML5 Report Viewer to your web project is with the _
1. Review the HTML5 Report Viewer [Requirements]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/requirements-and-browser-support%}).
1. Installed and running [Telerik Report Server](https://docs.telerik.com/report-server/introduction).
1. Report Server's built-in __Guest__ user should be enabled.
-1. Report Server should contain at least one report that can be accessed by the Guest user account.
+1. The Report Server should contain at least one report that can be accessed by the Guest user account.
## Configuring the HTML5 Report Viewer to work with the Report Server using Item Templates
@@ -58,60 +58,21 @@ 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-{{buildversion}}.html',
- reportSource: {
- report: "Telerik.Reporting.Examples.CSharp.ProductCatalog, CSharp.ReportLibrary",
- parameters: {
- CultureID: "en"
- }
- }
- });
-````
-
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\HTML5withRestService.js}}
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\BlazorAppSnippets\wwwroot\HTML5withReportServer_01.js}}
- 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-{{buildversion}}.html',
- reportSource: {
- // The report value should contain the Category and ReportName in the following format
- // {Category/ReportName}
- report: "Samples/Dashboard"
- parameters: {
- ReportYear: 2004
- }
- }
- });
-````
-
-
-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.
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\HTML5withReportServer_02.js}}
+
+1. Run the project, and you should see the report configured in the previous step appearing in the Report Viewer. If not, check the [Troubleshooting](#Troubleshooting) section below.
## Troubleshooting
@@ -123,7 +84,7 @@ The most common reasons for failure are related to the authentication against th
|The page shows the message: `The report server URL is not specified` or `Error loading the report viewer's templates`|The reportServer's __url__ property is empty or invalid.|
|The report viewer loads the template but displays a message `"Error creating report instance` or `Unable to get report parameters. Report ' *Category* / *Report* ' cannot be resolved.`|Check again the report source's __report__ arguments and make sure the category name and the report name exist in Report Server.|
|The viewer loads the template but displays a message `Unable to get report parameters. Access denied.`|Make sure that the user account has permission to read the specified report and category.|
-|The viewer doesn't load any page and there is only a label saying __loading...__ in the top left page corner.|Check the Fiddler log for a request to the `/Token` URL. This is the request that should obtain the token used to authenticate the user account. When found, check the Response headers and look for the error code below:
`HTTP/1.1 502 Fiddler - DNS Lookup Failed`- make sure you have set the Report Server URL correctly.
`HTTP/1.1 400 Bad Request`- check if the built-in Guest user is __Enabled__ and has __Read__ permissions for the configured report.
|
+|The viewer doesn't load any page, and there is only a label saying __loading...__ in the top left page corner.|Check the Fiddler log for a request to the `/Token` URL. This is the request that should obtain the token used to authenticate the user account. When found, check the Response headers and look for the error code below:
`HTTP/1.1 502 Fiddler - DNS Lookup Failed`- make sure you have set the Report Server URL correctly.
`HTTP/1.1 400 Bad Request`- check if the built-in Guest user is __Enabled__ and has __Read__ permissions for the configured report.
|
## See Also
diff --git a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-rest-service.md b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-rest-service.md
index ada26d5e9..05cb3ac7d 100644
--- a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-rest-service.md
+++ b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-rest-service.md
@@ -3,7 +3,7 @@ title: Using with REST Service
page_title: Configuring HTML5 Report Viewer with Telerik Reporting REST Service
description: "Learn what the prerequisites are and how to configure and use the HTML5 Report Viewer with the Telerik Reporting REST Service."
slug: telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-rest-service
-tags: how,use,html5,report,viewer,rest,service
+tags: html5,report,viewer,rest,service
published: True
position: 2
previous_url: /html5-report-viewer-quick-start
@@ -22,7 +22,7 @@ For full control, manually configure the REST service and add HTML5 Report Viewe
## Telerik HTML5 Report Viewer Page Item Template
-The item template adds.html page with HTML5 Report Viewer and if needed enables the [Telerik Reporting REST WebAPI Service]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/overview%}). The following describes the item template wizard steps:
+The item template adds an HTML page with HTML5 Report Viewer, and if needed, enables the [Telerik Reporting REST WebAPI Service]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/overview%}). The following describes the item template wizard steps:
* To start the item template wizard, in __Solution Explorer__, select the target project. On the __Project menu__, click __Add -> New Item__. In the [Add New Item](https://learn.microsoft.com/en-us/previous-versions/visualstudio/visual-studio-2010/w0572c5b(v=vs.100)) dialog box, navigate to the __Web__ category and select the __Telerik HTML5 Report Viewer Page__ item.
* Accept the project build prompt. Click 'OK'.
@@ -37,7 +37,7 @@ The item template adds.html page with HTML5 Report Viewer and if needed enables
1. __'Configure report source'__ will choose a report definition for the report viewer. If the __Create new REST service__ option was previously selected, you will have to choose one of the following three options. If, however, the __Use existing REST service__ option was previously selected, you will only have the option to choose an existing report definition.
- + __Sample report definition__ - this option will create a sample report definition which will be shown in the new report viewer. It will be placed in a newly created folder called Reports at the root of the application. It can be either modified or changed with another.
+ + __Sample report definition__ - this option will create a sample report definition, which will be shown in the new report viewer. It will be placed in a newly created folder called Reports at the root of the application. It can be either modified or changed with another.
+ __New report definition__ - this option will create a new report definition that will be opened for editing in the respective report designer. On the right side of the dialog, there are two possible options:
+ __TRDP report definition__ - will create a TRDP file with the entered __Report name__.
@@ -47,7 +47,7 @@ The item template adds.html page with HTML5 Report Viewer and if needed enables
+ __TRDP, TRBP or TRDX report definition__ - enter the path or browse to the report definition. Also, there is an option to enable adding the report definition to the project. In this case, the report viewer will use a UriReportSource with the provided path to the file.
+ __Enter type report definition created in Visual Studio__ - enter the Assembly qualified name of the type report definition. In this case, the report viewer will use a TypeReportSource with the provided Assembly-qualified name.
- + __Select type report definition created in Visual Studio__ - select the type report definition from the resolved types in the solution. The engine will search for report types in all projects in the solution that have Telerik Reporting reference included. The VS item template will add the required __connection string__ from the reports project configuration file (if it exists).
+ + __Select type report definition created in Visual Studio__ - select the type report definition from the resolved types in the solution. The engine will search for report types in all projects in the solution that have a Telerik Reporting reference included. The VS item template will add the required __connection string__ from the reports project configuration file (if it exists).

diff --git a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/manual-setup.md b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/manual-setup.md
index 15a98ca42..0cf789fed 100644
--- a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/manual-setup.md
+++ b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/manual-setup.md
@@ -26,126 +26,49 @@ Before you continue, make sure that the following prerequisites are met:
## Utilizing the HTML5 Report Viewer in an HTML page
-The following steps produce an HTML page with settings similar to these of the local Html5Demo project installed by default under __[TelerikReporting_InstallDir]\Examples__:
+The following steps produce an HTML page with settings similar to those of the local HTML5Demo project installed by default under __[TelerikReporting_InstallDir]\Examples__:
> You must adapt all path references in the steps below to your project setup. For more information, refer to the [ASP.NET Web Project Paths](https://learn.microsoft.com/en-us/previous-versions/ms178116(v=vs.140)) Microsoft article.
1. Create an HTML5 page:
- ````HTML
-
-
-
- Telerik HTML5 Report Viewer
-
-
-
-
-````
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\CreateHtmlPage.html}}
>The above DOCTYPE directive must reflect your custom requirements. You can find more details about the page settings used in this tutorial in the [Defining document compatibility](https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/cc288325(v=vs.85)) Microsoft article.
1. Initialize the browser’s viewport in the `` element:
- ````HTML
-
-````
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\InitializeViewport.html}}
The viewport META tag is used to control the layout on mobile browsers.
1. Add a reference to jQuery in the `` element:
- ````HTML
-
-````
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\AddjQuery.html}}
>jQuery must be loaded before creating the viewer object.jQuery must be loaded only once on the page.
1. Add references to the Telerik Kendo UI styles in the `` element:
- ````HTML
-
-
-
-````
-
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\AddKendoStyles.html}}
1. Add references to the HTML5 Report Viewer JavaScript file in the `` element:
- ````HTML
-
-````
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\AddTrvJavaScript.html}}
>The report viewer JavaScript must be referenced after any other Kendo widgets or bundles.
If no Kendo widgets are utilized on the page, the report viewer will register a custom Kendo subset to enable the required Kendo widgets. The subset is served from the report service. If Kendo is used on the page or the CDN is preferred, make sure the following widgets are referenced:
- ````HTML
-
-````
-
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\AddTrvKendoWidgets.html}}
1. Add a `
` element to the `` element that will serve as a placeholder for the viewer’s widget. The `
` element's ID attribute serves as a key(Id) for the viewer object. Its content (*loading...*) will be displayed while the viewer’s content is being loaded (from the template):
- ````HTML
-
- loading...
-
-````
-
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\AddTrvPlaceHolder.html}}
1. Add the following script element at the bottom of the `` element and create the HTML5 Report Viewer widget for the reportViewer1 `
` element that we just added:
- ````JS
-
-````
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\AddTrv.html}}
The relative paths that you use must reflect the project's structure. The default template uses TelerikWebUI icons. If you prefer a template with *FontAwesome* icons, you have to set the templateUrl option to `/ReportViewer/templates/telerikReportViewerTemplate-FA-{{site.buildversion}}.html`.
@@ -153,66 +76,13 @@ The following steps produce an HTML page with settings similar to these of the l
1. Make the viewer fill the entire browser window. Add the following style to the `` element:
- ````HTML
-
-````
-
- >The above CSS rule will be applied on the `
` element holding the viewer object. The HTML elements building the viewer object will be sized based on the size of this container `
` element. To make the viewer fit in another container, use *position:relative* and provide width and height values.
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\AddTrvStyles.html}}
-1. The HTML page that we have just created should look like this:
+ >The above CSS rule will be applied to the `
` element holding the viewer object. The HTML elements building the viewer object will be sized based on the size of this container `
` element. To make the viewer fit in another container, use *position:relative* and provide width and height values.
- ````HTML
-
-
-
- Telerik HTML5 Report Viewer
-
-
-
-
-
-
-
-
-
- loading...
-
-
-
-
-````
+1. The HTML page that we have just created should look like this:
+ {{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\TrvPage.html}}
1. Run the project and navigate to the page with the HTML5 Report Viewer that we have just created.
diff --git a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/printing-reports.md b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/printing-reports.md
index e99bae880..fa66ecf84 100644
--- a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/printing-reports.md
+++ b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/printing-reports.md
@@ -17,37 +17,24 @@ The printing functionality is based on rendering the report in PDF format with s
The print functionality requires:
-* [Adobe Acrobat Reader](https://get.adobe.com/reader/) / [Adobe Acrobat](https://acrobat.adobe.com/us/en/) browser plug-in or Chrome PDF plug-in (for Chrome) should be installed and enabled. For more information on configuring the Adobe PDF plug-in please refer to the [Configure browser to use the Adobe PDF plug-in](https://helpx.adobe.com/acrobat/kb/pdf-browser-plugin-configuration.html) article. If Adobe Reader or Chrome PDF plug-in is not detected, clicking the print button would export the report to PDF. Depending on the browser the PDF would either open directly for preview or ask you to save it as a file.
+* [Adobe Acrobat Reader](https://get.adobe.com/reader/) / [Adobe Acrobat](https://acrobat.adobe.com/us/en/) browser plug-in or Chrome PDF plug-in (for Chrome) should be installed and enabled. For more information on configuring the Adobe PDF plug-in, please refer to the [Configure browser to use the Adobe PDF plug-in](https://helpx.adobe.com/acrobat/kb/pdf-browser-plugin-configuration.html) article. If Adobe Reader or Chrome PDF plug-in is not detected, clicking the print button would export the report to PDF. Depending on the browser, the PDF would either open directly for preview or ask you to save it as a file.
* Disable any other PDF-related plug-ins such as Foxit.
* JavaScript should be enabled in your browser.
* JavaScript should be enabled in Adobe Reader.
-> In __Google Chrome 77+__ [printing is allowed only in response to a user gesture](https://pdfium.googlesource.com/pdfium.git/+/2021804f1b414c97667c03d7ab19daf66f6a19ef). This prevents the print dialog from opening automatically when a PDF is embedded in a web page and the user needs to click on the print button manually to invoke the print preview dialog.
+> In __Google Chrome 77+__ [printing is allowed only in response to a user gesture](https://pdfium.googlesource.com/pdfium.git/+/2021804f1b414c97667c03d7ab19daf66f6a19ef). This prevents the print dialog from opening automatically when a PDF is embedded in a web page, and the user needs to click on the print button manually to invoke the print preview dialog.
> In __Chromium-based__ browsers, there is an option to always and automatically download PDF documents in the `pdfDocuments` settings. If enabled, it prevents the print dialog from opening and must be disabled for the printing functionality to work as expected - [Troubleshooting TelerikReportViewer execCommand JavaScript Error]({%slug troubleshooting-telerikreportviewer-execcommand-javascript-error-edge%}).
-> In __Firefox 19+__ the default viewing option for PDF files is the __PDF.js__, which is not added as a plug-in and Firefox does not expose the content type viewing preferences - [Firefox bugs](https://bugzilla.mozilla.org/show_bug.cgi?id=840439). Thus the Adobe PDF plug-in is always active whether or not it is the preferred viewing option. To ensure the print operation in Firefox will be accomplished, clicking the print button will export the report to PDF which will be printed with the available client viewing tools.
+> In __Firefox 19+__ the default viewing option for PDF files is __PDF.js__, which is not added as a plug-in, and Firefox does not expose the content type viewing preferences - [Firefox bugs](https://bugzilla.mozilla.org/show_bug.cgi?id=840439). Thu,s the Adobe PDF plug-in is always active whether or not it is the preferred viewing option. To ensure the print operation in Firefox will be accomplished, clicking the print button will export the report to PDF, which will be printed with the available client viewing tools.
By default, the viewer widget tries to use the PDF plug-in of the browser for printing. When it is not available or not supported, the widget falls back to exporting to a PDF file containing a special 'print' script. The purpose of this script is to open the Print dialog of the PDF reader right after the file has been opened.
-You can manually control the printing behavior through the [printMode]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/report-viewer-initialization%}) option when creating the report viewer widget. When the value is set to *telerikReportViewer.PrintModes.FORCE_PDF_FILE* the widget will always export the report document to a PDF file with the special 'print' script. When the value is set to *telerikReportViewer.PrintModes.FORCE_PDF_PLUGIN* the widget will always try to use the PDF plug-in. In this case, if the browser doesn't have a PDF plug-in or it does not support the 'print' script nothing will happen. By default when the value is not explicitly set, the widget will try to automatically determine whether to export the report document or use the browser's PDF plug-in. This is equivalent to setting the *telerikReportViewer.PrintModes.AUTO_SELECT* value.
+You can manually control the printing behavior through the [printMode]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/report-viewer-initialization%}) option when creating the report viewer widget. When the value is set to *telerikReportViewer.PrintModes.FORCE_PDF_FILE* the widget will always export the report document to a PDF file with the special 'print' script. When the value is set to *telerikReportViewer.PrintModes.FORCE_PDF_PLUGIN* the widget will always try to use the PDF plug-in. In this case, if the browser doesn't have a PDF plug-in or does not support the 'print' script, nothing will happen. By default, when the value is not explicitly set, the widget will try to automatically determine whether to export the report document or use the browser's PDF plug-in. This is equivalent to setting the *telerikReportViewer.PrintModes.AUTO_SELECT* value.
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/",
- templateUrl: 'src/templates/telerikReportViewerTemplate-{{buildversion}}.html',
- reportSource: { report: "product catalog.trdp" },
- printMode: printMode
- });
-````
+{{source=CodeSnippets\BlazorAppSnippets\wwwroot\HTML5Printing.js}}
## See Also
diff --git a/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md b/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md
index 6ebb7cfef..5c014aa5b 100644
--- a/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md
+++ b/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md
@@ -23,7 +23,7 @@ The following articles will guide you on [how to use the new Native Blazor Repor
The Native Blazor Report Viewer item template allows you to quickly and easily add the Native Blazor Report Viewer to your application.
-Suppose you wish to connect the Report Viewer to a Reporting REST service. In that case, you can analogically follow the steps outlined in the [How to Use HTML5 Report Viewer with REST Service]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-rest-service%}) documentation article.
+Suppose you wish to connect the Report Viewer to a Reporting REST service. In that case, you can analogously follow the steps outlined in the [How to Use HTML5 Report Viewer with REST Service]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/how-to-use-html5-report-viewer-with-rest-service%}) documentation article.
Just make sure that you select __Native Blazor Report Viewer page__, instead of __HTML5 Report Viewer page__ when adding a new item to your project, and follow the steps in the __'Add new Report Viewer'__ dialog.
@@ -33,141 +33,39 @@ If you wish to connect the Report Viewer to a Report Server instance, refer to t
## Adding the Native Blazor Report Viewer Component Manually
-1. Add NuGet package reference to the __Telerik.ReportViewer.BlazorNative__ (or __Telerik.ReportViewer.BlazorNative.Trial__) package hosted on the Progress Telerik proprietary NuGet feed. Make sure you have the needed NuGet feed added to the VS setting using the article [How to add the Telerik private NuGet feed to Visual Studio]({%slug telerikreporting/using-reports-in-applications/how-to-add-the-telerik-private-nuget-feed-to-visual-studio%}).
+1. Add NuGet package reference to the __Telerik.ReportViewer.BlazorNative__ (or __Telerik.ReportViewer.BlazorNative.Trial__) package hosted on the Progress Telerik proprietary NuGet feed. Make sure you have the needed NuGet feed added to the VS settings using the article [How to add the Telerik private NuGet feed to Visual Studio]({%slug telerikreporting/using-reports-in-applications/how-to-add-the-telerik-private-nuget-feed-to-visual-studio%}).
-1. Make sure app configuration inside the `Configure` method of the `Startup.cs` (or `Program.cs` if .NET 6+ with Top Level Statements is used) file can serve static files:
+1. Make sure the app configuration inside the `Configure` method of the `Startup.cs` (or `Program.cs` if .NET 6+ with Top Level Statements is used) file can serve static files:
- ````C#
-app.UseStaticFiles();
-````
+ {{source=CodeSnippets\BlazorAppSnippets\Program.cs region=UseStaticFiles}}
>note When it comes to Blazor WebAssembly applications, the above step should be implemented in the project used as the *Server* where the [Telerik Reporting REST Service]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/overview%}) is located. With the [ASP.NET Core Hosted](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=windows) template, that would be the `Blazor.Server` project.
1. Add JavaScript and CSS dependencies to the __head__ element of the __Pages/_Layout.cshtml__ (Blazor Server) or __wwwroot/index.html__ (Blazor WebAssembly), or `Components/App.razor` (Blazor Web App):
- ````HTML
-
- @* Or this one if using the Telerik.UI.for.Blazor.Trial package *@
- @* *@
+ {{source=CodeSnippets\BlazorAppSnippets\Components\Pages\Native_Layout.cshtml}}
-
- @* Or this one if using the Telerik.ReportViewer.BlazorNative.Trial package *@
- @* *@
-
- @* The version of the Kendo Utils should be updated according to the version of the Kendo theme used by the Telerik UI for Blazor package. *@
- @* The version of the Kendo Theme can be seen in the release notes of the Telerik UI for Blazor version - https://www.telerik.com/support/whats-new/blazor-ui/release-history. *@
-
-
-
- @* Or this one if using the Telerik.UI.for.Blazor.Trial package *@
- @* *@
-
-
- @* Or this one if using the Telerik.ReportViewer.BlazorNative.Trial package *@
- @* *@
-````
-
-
-1. Add [Telerik UI for Blazor Built-in Themes](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes) to the __head__ element of the __Pages/_Layout.cshtml__ (Blazor Server) or __wwwroot/index.html__ (Blazor WebAssembly), or `Components/App.razor` (Blazor Web App). The Razor syntax for a server application differs and you need to escape the __@__ symbol as __@@__:
-
- ````HTML
-
-````
+1. Add [Telerik UI for Blazor Built-in Themes](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes) to the __head__ element of the __Pages/_Layout.cshtml__ (Blazor Server) or __wwwroot/index.html__ (Blazor WebAssembly), or `Components/App.razor` (Blazor Web App). The Razor syntax for a server application differs, and you need to escape the __@__ symbol as __@@__:
+ {{source=CodeSnippets\BlazorAppSnippets\Components\Pages\Native_AddTheme.cshtml}}
1. You can set the project to recognize all Telerik components without explicit __@using__ statements on every __.razor__ file. To achieve this, add the following to your __~/_Imports.razor__:
- ````C#
-@using Telerik.Blazor
- @using Telerik.Blazor.Components
- @using Telerik.ReportViewer.BlazorNative
-````
-
+ {{source=CodeSnippets\BlazorAppSnippets\Components\Native_Imports.razor}}
1. Wrap the content of the main layout file(by default, the __~/Shared/MainLayout.razor__ file in the Blazor project) with a razor component called __TelerikLayout.razor__:
- ````HTML
-@inherits LayoutComponentBase
-
-
- @Body
-
-````
-
-
-1. If using the Reports web service (either locally hosted or in another application) use the following snippet to place the viewer component in a razor page like __Pages/Index.razor__. Note that when referencing the Reports service from another application the `ServiceUrl` setting should be the absolute URI to the service. Remember to set the actual __ReportSource__ along with eventual parameters:
-
- ````CSHTML
-@page "/"
- @* For Blazor Web Apps, an interactive render mode should be used, for example: *@
- @* @rendermode InteractiveServer *@
-
- Report Viewer
-
-
-
-
- @code {
- public ScaleMode ScaleMode { get; set; } = ScaleMode.Specific;
- public ViewMode ViewMode { get; set; } = ViewMode.Interactive;
- public bool ParametersAreaVisible { get; set; }
- public bool DocumentMapVisible { get; set; }
- public double Scale { get; set; } = 1.0;
-
- public ReportSourceOptions ReportSource { get; set; } = new ReportSourceOptions("Report Catalog.trdx",
- new Dictionary
- {
- // Add parameters if applicable
- });
- }
-````
+
+
+1. If using the Reports web service (either locally hosted or in another application), use the following snippet to place the viewer component in a Razor page like __Pages/Index.razor__. Note that when referencing the Reports service from another application, the `ServiceUrl` setting should be the absolute URI to the service. Remember to set the actual __ReportSource__ along with eventual parameters:
+
+ {{source=CodeSnippets\BlazorAppSnippets\Components\Pages\Native_Viewer_REST.razor}}
> The `ReportSource` of the viewer should be set as in the above example. i.e. with the binding `@bind-ReportSource="@ReportSource"`. Setting the `ReportSource` directly, for example, like `ReportSource="@(new ReportSourceOptions("Report Catalog.trdp", new Dictionary()))"` introduces circular dependency that causes endless refreshes of the Report Viewer that lead to infinite sequence of requests to the Reporting REST Service starting with Registe Client, etc.
-1. If displaying reports from a Report Server instance use the following snippet to place the viewer component in a razor page like __Pages/Index.razor__. Remember to set the actual __ReportServer__ and __ReportSource__ settings:
-
- ````CSHTML
-@page "/"
- @* For Blazor Web Apps, an interactive render mode should be used, for example: *@
- @* @rendermode InteractiveServer *@
-
- Report Viewer
-
-
-
-
-
-
-
- @code {
- public ScaleMode ScaleMode { get; set; } = ScaleMode.Specific;
- public ViewMode ViewMode { get; set; } = ViewMode.Interactive;
- public bool ParametersAreaVisible { get; set; }
- public bool DocumentMapVisible { get; set; }
- public double Scale { get; set; } = 1.0;
-
- public ReportSourceOptions ReportSource { get; set; } = new ReportSourceOptions("Published/Dashboard", new Dictionary
- {
- // Add parameters if applicable
- });
- }
-````
+1. If displaying reports from a Report Server instance, use the following snippet to place the viewer component in a Razor page like __Pages/Index.razor__. Remember to set the actual __ReportServer__ and __ReportSource__ settings:
+ {{source=CodeSnippets\BlazorAppSnippets\Components\Pages\Native_Viewer_ReportServer.razor}}
1. Use the rest of the parameters exposed on the Blazor viewer component to set up its appearance and behavior as desired.
1. Finally, run the project to see the rendered report.
diff --git a/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/send-mail-message.md b/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/send-mail-message.md
index dbe17aedc..01df7cb03 100644
--- a/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/send-mail-message.md
+++ b/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/send-mail-message.md
@@ -8,9 +8,9 @@ published: True
position: 3
---
-# Using Send Mail Message Functionality in Native Blazor Report Viewer
+# Using the Send Mail Message Functionality in Native Blazor Report Viewer
-The native Blazor Report Viewer provides the capability to send the currently displaced report in the specified document format with an e-mail message.
+The native Blazor Report Viewer provides the capability to send the currently displayed report in the specified document format with an email message.
## Enabling the send mail message functionality
@@ -20,41 +20,21 @@ Web browsers cannot initiate the sending of e-mail messages containing attachmen
Once ready, the send mail message toolbar button can be enabled through the `EnableSendEmail` initialization option.
-````CSHTML
-
-````
+{{source=CodeSnippets\BlazorAppSnippets\Components\Pages\Native_EnableSendEmail.cshtml}}
## Send Mail Message Dialog
-The `Send Mail Message` dialog is a [Telerik Blazor UI Window](https://docs.telerik.com/blazor-ui/components/window/overview) widget, that stays on top of the report viewer.
+The `Send Mail Message` dialog is a [Telerik Blazor UI Window](https://docs.telerik.com/blazor-ui/components/window/overview) widget that stays on top of the report viewer.

## Pre-configuring the Send Mail Message Dialog Settings
-The settings are populated from a `SendEmailDialogSettings` tag, that sits inside the `ReportViewerSettings` parent tag. The values are used __only__ for the initial population of the fields. Two-way binding is __not__ supported for those settings.
+The settings are populated from a `SendEmailDialogSettings` tag that sits inside the `ReportViewerSettings` parent tag. The values are used __only__ for the initial population of the fields. Two-way binding is __not__ supported for those settings.
### Markup Example
-````CSHTML
-
-
-
-
-
-
-````
+{{source=CodeSnippets\BlazorAppSnippets\Components\Pages\Native_SendEmail.razor}}
### Setting Fields
@@ -63,7 +43,7 @@ The settings are populated from a `SendEmailDialogSettings` tag, that sits insid
* __CC__ (Optional) - E-mail addresses used for the MailMessage `CC` value. Use `,`(comma) to separate multiple e-mail addresses.
* __Subject__ (Optional) - The MailMessage subject.
* __Body__ (Optional) - The MailMessage body.
-* __Format__ - If empty, or not present in the list of supported formats by the report, the first available format from the list is chosen instead. Uses non-localized values, such as `PDF`, `CSV` etc.
+* __Format__ - If empty or not present in the list of supported formats by the report, the first available format from the list is chosen instead. Uses non-localized values, such as `PDF`, `CSV`, etc.
## See Also
diff --git a/embedding-reports/host-the-report-engine-remotely/asp.net-core-web-api-implementation/host-reports-service-in-.net-5.md b/embedding-reports/host-the-report-engine-remotely/asp.net-core-web-api-implementation/host-reports-service-in-.net-5.md
index 370f0570f..2ee529fdc 100644
--- a/embedding-reports/host-the-report-engine-remotely/asp.net-core-web-api-implementation/host-reports-service-in-.net-5.md
+++ b/embedding-reports/host-the-report-engine-remotely/asp.net-core-web-api-implementation/host-reports-service-in-.net-5.md
@@ -9,9 +9,9 @@ position: 3
previous_url: /telerik-reporting-rest-service-aspnetcore-net5,/embedding-reports/host-the-report-engine-remotely/telerik-reporting-rest-services/asp.net-core-web-api-implementation/host-reports-service-in-.net-5
---
-# Hosting the Telerik Reporting REST Service in an ASP.NET Core Application in .NET 6, .NET 8 and .NET 9 with Startup.cs
+# Hosting the Telerik Reporting REST Service in an ASP.NET Core Application in .NET 6, .NET 8, and .NET 9 with Startup.cs
-This article guides you on how to host a Reports Web Service in order to expose the Reports Generation Engine to an ASP.NET Core in .NET Web Application. The configuration of the application in this tutorial is set up in the `Startup.cs` file of the project.
+This article guides you on how to host a Reports Web Service to expose the Reports Generation Engine to an ASP.NET Core in a .NET Web Application. The configuration of the application in this tutorial is set up in the `Startup.cs` file of the project.
If you prefer to use [top level statements introduced with .NET 6](https://learn.microsoft.com/en-us/dotnet/csharp/whats-new/tutorials/top-level-statements), refer to the article [Hosting in .NET 6+ with Top-Level Statements]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/asp.net-core-web-api-implementation/how-to-host-reports-service-in-asp.net-core-in-.net-6-with-minimal-api%}).
@@ -24,11 +24,11 @@ The guide is separated into sections for readability reasons. Along with the ste
## Using the REST Service Project Template
-In Visual Studio open the __Add New Project__ dialog and select *Telerik Reporting REST Service* project template. After clicking `Create` a menu pops up that allows you to configure the following properties of the REST Service: target framework, service clients (report viewer and report designer), Cross-Origin Resource Sharing, Host Application ID, and Application URL.
+In Visual Studio, open the __Add New Project__ dialog and select *Telerik Reporting REST Service* project template. After clicking `Create`р a menu pops up that allows you to configure the following properties of the REST Service: target framework, service clients (report viewer and report designer), Cross-Origin Resource Sharing, Host Application ID, and Application URL.

-Set the Target Framework to .NET 6, .NET 8 or .NET 9.
+Set the Target Framework to .NET 6, .NET 8, or .NET 9.
Once you have configured the rest of the options to your liking, click `Finish` and a new project, containing all the necessary files and packages to host the Telerik Reporting REST service instance, will be added to your solution.
@@ -49,9 +49,9 @@ In this tutorial, the resulting service will use the sample report definitions d
1. Find the sample reports in *{Telerik Reporting installation path}\Report Designer\Examples*.
1. Add a new folder to your solution called `Reports` and copy all sample reports into it.
-1. Later in the tutorial we will make sure that the ReportsController is able to resolve the definitions for the requested reports from this project folder.
+1. Later in the tutorial, we will make sure that the ReportsController can resolve the definitions for the requested reports from this project folder.
-> It is recommended to use declarative definitions (TRDP/TRDX/TRBP) authored using the [Standalone Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/standalone-report-designer/overview%}) or the [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) in order to take advantage of their design-time tooling because the VS integrated report designer tooling is still not available in .NET projects.
+> It is recommended to use declarative definitions (TRDP/TRDX/TRBP) authored using the [Standalone Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/standalone-report-designer/overview%}) or the [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) to take advantage of their design-time tooling because the VS integrated report designer tooling is still not available in .NET projects.
### Add the Required Dependencies
@@ -60,86 +60,48 @@ This guide applies the recommended NuGet package references approach to add the
1. Reference the __Telerik.Reporting.Services.AspNetCore__ (or __Telerik.Reporting.Services.AspNetCore.Trial__) package.
1. Optionally, to enable the Office OpenXML document formats (XLSX, DOCX, and PPTX) as export options, reference the __Telerik.Reporting.OpenXmlRendering__ (or __Telerik.Reporting.OpenXmlRendering.Trial__) NuGet package.
-> The recommended way of adding the necessary dependencies is to use the [Progress Telerik proprietary NuGet feed]({%slug telerikreporting/using-reports-in-applications/how-to-add-the-telerik-private-nuget-feed-to-visual-studio%}) and reference the dependencies as NuGet packages. This would also add the indirect dependencies to your project bringing easier dependency management.
-Alternatively, the assemblies are available in the `\Bin\net6.0\` and `\Bin\netstandard2.0\` folders of the Telerik Reporting installation directory. However, this would require to manually add all indirect dependencies listed in [.NET Support - Requirements]({%slug telerikreporting/using-reports-in-applications/dot-net-core-support%}#requirements) section and also the following dependency package: [Microsoft.AspNetCore.Mvc.NewtonsoftJson version 5.0.0](https://www.nuget.org/packages/Microsoft.AspNetCore.Mvc.NewtonsoftJson/) and [DocumentFormat.OpenXML version 2.7.2.0 or above](https://www.nuget.org/packages/DocumentFormat.OpenXml/).
-Note that you need the last reference only to enable the Office OpenXML document formats. The Reporting engine relies on the [GDI+ API](https://learn.microsoft.com/en-us/windows/win32/gdiplus/-gdiplus-gdi-start) which is available on the Windows OS. On Linux and macOS we use the [SkiaSharp](https://github.com/mono/SkiaSharp) 2D Graphics Library based on Google's [Skia](https://skia.org/) Graphics Library.
+> The recommended way of adding the necessary dependencies is to use the [Progress Telerik proprietary NuGet feed]({%slug telerikreporting/using-reports-in-applications/how-to-add-the-telerik-private-nuget-feed-to-visual-studio%}) and reference the dependencies as NuGet packages. This would also add the indirect dependencies to your project, making dependency management easier.
+Alternatively, the assemblies are available in the `\Bin\net6.0\` and `\Bin\netstandard2.0\` folders of the Telerik Reporting installation directory. However, this would require manually adding all indirect dependencies listed in [.NET Support - Requirements]({%slug telerikreporting/using-reports-in-applications/dot-net-core-support%}#requirements) section and also the following dependency package: [Microsoft.AspNetCore.Mvc.NewtonsoftJson version 5.0.0](https://www.nuget.org/packages/Microsoft.AspNetCore.Mvc.NewtonsoftJson/) and [DocumentFormat.OpenXML version 2.7.2.0 or above](https://www.nuget.org/packages/DocumentFormat.OpenXml/).
+Note that you need the last reference only to enable the Office OpenXML document formats. The Reporting engine relies on the [GDI+ API](https://learn.microsoft.com/en-us/windows/win32/gdiplus/-gdiplus-gdi-start), which is available on the Windows OS. On Linux and macOS, we use the [SkiaSharp](https://github.com/mono/SkiaSharp) 2D Graphics Library based on Google's [Skia](https://skia.org/) Graphics Library.
### Setup the Startup.cs file for the Reports service
> When the [Minimal API](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/minimal-apis) approach for hosting the Reporting REST Service is used, exceptions thrown by the service are propagated to and displayed in the Report Viewer. If this is undesired, set up the service using the 'Controllers' approach - [Hosting the Reporting REST Service in ASP.NET Core with Controllers]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/asp.net-core-web-api-implementation/host-reports-service-in-.net-with-controllers%}).
-The [`ConfigureServices`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.hosting.webhostbuilder.configureservices) method inside the `Startup.cs` file in the project should be modified in order to enable the Reports Service functionality.
+The [`ConfigureServices`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.hosting.webhostbuilder.configureservices) method inside the `Startup.cs` file in the project should be modified to enable the Reports Service functionality.
1. Call the [`AddNewtonsoftJson`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.dependencyinjection.newtonsoftjsonmvcbuilderextensions.addnewtonsoftjson) extension method on the [IMvcBuilder](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.dependencyinjection.imvcbuilder) object to enable the **NewtonsoftJson** serialization:
- ````C#
-services.AddNewtonsoftJson();
-````
-
+ {{source=CodeSnippets\AspNetCoreWebApiCS\Startup.cs region=AddNewtonsoftJson Main Method}}
1. Set up the [ReportServiceConfiguration](/api/telerik.reporting.services.reportserviceconfiguration) by invoking the `AddTelerikReporting` extension method on the [IMvcBuilder](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.dependencyinjection.imvcbuilder) object. In the code below, the first argument will represent the [HostAppId](/api/telerik.reporting.services.reportserviceconfiguration#Telerik_Reporting_Services_ReportServiceConfiguration_HostAppId) of the [ReportServiceConfiguration](/api/telerik.reporting.services.reportserviceconfiguration) object, while the second is the path that will be passed to the [UriReportSourceResolver](/api/telerik.reporting.services.urireportsourceresolver):
- ````CSharp
-var reportsPath = Path.Combine(builder.Environment.ContentRootPath, "Reports");
-
- services.AddTelerikReporting("ReportingNet", reportsPath);
-````
-
+ {{source=CodeSnippets\AspNetCoreWebApiCS\Startup.cs region=ReportServiceConfiguration Main Method}}
1. Register the Telerik Reporting Minimal API by invoking the `UseTelerikReporting` extension method on the [WebApplication](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.builder.webapplication) object. The application must also enable the endpoint routing middleware added by the [UseRouting](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.builder.endpointroutingapplicationbuilderextensions.userouting) method:
- ````CSharp
-app.UseTelerikReporting();
-app.UseRouting();
-````
+ {{source=CodeSnippets\AspNetCoreWebApiCS\Startup.cs region=UseReporting Main Method}}
### Adding Connection Strings to the Configuration
-The report generation engine can retrieve SQL Connection Strings and specific Report Generation Engine Settings that provide flexibility of the deployed application. It utilizes the [IConfiguration interface](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.configuration.iconfiguration) for this purpose.
+The report generation engine can retrieve SQL Connection Strings and specific Report Generation Engine Settings that provide flexibility for the deployed application. It utilizes the [IConfiguration interface](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.configuration.iconfiguration) for this purpose.
The .NET applications use a [key-value JSON-based](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/configuration/) file named by default `appSettings.json`. The default `ReportingEngineConfiguration` will be initialized from `appSettings.json` or `appsettings.{EnvironmentName}.json`.
-All Reporting-related configurations should be placed in the JSON configuraion file - (add one in the project root if such does not exist). For example, the `ConnectionStrings` setting should be configured in JSON-based format like this:
+All Reporting-related configurations should be placed in the JSON configuration file - (add one in the project root if such does not exist). For example, the `ConnectionStrings` setting should be configured in JSON-based format like this:
-````JSON
-{
- "ConnectionStrings": {
- "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true"
- }
-}
-````
+{{source=CodeSnippets\AspNetCoreWebApiCS\appsettings.ConnectionString_0.json}}
The above type of connection string lacks information about the data provider and will use [System.Data.SqlClient](https://learn.microsoft.com/en-us/dotnet/api/system.data.sqlclient) as provider invariant name. When it's necessary to specify a different data provider, the following notation is also supported:
-````JSON
-{
- "ConnectionStrings": {
- "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": {
- "connectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true",
- "providerName": "System.Data.SqlClient"
- }
- }
-}
-````
+{{source=CodeSnippets\AspNetCoreWebApiCS\appsettings.ConnectionString_1.json}}
The two types of connection string notations specified above can coexist in a single ConnectionStrings section.
The last supported type of `ConnectionStrings` configuration uses an array to provide information about each connection string:
-````JSON
-{
- //...
- "ConnectionStrings": [
- {
- "name": "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString",
- "connectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true",
- "providerName": "System.Data.SqlClient"
- }
- ]
-}
-````
-
+{{source=CodeSnippets\AspNetCoreWebApiCS\appsettings.ConnectionString_2.json}}
### Test the service implementation
@@ -151,24 +113,11 @@ You may need to enable [Cross-Origin Resource Sharing (CORS)](https://developer.
Add the following code to the *ConfigureServices* method of the *Startup.cs* file to add a new CORS policy for the REST Service:
-````C#
-services.AddCors(corsOption => corsOption.AddPolicy(
- "ReportingRestPolicy",
- corsBuilder =>
- {
- corsBuilder.AllowAnyOrigin()
- .AllowAnyMethod()
- .AllowAnyHeader();
- }
-));
-````
+{{source=CodeSnippets\AspNetCoreWebApiCS\Program.cs region=AddCors}}
Activate the above policy for the application by adding the next code in the `Configure` method of the `Startup.cs` file:
-````C#
-app.UseCors("ReportingRestPolicy");
-````
-
+{{source=CodeSnippets\AspNetCoreWebApiCS\Program.cs region=UseCors}}
## See Also
diff --git a/embedding-reports/host-the-report-engine-remotely/asp.net-core-web-api-implementation/host-reports-service-in-.net-6-with-minimal-api.md b/embedding-reports/host-the-report-engine-remotely/asp.net-core-web-api-implementation/host-reports-service-in-.net-6-with-minimal-api.md
index c18392b63..6c7a35eb4 100644
--- a/embedding-reports/host-the-report-engine-remotely/asp.net-core-web-api-implementation/host-reports-service-in-.net-6-with-minimal-api.md
+++ b/embedding-reports/host-the-report-engine-remotely/asp.net-core-web-api-implementation/host-reports-service-in-.net-6-with-minimal-api.md
@@ -1,9 +1,9 @@
---
title: Hosting in .NET with Minimal API
page_title: Hosting the Reporting REST Service in ASP.NET Core with Minimal API
-description: "Learn how to Host Telerik Reporting REST Service in ASP.NET Core in .NET 6 and above with Minimal API in this step by step tutorial."
+description: "Learn how to host Telerik Reporting REST Service in ASP.NET Core in .NET 6 and above with Minimal API in this step-by-step tutorial."
slug: telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/asp.net-core-web-api-implementation/how-to-host-reports-service-in-asp.net-core-in-.net-6-with-minimal-api
-tags: how,to,host,reports,service,in,asp.net,core,in,.net,6,with,top-level,statements
+tags: host,reports,service,.net,top-level,statements
published: True
position: 2
previous_url: /telerik-reporting-rest-service-net6-minimal-api,/embedding-reports/host-the-report-engine-remotely/telerik-reporting-rest-services/asp.net-core-web-api-implementation/host-reports-service-in-.net-6-with-minimal-api
@@ -11,7 +11,7 @@ previous_url: /telerik-reporting-rest-service-net6-minimal-api,/embedding-report
# Hosting the Telerik Reporting REST Service in ASP.NET Core in .NET 6+ with Minimal API
-This article guides you how to host a Reporting REST Service in order to expose the Reports Generation Engine to an ASP.NET Core in .NET 6+ Web Application with Minimal APIs.
+This article guides you on how to host a Reporting REST Service to expose the Reports Generation Engine to an ASP.NET Core in .NET 6+ Web Application with Minimal APIs.
Check the [Minimal APIs](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/minimal-apis/overview) article for general details on the approach.
The guide is separated into sections for readability reasons. Along with the steps, it elaborates on the concepts and theory behind each step.
@@ -23,11 +23,11 @@ The guide is separated into sections for readability reasons. Along with the ste
## Using the REST Service Project Template
-In Visual Studio open the __Add New Project__ dialog and select *Telerik Reporting REST Service* project template. After clicking `Create` a menu pops up that allows you to configure the following properties of the REST Service: target framework, service clients (report viewer and report designer), Cross-Origin Resource Sharing, Host Application ID, and Application URL.
+In Visual Studio, open the __Add New Project__ dialog and select *Telerik Reporting REST Service* project template. After clicking `Create`, a menu pops up that allows you to configure the following properties of the REST Service: target framework, service clients (report viewer and report designer), Cross-Origin Resource Sharing, Host Application ID, and Application URL.

-Set the Target Framework to .NET 6, .NET 8 or .NET 9.
+Set the Target Framework to .NET 6, .NET 8, or .NET 9.
Once you have configured the rest of the options to your liking, click `Finish` and a new project, containing all the necessary files and packages to host the Telerik Reporting REST service instance, will be added to your solution.
@@ -40,8 +40,8 @@ First, you need to create a new ASP.NET Core project:
1. Open __Visual Studio 2022__.
1. From the __File__ menu, select __New__ > __Project__.
1. In the __Create a new project__ dialog select __ASP.NET Core Web App__ project template and click __Next__.
-1. In the __Configure your new project__ dialog choose a name and location for the project and click __Next__.
-1. In the __Additional information__ dialog select from the drop down __.NET 6.0 (Long-term support)__ , .NET 8 or .NET 9. If you configure the project for HTTPS make sure to have a proper certificate assigned. Click on __Create__.
+1. In the __Configure your new project__ dialog, choose a name and location for the project and click __Next__.
+1. In the __Additional information__ dialog select from the drop down __.NET 6.0 (Long-term support)__ , .NET 8 or .NET 9. If you configure the project for HTTPS, make sure to have a proper certificate assigned. Click on __Create__.
### Add Report Definitions
@@ -49,20 +49,20 @@ In this tutorial, the resulting service will use the sample report definitions d
1. Find the sample reports in *{Telerik Reporting installation path}\Report Designer\Examples*.
1. Add a new folder to your solution called `Reports` and copy all sample reports into it.
-1. Later in the tutorial we will make sure that the ReportsController is able to resolve the definitions for the requested reports from this project folder.
+1. Later in the tutorial, we will make sure that the ReportsController can resolve the definitions for the requested reports from this project folder.
-> It is recommended to use declarative definitions (TRDP/TRDX/TRBP) authored using the [Standalone Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/standalone-report-designer/overview%}) or the [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) in order to take advantage of their design-time tooling because the VS integrated report designer tooling is still not available in .NET 6+ projects.
+> It is recommended to use declarative definitions (TRDP/TRDX/TRBP) authored using the [Standalone Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/standalone-report-designer/overview%}) or the [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) to take advantage of their design-time tooling because the VS integrated report designer tooling is still not available in .NET 6+ projects.
### Add the Required Dependencies
This guide applies the recommended NuGet package references approach to add the dependencies:
1. Reference the __Telerik.Reporting.Services.AspNetCore__ (or __Telerik.Reporting.Services.AspNetCore.Trial__) package.
-1. Optionally, to enable the Office OpenXML document formats (XLSX, DOCX and PPTX) as export options, reference the __Telerik.Reporting.OpenXmlRendering__ (or __Telerik.Reporting.OpenXmlRendering.Trial__) NuGet package.
+1. Optionally, to enable the Office OpenXML document formats (XLSX, DOCX, and PPTX) as export options, reference the __Telerik.Reporting.OpenXmlRendering__ (or __Telerik.Reporting.OpenXmlRendering.Trial__) NuGet package.
-> The recommended way of adding the necessary dependencies is to use the [Progress Telerik proprietary NuGet feed]({%slug telerikreporting/using-reports-in-applications/how-to-add-the-telerik-private-nuget-feed-to-visual-studio%}) and reference the dependencies as NuGet packages. This would also add the indirect dependencies to your project bringing easier dependency management.
-Alternatively, the assemblies are available in the `\Bin\net6.0\` and `\Bin\netstandard2.0\` folders of Telerik Reporting installation directory. However, this would require to manually add all indirect dependencies listed in [.NET Support - Requirements]({%slug telerikreporting/using-reports-in-applications/dot-net-core-support%}#requirements) section and also the following dependency package: [Microsoft.AspNetCore.Mvc.NewtonsoftJson version 5.0.0](https://www.nuget.org/packages/Microsoft.AspNetCore.Mvc.NewtonsoftJson/) and [DocumentFormat.OpenXML version 2.7.2.0 or above](https://www.nuget.org/packages/DocumentFormat.OpenXml/).
-Note that you need the last reference only to enable the Office OpenXML document formats. The Reporting engine relies on the [GDI+ API](https://learn.microsoft.com/en-us/windows/win32/gdiplus/-gdiplus-gdi-start) which is available on the Windows OS. On Linux and macOS we use the [SkiaSharp](https://github.com/mono/SkiaSharp) 2D Graphics Library based on Google's [Skia](https://skia.org/) Graphics Library.
+> The recommended way of adding the necessary dependencies is to use the [Progress Telerik proprietary NuGet feed]({%slug telerikreporting/using-reports-in-applications/how-to-add-the-telerik-private-nuget-feed-to-visual-studio%}) and reference the dependencies as NuGet packages. This would also add the indirect dependencies to your project, making dependency management easier.
+Alternatively, the assemblies are available in the `\Bin\net6.0\` and `\Bin\netstandard2.0\` folders of the Telerik Reporting installation directory. However, this would require manually adding all indirect dependencies listed in [.NET Support - Requirements]({%slug telerikreporting/using-reports-in-applications/dot-net-core-support%}#requirements) section and also the following dependency package: [Microsoft.AspNetCore.Mvc.NewtonsoftJson version 5.0.0](https://www.nuget.org/packages/Microsoft.AspNetCore.Mvc.NewtonsoftJson/) and [DocumentFormat.OpenXML version 2.7.2.0 or above](https://www.nuget.org/packages/DocumentFormat.OpenXml/).
+Note that you need the last reference only to enable the Office OpenXML document formats. The Reporting engine relies on the [GDI+ API](https://learn.microsoft.com/en-us/windows/win32/gdiplus/-gdiplus-gdi-start), which is available on the Windows OS. On Linux and macOS, we use the [SkiaSharp](https://github.com/mono/SkiaSharp) 2D Graphics Library based on Google's [Skia](https://skia.org/) Graphics Library.
### Setup the Program.cs file as a starting point of the Reporting REST Service project with Minimal APIs
@@ -72,27 +72,15 @@ Modify the `Program.cs` file in the project to enable the Reports Service functi
1. Call the [`AddNewtonsoftJson`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.dependencyinjection.newtonsoftjsonmvcbuilderextensions.addnewtonsoftjson) extension method on the [IMvcBuilder](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.dependencyinjection.imvcbuilder) object to enable the **NewtonsoftJson** serialization:
- ````CSharp
-builder.Services.AddNewtonsoftJson();
-````
-
+ {{source=CodeSnippets\AspNetCoreWebApiCS\Program.cs region=AddNewtonsoftJson}}
1. Set up the [ReportServiceConfiguration](/api/telerik.reporting.services.reportserviceconfiguration) by invoking the `AddTelerikReporting` extension method on the [IMvcBuilder](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.dependencyinjection.imvcbuilder) object. In the code below, the first argument will represent the [HostAppId](/api/telerik.reporting.services.reportserviceconfiguration#Telerik_Reporting_Services_ReportServiceConfiguration_HostAppId) of the [ReportServiceConfiguration](/api/telerik.reporting.services.reportserviceconfiguration) object, while the second is the path that will be passed to the [UriReportSourceResolver](/api/telerik.reporting.services.urireportsourceresolver):
- ````CSharp
-var reportsPath = Path.Combine(builder.Environment.ContentRootPath, "Reports");
-
- builder.Services.AddTelerikReporting("ReportingNet", reportsPath);
-````
-
+ {{source=CodeSnippets\AspNetCoreWebApiCS\Program.cs region=ReportServiceConfiguration Minimal API}}
1. Register the Telerik Reporting Minimal API by invoking the `UseTelerikReporting` extension method on the [WebApplication](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.builder.webapplication) object. The application must also enable the endpoint routing middleware added by the [UseRouting](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.builder.endpointroutingapplicationbuilderextensions.userouting) method:
- ````CSharp
-app.UseTelerikReporting();
-app.UseRouting();
-````
-
+ {{source=CodeSnippets\AspNetCoreWebApiCS\Program.cs region=UseReporting Minimal API}}
### Adding Connection Strings to the Configuration
@@ -100,45 +88,19 @@ The report generation engine can retrieve SQL Connection Strings and specific Re
The .NET applications use a [key-value JSON-based](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/configuration/) file named by default `appSettings.json`. The default `ReportingEngineConfiguration` will be initialized from `appSettings.json` or `appsettings.{EnvironmentName}.json`.
-All Reporting-related configurations should be placed in the JSON configuraion file - (add one in the project root if such does not exist). For example, the `ConnectionStrings` setting should be configured in JSON-based format like this:
+All Reporting-related configurations should be placed in the JSON configuration file - (add one in the project root if such does not exist). For example, the `ConnectionStrings` setting should be configured in JSON-based format like this:
-````JSON
-{
- "ConnectionStrings": {
- "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true"
- }
-}
-````
+{{source=CodeSnippets\AspNetCoreWebApiCS\appsettings.ConnectionString_0.json}}
The above type of connection string lacks information about the data provider and will use [System.Data.SqlClient](https://learn.microsoft.com/en-us/dotnet/api/system.data.sqlclient) as provider invariant name. When it's necessary to specify a different data provider, the following notation is also supported:
-````JSON
-{
- "ConnectionStrings": {
- "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": {
- "connectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true",
- "providerName": "System.Data.SqlClient"
- }
- }
-}
-````
+{{source=CodeSnippets\AspNetCoreWebApiCS\appsettings.ConnectionString_1.json}}
The two types of connection string notations specified above can coexist in a single ConnectionStrings section.
The last supported type of `ConnectionStrings` configuration uses an array to provide information about each connection string:
-````JSON
-{
- "ConnectionStrings": [
- {
- "name": "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString",
- "connectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true",
- "providerName": "System.Data.SqlClient"
- }
- ]
-}
-````
-
+{{source=CodeSnippets\AspNetCoreWebApiCS\appsettings.ConnectionString_2.json}}
### Test the Service Implementation
@@ -152,23 +114,11 @@ You may need to enable [Cross-Origin Resource Sharing (CORS)](https://developer.
Add the following service to the **Program.cs** file to add a new CORS policy for the REST Service:
-````CSharp
-builder.Services.AddCors(corsOption => corsOption.AddPolicy(
- "ReportingRestPolicy",
- corsBuilder =>
- {
- corsBuilder.AllowAnyOrigin()
- .AllowAnyMethod()
- .AllowAnyHeader();
- }
-));
-````
+{{source=CodeSnippets\AspNetCoreWebApiCS\Program.cs region=AddCors}}
Activate the above policy for the application by adding the code below in the application configuration part of the **Program.cs** file:
-````CSharp
-app.UseCors("ReportingRestPolicy");
-````
+{{source=CodeSnippets\AspNetCoreWebApiCS\Program.cs region=UseCors}}
## Demo project
diff --git a/embedding-reports/host-the-report-engine-remotely/asp.net-core-web-api-implementation/host-reports-service-in-.net-with-controllers.md b/embedding-reports/host-the-report-engine-remotely/asp.net-core-web-api-implementation/host-reports-service-in-.net-with-controllers.md
index c953b9059..22dcfaf88 100644
--- a/embedding-reports/host-the-report-engine-remotely/asp.net-core-web-api-implementation/host-reports-service-in-.net-with-controllers.md
+++ b/embedding-reports/host-the-report-engine-remotely/asp.net-core-web-api-implementation/host-reports-service-in-.net-with-controllers.md
@@ -1,17 +1,16 @@
---
-
title: Hosting in .NET with Controllers
page_title: Hosting the Reporting REST Service in ASP.NET Core with Controllers
-description: "Learn how to Host Telerik Reporting REST Service in ASP.NET Core in .NET 6 and above with Top-Level Statements and controller-based APIs in this step by step tutorial."
+description: "Learn how to host Telerik Reporting REST Service in ASP.NET Core in .NET 6 and above with Top-Level Statements and controller-based APIs in this step-by-step tutorial."
slug: telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/asp.net-core-web-api-implementation/host-reports-service-in-.net-with-controllers
-tags: how,to,host,reports,service,in,asp.net,core,in,.net,6,with,top-level,statements,and,controllers
+tags: host,service,asp.net,core,.net,top-level,statements,controllers
published: True
position: 3
---
# Hosting the Telerik Reporting REST Service in ASP.NET Core in .NET 6 and .NET 8 with Top-Level Statements
-This article guides you how to host a Reports Web Service in order to expose the Reports Generation Engine to an ASP.NET Core in .NET 6 and higher Web Application with Top-Level Statements implementation. Check the [Microsoft Tutorial: Explore ideas using top-level statements to build code as you learn](https://learn.microsoft.com/en-us/dotnet/csharp/whats-new/tutorials/top-level-statements) for general details on the approach.
+This article guides you on how to host a Reports Web Service to expose the Reports Generation Engine to an ASP.NET Core in .NET 6 and higher Web Application with Top-Level Statements implementation. Check the [Microsoft Tutorial: Explore ideas using top-level statements to build code as you learn](https://learn.microsoft.com/en-us/dotnet/csharp/whats-new/tutorials/top-level-statements) for general details on the approach.
The guide is separated into sections for readability reasons. Along with the steps, it elaborates on the concepts and theory behind each step.
@@ -22,11 +21,11 @@ The guide is separated into sections for readability reasons. Along with the ste
## Using the REST Service Project Template
-In Visual Studio open the __Add New Project__ dialog and select *Telerik Reporting REST Service* project template. After clicking `Create` a menu pops up that allows you to configure the following properties of the REST Service: target framework, service clients (report viewer and report designer), Cross-Origin Resource Sharing, Host Application ID, and Application URL.
+In Visual Studio, open the __Add New Project__ dialog and select *Telerik Reporting REST Service* project template. After clicking `Create`, a menu pops up that allows you to configure the following properties of the REST Service: target framework, service clients (report viewer and report designer), Cross-Origin Resource Sharing, Host Application ID, and Application URL.

-Set the Target Framework to .NET 6, .NET 8 or .NET 9.
+Set the Target Framework to .NET 6, .NET 8, or .NET 9.
Once you have configured the rest of the options to your liking, click `Finish` and a new project, containing all the necessary files and packages to host the Telerik Reporting REST service instance, will be added to your solution.
@@ -39,8 +38,8 @@ First, you need to create a new ASP.NET Core project:
1. Open __Visual Studio 2022__.
1. From the __File__ menu, select __New__ > __Project__.
1. In the __Create a new project__ dialog select __ASP.NET Core Web App__ project template and click __Next__.
-1. In the __Configure your new project__ dialog choose a name and location for the project and click __Next__.
-1. In the __Additional information__ dialog select from the drop down __.NET 6.0 (Long-term support)__ or .NET 8. If you configure the project for HTTPS make sure to have a proper certificate assigned. Click on __Create__.
+1. In the __Configure your new project__ dialog, choose a name and location for the project and click __Next__.
+1. In the __Additional information__ dialog select from the drop down __.NET 6.0 (Long-term support)__ or .NET 8. If you configure the project for HTTPS, make sure to have a proper certificate assigned. Click on __Create__.
### Add Report Definitions
@@ -48,20 +47,20 @@ In this tutorial, the resulting service will use the sample report definitions d
1. Find the sample reports in *{Telerik Reporting installation path}\Report Designer\Examples*.
1. Add a new folder to your solution called `Reports` and copy all sample reports into it.
-1. Later in the tutorial we will make sure that the ReportsController is able to resolve the definitions for the requested reports from this project folder.
+1. Later in the tutorial, we will make sure that the ReportsController can resolve the definitions for the requested reports from this project folder.
-> It is recommended to use declarative definitions (TRDP/TRDX/TRBP) authored using the [Standalone Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/standalone-report-designer/overview%}) or the [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) in order to take advantage of their design-time tooling because the VS integrated report designer tooling is still not available in .NET 6+ projects.
+> It is recommended to use declarative definitions (TRDP/TRDX/TRBP) authored using the [Standalone Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/desktop-designers/standalone-report-designer/overview%}) or the [Web Report Designer]({%slug telerikreporting/designing-reports/report-designer-tools/web-report-designer/overview%}) to take advantage of their design-time tooling because the VS integrated report designer tooling is still not available in .NET 6+ projects.
### Add the Required Dependencies
This guide applies the recommended NuGet package references approach to add the dependencies:
1. Reference the __Telerik.Reporting.Services.AspNetCore__ (or __Telerik.Reporting.Services.AspNetCore.Trial__) package.
-1. Optionally, to enable the Office OpenXML document formats (XLSX, DOCX and PPTX) as export options, reference the __Telerik.Reporting.OpenXmlRendering__ (or __Telerik.Reporting.OpenXmlRendering.Trial__) NuGet package.
+1. Optionally, to enable the Office OpenXML document formats (XLSX, DOCX, and PPTX) as export options, reference the __Telerik.Reporting.OpenXmlRendering__ (or __Telerik.Reporting.OpenXmlRendering.Trial__) NuGet package.
-> The recommended way of adding the necessary dependencies is to use the [Progress Telerik proprietary NuGet feed]({%slug telerikreporting/using-reports-in-applications/how-to-add-the-telerik-private-nuget-feed-to-visual-studio%}) and reference the dependencies as NuGet packages. This would also add the indirect dependencies to your project bringing easier dependency management.
-Alternatively, the assemblies are available in the `\Bin\net6.0\` and `\Bin\netstandard2.0\` folders of Telerik Reporting installation directory. However, this would require to manually add all indirect dependencies listed in [.NET Support - Requirements]({%slug telerikreporting/using-reports-in-applications/dot-net-core-support%}#requirements) section and also the following dependency package: [Microsoft.AspNetCore.Mvc.NewtonsoftJson version 5.0.0](https://www.nuget.org/packages/Microsoft.AspNetCore.Mvc.NewtonsoftJson/) and [DocumentFormat.OpenXML version 2.7.2.0 or above](https://www.nuget.org/packages/DocumentFormat.OpenXml/).
-Note that you need the last reference only to enable the Office OpenXML document formats. The Reporting engine relies on the [GDI+ API](https://learn.microsoft.com/en-us/windows/win32/gdiplus/-gdiplus-gdi-start) which is available on the Windows OS. On Linux and macOS we use the [SkiaSharp](https://github.com/mono/SkiaSharp) 2D Graphics Library based on Google's [Skia](https://skia.org/) Graphics Library.
+> The recommended way of adding the necessary dependencies is to use the [Progress Telerik proprietary NuGet feed]({%slug telerikreporting/using-reports-in-applications/how-to-add-the-telerik-private-nuget-feed-to-visual-studio%}) and reference the dependencies as NuGet packages. This would also add the indirect dependencies to your project, making dependency management easier.
+Alternatively, the assemblies are available in the `\Bin\net6.0\` and `\Bin\netstandard2.0\` folders of the Telerik Reporting installation directory. However, this would require manually adding all indirect dependencies listed in [.NET Support - Requirements]({%slug telerikreporting/using-reports-in-applications/dot-net-core-support%}#requirements) section and also the following dependency package: [Microsoft.AspNetCore.Mvc.NewtonsoftJson version 5.0.0](https://www.nuget.org/packages/Microsoft.AspNetCore.Mvc.NewtonsoftJson/) and [DocumentFormat.OpenXML version 2.7.2.0 or above](https://www.nuget.org/packages/DocumentFormat.OpenXml/).
+Note that you need the last reference only to enable the Office OpenXML document formats. The Reporting engine relies on the [GDI+ API](https://learn.microsoft.com/en-us/windows/win32/gdiplus/-gdiplus-gdi-start), which is available on the Windows OS. On Linux and macOS, we use the [SkiaSharp](https://github.com/mono/SkiaSharp) 2D Graphics Library based on Google's [Skia](https://skia.org/) Graphics Library.
### Setup the Program.cs file as a starting point of the Reporting REST Service Project with Top-Level Statements
@@ -69,148 +68,53 @@ Modify the `Program.cs` file in the project to enable the Reports Service functi
1. Make sure the application is configured for WebAPI controllers using the [AddControllers()](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.dependencyinjection.mvcservicecollectionextensions.addcontrollers) extension method and call the [AddNewtonsoftJson](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.dependencyinjection.newtonsoftjsonmvcbuilderextensions.addnewtonsoftjson) extension method on the [IMvcBuilder](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.dependencyinjection.imvcbuilder) object to enable the **NewtonsoftJson** serialization:
- ````CSharp
-builder.Services.AddControllers().AddNewtonsoftJson();
-````
-
+ {{source=CodeSnippets\AspNetCoreWebApiCS\Program.cs region=AddNewtonsoftJson}}
1. Add the dedicated [ReportServiceConfiguration](/api/telerik.reporting.services.reportserviceconfiguration) object needed from the Reports Service in the dependency container. Note how the report source resolver will target the `Reports` folder we created earlier.
- ````CSharp
-// Configure dependencies for ReportsController.
- builder.Services.TryAddSingleton(sp =>
- new ReportServiceConfiguration
- {
- // The default ReportingEngineConfiguration will be initialized from appsettings.json or appsettings.{EnvironmentName}.json:
- ReportingEngineConfiguration = sp.GetService(),
- // In case the ReportingEngineConfiguration needs to be loaded from a specific configuration file, use the approach below:
- //ReportingEngineConfiguration = ResolveSpecificReportingConfiguration(sp.GetService()),
- HostAppId = "ReportingNet6",
- Storage = new FileStorage(),
- ReportSourceResolver = new UriReportSourceResolver(System.IO.Path.Combine(sp.GetService().ContentRootPath, "Reports"))
- });
-````
-
+ {{source=CodeSnippets\AspNetCoreWebApiCS\Program.cs region=ReportServiceConfiguration Controllers}}
1. Make sure the endpoints are configured for API controllers by adding the following line in the lambda expression argument after the [UseRouting](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.builder.endpointroutingapplicationbuilderextensions.userouting) call:
- ````CSharp
-app.UseEndpoints(endpoints =>
- {
- endpoints.MapControllers();
- //...
- });
-````
-
+ {{source=CodeSnippets\AspNetCoreWebApiCS\Program.cs region=UseReporting Controllers}}
### Add Configuration Settings to the Program.cs file (Optional)
-The report generation engine can retrieve SQL Connection Strings and specific Report Generation Engine Settings that provide flexibility of the deployed application. It utilizes the [IConfiguration interface](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.configuration.iconfiguration?view=dotnet-plat-ext-6.0) for this purpose.
+The report generation engine can retrieve SQL Connection Strings and specific Report Generation Engine Settings that provide flexibility for the deployed application. It utilizes the [IConfiguration interface](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.configuration.iconfiguration?view=dotnet-plat-ext-6.0) for this purpose.
The .NET applications use a [key-value JSON-based](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/configuration/?view=aspnetcore-5.0) file named by default `appSettings.json`. The default ReportingEngineConfiguration:
-````CSharp
-ReportingEngineConfiguration = sp.GetService();
-````
+{{source=CodeSnippets\AspNetCoreWebApiCS\Program.cs region=Default Configuration Controllers}}
will be initialized from `appSettings.json` or `appsettings.{EnvironmentName}.json`.
To activate JSON file configuration with a different name, for example, `reportingAppSettings.json`, call the [AddJsonFile](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.configuration.jsonconfigurationextensions.addjsonfile?view=dotnet-plat-ext-7.0) extension method on an instance of [ConfigurationBuilder](https://learn.microsoft.com/en-us/dotnet/api/microsoft.extensions.configuration.configurationbuilder?view=dotnet-plat-ext-7.0).
-In this guide we will create a helper method loading the json-formatted setting:
-
-````CSharp
-static IConfiguration ResolveSpecificReportingConfiguration(IWebHostEnvironment environment)
-{
- // If a specific configuration needs to be passed to the reporting engine, add it through a new IConfiguration instance.
- var reportingConfigFileName = System.IO.Path.Combine(environment.ContentRootPath, "reportingAppSettings.json");
- return new ConfigurationBuilder()
- .AddJsonFile(reportingConfigFileName, true)
- .Build();
-}
-````
-
-Finally, all configurations should be placed in the JSON configuraion file (add one in the project root if such does not exist). For example, __ConnectionStrings__ setting should be configured in JSON-based format like this:
-
-````JSON
-{
- //...
- "ConnectionStrings": {
- "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true"
- }
-}
-````
-
-The above type of connection string lacks information about the data provider and will use *System.Data.SqlClient* as provider invariant name. When it's necessary to specify a different data provider, the following notation is also supported:
-
-````JSON
-{
- "ConnectionStrings": {
- "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString": {
- "connectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true",
- "providerName": "System.Data.SqlClient"
- }
- }
-}
-````
-
-The two types of connection string notations specified above can coexist in a single `ConnectionStrings` section.
-
-The last supported type of __ConnectionStrings__ configuration uses an array to provide information about each connection string:
-
-````JSON
-{
- //...
- "ConnectionStrings": [
- {
- "name": "Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString",
- "connectionString": "Data Source=.\\SQLEXPRESS;Initial Catalog=AdventureWorks;Integrated Security=true",
- "providerName": "System.Data.SqlClient"
- }
- ]
-}
-````
+In this guide, we will create a helper method to load the JSON-formatted setting:
+
+{{source=CodeSnippets\AspNetCoreWebApiCS\Program.cs region=Resolve Specific Reporting Configuration}}
+
+Finally, all configurations should be placed in the JSON configuration file (add one in the project root if such does not exist). For example, the `ConnectionStrings` setting should be configured in JSON-based format like this:
+
+{{source=CodeSnippets\AspNetCoreWebApiCS\appsettings.ConnectionString_0.json}}
+
+The above type of connection string lacks information about the data provider and will use [System.Data.SqlClient](https://learn.microsoft.com/en-us/dotnet/api/system.data.sqlclient) as provider invariant name. When it's necessary to specify a different data provider, the following notation is also supported:
+
+{{source=CodeSnippets\AspNetCoreWebApiCS\appsettings.ConnectionString_1.json}}
+
+The two types of connection string notations specified above can coexist in a single ConnectionStrings section.
+
+The last supported type of `ConnectionStrings` configuration uses an array to provide information about each connection string:
+
+{{source=CodeSnippets\AspNetCoreWebApiCS\appsettings.ConnectionString_2.json}}
### Setting up the Reporting REST service
-1. Create folder `Controllers`. Right-click on the project name and select __Add__ > __New folder__. Name it `Controllers`.
+1. Create a folder `Controllers`. Right-click on the project name and select __Add__ > __New folder__. Name it `Controllers`.
1. Implement a Reports controller. Right-click on the `Controllers` folder and add a new item: __Add__ > __New item__ > __API Controller - Empty__ item. Name it `ReportsController`. This will be our Telerik Reporting REST service in the project.
-1. Inherit the [ReportsControllerBase](/api/Telerik.Reporting.Services.WebApi.ReportsControllerBase) type and inject the configuration settings in the constructor. This is how a basic implementation of the controller should look like:
-
- ````CSharp
-namespace TopLevelStatements.Controllers
- {
- using System.Net;
- using System.Net.Mail;
- using Microsoft.AspNetCore.Mvc;
- using Telerik.Reporting.Services;
- using Telerik.Reporting.Services.AspNetCore;
-
- [Route("api/[controller]")]
- [ApiController]
- public class ReportsController : ReportsControllerBase
- {
- public ReportsController(IReportServiceConfiguration reportServiceConfiguration)
- : base(reportServiceConfiguration)
- {
- }
-
- protected override HttpStatusCode SendMailMessage(MailMessage mailMessage)
- {
- throw new System.NotImplementedException("This method should be implemented in order to send mail messages");
-
- // using (var smtpClient = new SmtpClient("smtp01.mycompany.com", 25))
- // {
- // smtpClient.DeliveryMethod = SmtpDeliveryMethod.Network;
- // smtpClient.EnableSsl = false;
- // smtpClient.Send(mailMessage);
- // }
- // return HttpStatusCode.OK;
- }
- }
- }
-````
+1. Inherit the [ReportsControllerBase](/api/Telerik.Reporting.Services.WebApi.ReportsControllerBase) type and inject the configuration settings in the constructor. This is how a basic implementation of the controller should look:
+ {{source=CodeSnippets\AspNetCoreWebApiCS\ReportsControllerTopLevelStatements.cs}}
### Test the service implementation
@@ -218,27 +122,15 @@ To ensure that the service operates, run the application and navigate to either
### Enable Cross-Origin Resource Sharing (CORS) (Optional)
-You may need to enable [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), for example, if you use the REST Service from clients hosted in different domains.
+You may need to enable [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), for example, if the Reporting REST Service is used from clients hosted in different domains.
-Add the following service to the *Program.cs* file to add a new CORS policy for the REST Service:
+Add the following service to the **Program.cs** file to add a new CORS policy for the REST Service:
-````CSharp
-builder.Services.AddCors(corsOption => corsOption.AddPolicy(
- "ReportingRestPolicy",
- corsBuilder =>
- {
- corsBuilder.AllowAnyOrigin()
- .AllowAnyMethod()
- .AllowAnyHeader();
- }
-));
-````
+{{source=CodeSnippets\AspNetCoreWebApiCS\Program.cs region=AddCors}}
-Activate the above policy for the application by adding the code below in the application configuration part of the `Program.cs` file:
+Activate the above policy for the application by adding the code below in the application configuration part of the **Program.cs** file:
-````CSharp
-app.UseCors("ReportingRestPolicy");
-````
+{{source=CodeSnippets\AspNetCoreWebApiCS\Program.cs region=UseCors}}
## Demo project
diff --git a/embedding-reports/host-the-report-engine-remotely/asp.net-core-web-api-implementation/overview.md b/embedding-reports/host-the-report-engine-remotely/asp.net-core-web-api-implementation/overview.md
index e33506abf..a35b5445f 100644
--- a/embedding-reports/host-the-report-engine-remotely/asp.net-core-web-api-implementation/overview.md
+++ b/embedding-reports/host-the-report-engine-remotely/asp.net-core-web-api-implementation/overview.md
@@ -17,16 +17,20 @@ This implementation of the Reporting REST service is based on the [ASP.NET Core
These are the options for the service hosting:
-* [Hosting Reports Service in ASP.NET Core in .NET 6 with Top Level Statements]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/asp.net-core-web-api-implementation/how-to-host-reports-service-in-asp.net-core-in-.net-6-with-minimal-api%})
-* [Hosting Reports Service in ASP.NET Core in .NET]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/asp.net-core-web-api-implementation/how-to-host-reports-service-in-asp.net-core-in-.net-5%})
+* [Hosting the Telerik Reporting REST Service in ASP.NET Core in .NET 6+ with Minimal API]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/asp.net-core-web-api-implementation/how-to-host-reports-service-in-asp.net-core-in-.net-6-with-minimal-api%})
+* [Hosting the Telerik Reporting REST Service in ASP.NET Core in .NET 6 and .NET 8 with Top-Level Statements]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/asp.net-core-web-api-implementation/host-reports-service-in-.net-with-controllers%})
+* [Hosting the Telerik Reporting REST Service in an ASP.NET Core Application in .NET 6, .NET 8, and .NET 9 with Startup.cs]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/asp.net-core-web-api-implementation/how-to-host-reports-service-in-asp.net-core-in-.net-5%})
The service can be used from:
-* [HTML5 Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/overview%})
+* [HTML5 Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/overview%})
+* [Native Blazor ReportViewer]({%slug telerikreporting/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/overview%})
+* [Blazor ReportViewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/blazor-report-viewer/overview%})
+* [Native Angular Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/native-angular-report-viewer/overview%})
* [Angular Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/angular-report-viewer/angular-report-viewer-overview%})
* [React Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/react-report-viewer/react-report-viewer-overview%})
-* [Blazor ReportViewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/blazor-report-viewer/overview%})
-* [Native Blazor ReportViewer]({%slug telerikreporting/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/overview%})
+* [HTML5 ASP.NET MVC Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-asp.net-mvc-report-viewer/overview%})
+* [HTML5 ASP.NET Web Forms Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-asp.net-web-forms-report-viewer/overview%})
* [Windows Forms ReportViewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/windows-forms-application/how-to-use-windows-forms-report-viewer-with-rest-service%})
* [WPF ReportViewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/wpf-application/how-to-use-wpf-report-viewer-with-rest-service%})
* Any custom client can utilize resources from the service by submitting HTTP requests - [REST API Reference]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/rest-api-reference/overview%}).
diff --git a/knowledge-base/creating-user-functions-in-vs-designer.md b/knowledge-base/creating-user-functions-in-vs-designer.md
index 4c1e377d6..180e23b8c 100644
--- a/knowledge-base/creating-user-functions-in-vs-designer.md
+++ b/knowledge-base/creating-user-functions-in-vs-designer.md
@@ -21,7 +21,7 @@ This tutorial shows how to create and utilize custom [user functions]({%slug tel
## Solution
-Let's start with creating a Class library (**.NET Framework**) project and add a **Report** class using the [Item Templates]({%slug treporting-integration-with-visual-studio%}) in Visual Studio.
+Let's start with creating a Class library (**.NET Framework**) project and add a **Report** class using the [Item Templates]({%slug reporting-integration-with-visual-studio%}) in Visual Studio.
### User Functions Defined in the Report class
@@ -88,5 +88,5 @@ The custom function accepts an image url and returns an Image object that can be
## See Also
-- [Visual Studio Templates]({%slug treporting-integration-with-visual-studio%})
+- [Visual Studio Templates]({%slug reporting-integration-with-visual-studio%})
- [Custom User Functions]({%slug telerikreporting/designing-reports/connecting-to-data/expressions/extending-expressions/user-functions%})
diff --git a/knowledge-base/using-objectdatasource-in-vs-designer.md b/knowledge-base/using-objectdatasource-in-vs-designer.md
index 9402b6f53..d072e1f03 100644
--- a/knowledge-base/using-objectdatasource-in-vs-designer.md
+++ b/knowledge-base/using-objectdatasource-in-vs-designer.md
@@ -2,7 +2,7 @@
title: Using the ObjectDataSource Component in Visual Studio Report Designer
description: Learn how to configure the ObjectDataSource Component in VS Report Designer.
type: how-to
-page_title: How Configure the ObjectDataSource Component in VS Report Designer
+page_title: How to Configure the ObjectDataSource Component in VS Report Designer
slug: using-objectdatasource-in-vs-designer
tags: reporting, object, data, source, objectdatasource, designer, vs, visual, studio, net, framework
res_type: kb
@@ -22,9 +22,9 @@ This tutorial shows how to configure and use the [ObjectDataSource]({%slug teler
1\. Let's start with creating a Class library (**.NET Framework**) project (e.g. CarsLibraryDemo) that will be used as a data collection for feeding the [ObjectDataSource]({%slug telerikreporting/designing-reports/connecting-to-data/data-source-components/objectdatasource-component/connecting-the-objectdatasource-component-to-a-data-source%}). Build the project to produce a dll in the bin folder.
-2\. Create another Class library (**.NET Framework**) project and add a **Report** class using the [Item Templates]({%slug treporting-integration-with-visual-studio%}) in Visual Studio. Add a reference to the Class Library project or to the dll which contains the data source definition.
+2\. Create another Class library (**.NET Framework**) project and add a **Report** class using the [Item Templates]({%slug reporting-integration-with-visual-studio%}) in Visual Studio. Add a reference to the Class Library project or to the dll that contains the data source definition.
-3\. Extend the Visual Studio Report Designer by adding an AssemblyReferences in Telerik.Reporting section of application configuration file. The **'devenv.exe.config'** file resides in *'C:\Program Files (x86)\Microsoft Visual Studio X.0\Common7\IDE'* by default (it is recommended to create a backup copy before modifying it).
+3\. Extend the Visual Studio Report Designer by adding an AssemblyReferences in Telerik.Reporting section of the application configuration file. The **'devenv.exe.config'** file resides in *'C:\Program Files (x86)\Microsoft Visual Studio X.0\Common7\IDE'* by default (it is recommended to create a backup copy before modifying it).
````XML
@@ -42,13 +42,13 @@ This tutorial shows how to configure and use the [ObjectDataSource]({%slug teler
````
->important Do not forget to close the Visual Studio instance before modifying its configuration file. Run `Notepad` (or other editing tool) as administrator to perform the changes.
+>important Do not forget to close the Visual Studio instance before modifying its configuration file. Run `Notepad` (or other editing tool) as an administrator to perform the changes.

## See Also
-- [Visual Studio Templates]({%slug treporting-integration-with-visual-studio%})
+- [Visual Studio Templates]({%slug reporting-integration-with-visual-studio%})
- [Connecting the ObjectDataSource component to a Data Source]({%slug telerikreporting/designing-reports/connecting-to-data/data-source-components/objectdatasource-component/connecting-the-objectdatasource-component-to-a-data-source%})
- [Binding ObjectDataSource Component to a BusinessObject]({%slug telerikreporting/designing-reports/connecting-to-data/data-source-components/objectdatasource-component/how-to/how-to-bind-to-a-businessobject%})