From a0cb7a92ef1c158b88d6532be64bca0c7a062160 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Wed, 23 Apr 2025 17:27:25 +0300 Subject: [PATCH 01/44] Update host-reports-service-in-.net-6-with-minimal-api.md --- ...orts-service-in-.net-6-with-minimal-api.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) 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..ee7d4dd9f 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,7 +23,7 @@ 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. ![REST Service Project Configuration page from the Visual Studio project template for adding Telerik Reporting REST Service](images/rest-service-project-configuration-menu-net6.png) @@ -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 @@ -100,7 +100,7 @@ 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 { From 9aea688eed2433bfeb790cc9b35218658a32a0f0 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Wed, 23 Apr 2025 17:40:18 +0300 Subject: [PATCH 02/44] Update host-reports-service-in-.net-6-with-minimal-api.md --- ...orts-service-in-.net-6-with-minimal-api.md | 36 +++++-------------- 1 file changed, 8 insertions(+), 28 deletions(-) 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 ee7d4dd9f..49188dd72 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 @@ -72,26 +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 @@ -123,6 +112,9 @@ The above type of connection string lacks information about the data provider an } ```` +__From appsettings.Development.json:__ +{{source=CodeSnippets\AspNetCoreWebApiCS\appsettings.Development.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: @@ -152,23 +144,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 From b2830f10d65372ce63d54398edd62821875440ef Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Wed, 23 Apr 2025 17:40:46 +0300 Subject: [PATCH 03/44] Update host-reports-service-in-.net-6-with-minimal-api.md --- .../host-reports-service-in-.net-6-with-minimal-api.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 49188dd72..329d5b221 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 @@ -112,7 +112,8 @@ The above type of connection string lacks information about the data provider an } ```` -__From appsettings.Development.json:__ +__From appsettings.Development.json:__ + {{source=CodeSnippets\AspNetCoreWebApiCS\appsettings.Development.json}} The two types of connection string notations specified above can coexist in a single ConnectionStrings section. From 9f397825eceedd68c8866b758c19d4a6666d9753 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Wed, 23 Apr 2025 18:04:50 +0300 Subject: [PATCH 04/44] Update creating-user-functions-in-vs-designer.md --- knowledge-base/creating-user-functions-in-vs-designer.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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%}) From 8d496ae097f2e0f4fd42cd2dc600d513ed032853 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Wed, 23 Apr 2025 18:07:57 +0300 Subject: [PATCH 05/44] Update using-objectdatasource-in-vs-designer.md --- .../using-objectdatasource-in-vs-designer.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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. ![ObjectDataSource from an External assembly](images/objectdatasource-populated-from-external-assembly-in-vs-designer.gif) ## 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%}) From 783c22a673f228448b108c679f22f6462fba4bce Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Wed, 23 Apr 2025 19:33:52 +0300 Subject: [PATCH 06/44] Update host-reports-service-in-.net-6-with-minimal-api.md --- ...st-reports-service-in-.net-6-with-minimal-api.md | 13 ------------- 1 file changed, 13 deletions(-) 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 329d5b221..0c070eefd 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 @@ -101,19 +101,6 @@ All Reporting-related configurations should be placed in the JSON configuration 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" - } - } -} -```` - -__From appsettings.Development.json:__ - {{source=CodeSnippets\AspNetCoreWebApiCS\appsettings.Development.json}} The two types of connection string notations specified above can coexist in a single ConnectionStrings section. From 2a8398aa1f1ce9659c6ea460254769497077714e Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Mon, 28 Apr 2025 17:25:52 +0300 Subject: [PATCH 07/44] Update host-reports-service-in-.net-6-with-minimal-api.md --- ...orts-service-in-.net-6-with-minimal-api.md | 25 +++---------------- 1 file changed, 4 insertions(+), 21 deletions(-) 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 0c070eefd..f97d171c4 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 @@ -23,7 +23,7 @@ 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. ![REST Service Project Configuration page from the Visual Studio project template for adding Telerik Reporting REST Service](images/rest-service-project-configuration-menu-net6.png) @@ -91,34 +91,17 @@ The .NET applications use a [key-value JSON-based](https://learn.microsoft.com/e 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: -{{source=CodeSnippets\AspNetCoreWebApiCS\appsettings.Development.json}} +{{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 From c22e052cced9608ec2ee7d2a53407dada01b1dcf Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Mon, 28 Apr 2025 18:49:15 +0300 Subject: [PATCH 08/44] Update host-reports-service-in-.net-5.md --- .../host-reports-service-in-.net-5.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) 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..a931f6d14 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 @@ -11,7 +11,7 @@ previous_url: /telerik-reporting-rest-service-aspnetcore-net5,/embedding-reports # 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 in order 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. ![REST Service Project Configuration page from the Visual Studio project template for adding Telerik Reporting REST Service](images/rest-service-project-configuration-menu-net5.png) -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,15 +60,15 @@ 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: @@ -100,7 +100,7 @@ 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 { From 32de7dd00cbe883a59d522099c087fb4454ce3e0 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Mon, 28 Apr 2025 19:10:11 +0300 Subject: [PATCH 09/44] Update host-reports-service-in-.net-5.md --- .../host-reports-service-in-.net-5.md | 67 +++---------------- 1 file changed, 8 insertions(+), 59 deletions(-) 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 a931f6d14..4df4a06c1 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 @@ -72,26 +72,15 @@ The [`ConfigureServices`](https://learn.microsoft.com/en-us/dotnet/api/microsoft 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 @@ -102,44 +91,17 @@ The .NET applications use a [key-value JSON-based](https://learn.microsoft.com/e 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 From c7f4d1a3aeab8ea7b1870169d477e2c2686ffc76 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Fri, 2 May 2025 16:41:49 +0300 Subject: [PATCH 10/44] Update overview.md --- .../overview.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) 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%}). From 05bc3e626f9d8de56f5225a2a82086681e496793 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Fri, 2 May 2025 16:53:37 +0300 Subject: [PATCH 11/44] Update host-reports-service-in-.net-5.md --- .../host-reports-service-in-.net-5.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 4df4a06c1..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 a .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%}). @@ -85,7 +85,7 @@ The [`ConfigureServices`](https://learn.microsoft.com/en-us/dotnet/api/microsoft ### 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`. From d852f172cc5ca9638655ee378d43a2a7a9aa69f9 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Fri, 2 May 2025 16:56:28 +0300 Subject: [PATCH 12/44] Update host-reports-service-in-.net-with-controllers.md --- ...eports-service-in-.net-with-controllers.md | 76 ++++++------------- 1 file changed, 24 insertions(+), 52 deletions(-) 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..e7b312b8c 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. ![REST Service Project Configuration page from the Visual Studio project template for adding Telerik Reporting REST Service](images/rest-service-project-configuration-menu-net6.png) -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 @@ -105,7 +104,7 @@ app.UseEndpoints(endpoints => ### 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: @@ -117,7 +116,7 @@ will be initialized from `appSettings.json` or `appsettings.{EnvironmentName}.js 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: +In this guide, we will create a helper method to load the JSON-formatted setting: ````CSharp static IConfiguration ResolveSpecificReportingConfiguration(IWebHostEnvironment environment) @@ -130,52 +129,25 @@ static IConfiguration ResolveSpecificReportingConfiguration(IWebHostEnvironment } ```` -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: +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: -````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* as provider invariant name. When it's necessary to specify a different data provider, the following notation is also supported: +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 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: +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}} ### 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: +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: ````CSharp namespace TopLevelStatements.Controllers From 493f150b9f327ada4405dc083b10aedc90942db0 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Fri, 2 May 2025 17:19:42 +0300 Subject: [PATCH 13/44] Update host-reports-service-in-.net-with-controllers.md --- ...eports-service-in-.net-with-controllers.md | 45 +++---------------- 1 file changed, 5 insertions(+), 40 deletions(-) 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 e7b312b8c..d00ab7593 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 @@ -68,39 +68,15 @@ 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) @@ -108,9 +84,7 @@ 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/?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`. @@ -118,16 +92,7 @@ To activate JSON file configuration with a different name, for example, `reporti In this guide, we will create a helper method to load 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(); -} -```` +{{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: From 8e6861a4e708842a662152b4c97d526aa352bd85 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Fri, 2 May 2025 17:20:39 +0300 Subject: [PATCH 14/44] Update host-reports-service-in-.net-6-with-minimal-api.md --- .../host-reports-service-in-.net-6-with-minimal-api.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 f97d171c4..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 @@ -27,7 +27,7 @@ In Visual Studio, open the __Add New Project__ dialog and select *Telerik Report ![REST Service Project Configuration page from the Visual Studio project template for adding Telerik Reporting REST Service](images/rest-service-project-configuration-menu-net6.png) -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. @@ -82,7 +82,6 @@ Modify the `Program.cs` file in the project to enable the Reports Service functi {{source=CodeSnippets\AspNetCoreWebApiCS\Program.cs region=UseReporting Minimal API}} - ### 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. From 7d1ba198e13ba48c286c055f2b5b084c9540a26f Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Fri, 2 May 2025 17:23:29 +0300 Subject: [PATCH 15/44] Update host-reports-service-in-.net-with-controllers.md --- ...eports-service-in-.net-with-controllers.md | 22 +++++-------------- 1 file changed, 5 insertions(+), 17 deletions(-) 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 d00ab7593..349f0d898 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 @@ -155,27 +155,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 From d07910f4e543b9d4493bd63bf791dc4b56bd5664 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Fri, 2 May 2025 17:27:22 +0300 Subject: [PATCH 16/44] Update host-reports-service-in-.net-with-controllers.md --- ...eports-service-in-.net-with-controllers.md | 35 +------------------ 1 file changed, 1 insertion(+), 34 deletions(-) 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 349f0d898..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 @@ -114,40 +114,7 @@ The last supported type of `ConnectionStrings` configuration uses an array to pr 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: - ````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; - } - } - } -```` - + {{source=CodeSnippets\AspNetCoreWebApiCS\ReportsControllerTopLevelStatements.cs}} ### Test the service implementation From 8535d72b204c780c2ddbd5b8add7eb38d1240663 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Thu, 8 May 2025 17:21:34 +0300 Subject: [PATCH 17/44] Update event-binding.md --- .../blazor-report-viewer/event-binding.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) 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..079b43263 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,10 +15,14 @@ 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: +__from CodeSnippets\BlazorAppSnippets\Components\Shared\_ViewerAddEvent.cshtml__ +{{source=CodeSnippets\BlazorAppSnippets\Components\Shared\_ViewerAddEvent.cshtml}} + +__current__ ````CSHTML window.trvEventHandlers = { From b025d41023c1a19d61247a329d7f5c149e8feb39 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Fri, 9 May 2025 15:37:51 +0300 Subject: [PATCH 18/44] Update event-binding.md --- .../blazor-report-viewer/event-binding.md | 27 ------------------- 1 file changed, 27 deletions(-) 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 079b43263..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 @@ -19,36 +19,9 @@ To attach an event handler to the viewer, specify the name of the event handler For example, we can attach handlers to the `ExportBegin` and `ExportEnd` events of the viewer: -__from CodeSnippets\BlazorAppSnippets\Components\Shared\_ViewerAddEvent.cshtml__ {{source=CodeSnippets\BlazorAppSnippets\Components\Shared\_ViewerAddEvent.cshtml}} -__current__ -````CSHTML - -```` - Then, we can create the event handler functions in the **wwwroot/index.html** (Blazor WebAssembly) or **Pages/\_Host.cshtml** (Blazor Server): -__from CodeSnippets\BlazorAppSnippets\Components\Shared\_EventsScirpts.cshtml__ {{source=CodeSnippets\BlazorAppSnippets\Components\Shared\_EventsScirpts.cshtml}} -__current__ -````HTML - -```` - From 3e33987de79a0b38b8322e54479429870e909c83 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Fri, 9 May 2025 15:47:12 +0300 Subject: [PATCH 19/44] Update how-to-create-a-custom-parameter-editor.md --- ...how-to-create-a-custom-parameter-editor.md | 64 +++---------------- 1 file changed, 9 insertions(+), 55 deletions(-) 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..8057ded9b 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 - Date: Fri, 9 May 2025 15:49:00 +0300 Subject: [PATCH 20/44] Update how-to-create-a-custom-parameter-editor.md --- .../how-to-create-a-custom-parameter-editor.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 8057ded9b..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 @@ -27,11 +27,11 @@ The following example uses the **Dashboard** example report that we ship with th - In **\_Host.cshtml** -{{source=CodeSnippets\BlazorAppSnippets\Components\Shared\_CustomParameterEditor_Host.cshtml}} + {{source=CodeSnippets\BlazorAppSnippets\Components\Shared\_CustomParameterEditor_Host.cshtml}} - Then in the Blazor Report Viewer Initialization: -{{source=CodeSnippets\BlazorAppSnippets\Components\Shared\_CustomParameterEditor_Viewer.cshtml}} + {{source=CodeSnippets\BlazorAppSnippets\Components\Shared\_CustomParameterEditor_Viewer.cshtml}} ## See Also From 5215f2b0a7abb2efa37f1849a15e827e8edea740 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Fri, 9 May 2025 15:52:13 +0300 Subject: [PATCH 21/44] Update how-to-use-blazor-report-viewer.md --- .../how-to-use-blazor-report-viewer.md | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-use-blazor-report-viewer.md b/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-use-blazor-report-viewer.md index 87ac0fea5..afd91e19b 100644 --- a/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-use-blazor-report-viewer.md +++ b/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-use-blazor-report-viewer.md @@ -3,7 +3,7 @@ title: Using the Blazor Report Viewer page_title: Integrating the Telerik Reporting Blazor Report Viewer description: "Learn how the Telerik Reporting Blazor Report Viewer can be integrated into a Blazor Server or Blazor WebAssembly application." slug: telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/blazor-report-viewer/how-to-use-blazor-report-viewer -tags: how,to,use,blazor,report,viewer +tags: blazor,report,viewer published: True position: 1 previous_url: /blazor-report-viewer-how-to-use @@ -16,18 +16,15 @@ previous_url: /blazor-report-viewer-how-to-use ## Prerequisites * [Visual Studio 2019, version 16.4 or later](https://visualstudio.microsoft.com/vs/) - * Existing .NET 6 and higher Blazor Server App or .NET 6 and higher hosted Blazor WebAssembly App - * The report viewer consumes reports generated and served from a running Telerik Reporting Web Service. Such can be referenced from another application or Telerik Report Server instance, or it can be hosted within the Blazor Server application. - -* Blazor WebAssembly applications are executed directly on the browser UI thread. In other words, Blazor WebAssembly is strictly a client-side application and the Reports Web Service cannot be hosted in the same project. When using Blazor WebAssembly, the Reports Web Service has to be hosted in a separate project or [Telerik Report Server](https://www.telerik.com/report-server) may be used. For more information, see [Blazor WebAssembly vs. Server](https://www.telerik.com/faqs/blazor-ui/what-is-the-difference-between-blazor-webassembly-vs-server). To host the Reporting Service locally, please follow the approach from either the [Hosting the Telerik Reporting REST Service in ASP.NET Core 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%}) or the [Hosting the Telerik Reporting REST Service in an ASP.NET Core Application 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%}) articles. +* Blazor WebAssembly applications are executed directly on the browser UI thread. In other words, Blazor WebAssembly is strictly a client-side application, and the Reports Web Service cannot be hosted in the same project. When using Blazor WebAssembly, the Reports Web Service has to be hosted in a separate project, or [Telerik Report Server](https://www.telerik.com/report-server) may be used. For more information, see [Blazor WebAssembly vs. Server](https://www.telerik.com/faqs/blazor-ui/what-is-the-difference-between-blazor-webassembly-vs-server). To host the Reporting Service locally, please follow the approach from either the [Hosting the Telerik Reporting REST Service in ASP.NET Core 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%}) or the [Hosting the Telerik Reporting REST Service in an ASP.NET Core Application 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%}) articles. ## Adding the Blazor Report Viewer component using an item template The Blazor Report Viewer item template allows you to quickly and easily [add the Blazor Report Viewer](https://www.telerik.com/blogs/telerik-reporting-modern-ui-report-viewer-demo) and [embed the Blazor Report Viewer](https://www.telerik.com/blogs/telerik-reporting-sdk-report-server-dynamic-duo) to your application. -If you wish to connect the Report Viewer to a Reporting REST service, 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. +If you wish to connect the Report Viewer to a Reporting REST service, 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 __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. >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,7 +33,7 @@ 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: @@ -56,7 +53,7 @@ app.UseStaticFiles(); ```` -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 @@ -79,9 +76,9 @@ app.UseStaticFiles(); ```` -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`. +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: + >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 "/" @@ -107,7 +104,7 @@ app.UseStaticFiles(); ```` -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: +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 "/" @@ -138,4 +135,5 @@ app.UseStaticFiles(); ## See Also + * [Blazor Integration with Telerik Reporting](https://docs.telerik.com/blazor-ui/integrations/reporting) documentation article. From 32d3c3f951a80d55f6ec2b6bb53fe1f58719176b Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Fri, 9 May 2025 15:57:25 +0300 Subject: [PATCH 22/44] Update how-to-use-blazor-report-viewer.md --- .../blazor-report-viewer/how-to-use-blazor-report-viewer.md | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-use-blazor-report-viewer.md b/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-use-blazor-report-viewer.md index afd91e19b..3d48d7589 100644 --- a/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-use-blazor-report-viewer.md +++ b/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-use-blazor-report-viewer.md @@ -37,10 +37,7 @@ If you wish to connect the Report Viewer to a Report Server instance, refer to t 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): From a4c1442485d766e0302970cd4dbcfe2a6f97ffac Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Fri, 9 May 2025 16:16:11 +0300 Subject: [PATCH 23/44] Update how-to-use-blazor-report-viewer.md --- .../how-to-use-blazor-report-viewer.md | 74 ++----------------- 1 file changed, 6 insertions(+), 68 deletions(-) diff --git a/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-use-blazor-report-viewer.md b/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-use-blazor-report-viewer.md index 3d48d7589..b5b110c86 100644 --- a/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-use-blazor-report-viewer.md +++ b/embedding-reports/display-reports-in-applications/web-application/blazor-report-viewer/how-to-use-blazor-report-viewer.md @@ -41,96 +41,34 @@ If you wish to connect the Report Viewer to a Report Server instance, refer to t 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 __@@__: - ````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 *@ - @**@ -```` - + {{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: - ````CSHTML -@page "/" - @* For Blazor Web Apps, an interactive render mode should be used, for example: *@ - @* @rendermode InteractiveServer *@ - @using Telerik.ReportViewer.Blazor - - -```` - + {{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: - ````CSHTML -@page "/" - @* For Blazor Web Apps, an interactive render mode should be used, for example: *@ - @* @rendermode InteractiveServer *@ - @using Telerik.ReportViewer.Blazor - - -```` - + {{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. From 0db56ac2c0cac84c34b3e2a7a97fea90eb969a9f Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Fri, 9 May 2025 16:36:31 +0300 Subject: [PATCH 24/44] Update methods-and-commands.md --- .../methods-and-commands.md | 29 ++++--------------- 1 file changed, 6 insertions(+), 23 deletions(-) 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 - - -... - Date: Tue, 13 May 2025 14:37:16 +0300 Subject: [PATCH 25/44] Update event-binding.md --- .../html5-report-viewer/event-binding.md | 48 +++---------------- 1 file changed, 7 insertions(+), 41 deletions(-) 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%}) From bf9862a316e9be1adf3c912b40003cce39bb88ab Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 14:41:00 +0300 Subject: [PATCH 26/44] Update how-to-use-html5-report-viewer-in-an-asp.net-core-in-.net-5-application.md --- ...ort-viewer-in-an-asp.net-core-in-.net-5-application.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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..1db32a49d 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. @@ -102,7 +102,7 @@ app.UseStaticFiles(); ## 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 From e371f693b23f2dd5ad0d5530bd4707c0c2f03fee Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 14:49:13 +0300 Subject: [PATCH 27/44] Update how-to-use-html5-report-viewer-in-an-asp.net-core-in-.net-5-application.md --- ...n-an-asp.net-core-in-.net-5-application.md | 54 +------------------ 1 file changed, 2 insertions(+), 52 deletions(-) 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 1db32a49d..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 @@ -41,61 +41,11 @@ 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. From aef1b58d602a2e56bcd0a88fe11880c2f2253211 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 15:00:18 +0300 Subject: [PATCH 28/44] Update how-to-use-html5-report-viewer-with-report-server.md --- ...-html5-report-viewer-with-report-server.md | 57 +++---------------- 1 file changed, 9 insertions(+), 48 deletions(-) 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 From ec802ffd939e49d16e20778fea354086cb905284 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 15:02:48 +0300 Subject: [PATCH 29/44] Update how-to-use-html5-report-viewer-with-rest-service.md --- .../how-to-use-html5-report-viewer-with-rest-service.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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). ![The Visual Studio item template Add new Report Viewer on the page Configure report source with selected BarcodesReport.cs CLR existing report definition](images/item-template-report-source-rest.png) From 4d4d19b145a06e34c277152f807b41c1d9158272 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 15:07:08 +0300 Subject: [PATCH 30/44] Update printing-reports.md --- .../html5-report-viewer/printing-reports.md | 23 ++++--------------- 1 file changed, 5 insertions(+), 18 deletions(-) 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 From af586fd9f844a7b7623ccf30b0b7e62ee51711c8 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 15:26:20 +0300 Subject: [PATCH 31/44] Update Html5Viewer main articles --- .../html5-report-viewer/manual-setup.md | 156 ++---------------- 1 file changed, 13 insertions(+), 143 deletions(-) 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. From 5532aab6f76c878eadf754f86fcead093ec9c663 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 15:48:05 +0300 Subject: [PATCH 32/44] Update localization.md --- .../customizing/localization.md | 175 +----------------- 1 file changed, 3 insertions(+), 172 deletions(-) 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..30ca83f62 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\manual-setup\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\manual-setup\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%}). From eefcd4285f83f8b11c84645f65ecdc860e6c5126 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 15:53:33 +0300 Subject: [PATCH 33/44] Update how-to-pass-values-to-report-parameters.md --- ...how-to-pass-values-to-report-parameters.md | 44 +++++-------------- 1 file changed, 10 insertions(+), 34 deletions(-) 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..e8adfbe02 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,42 +11,18 @@ 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\manual-setup\customize\AddRequiredSriptsAndStyles.html}} 1. Add the custom parameter UI - a dropdown selector with a few values: @@ -71,7 +47,7 @@ To give an example we will use the Invoice report from our examples and will upd ```` -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: +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 () { @@ -98,7 +74,7 @@ $('#invoiceId').change(function () { report: viewer.reportSource().report, parameters: { OrderNumber: $(this).val() } }); - //setting the HTML5 Viewer's reportSource causes a refresh automatically + //Setting the HTML5 Viewer's reportSource causes a refresh automatically //if you need to force a refresh for other cases, use: //viewer.refreshReport(); }); @@ -158,7 +134,7 @@ $('#invoiceId').change(function () { report: viewer.reportSource().report, parameters: { OrderNumber: $(this).val() } }); - //setting the HTML5 Viewer's reportSource, causes a refresh automatically + //Setting the HTML5 Viewer's reportSource causes a refresh automatically //if you need to force a refresh for other cases, use: //viewer.refreshReport(); }); From 239aa9f7b2296f9e102d4149489b1bfbfa284cae Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 15:54:15 +0300 Subject: [PATCH 34/44] Update localization.md --- .../html5-report-viewer/customizing/localization.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 30ca83f62..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 @@ -17,13 +17,13 @@ The article elaborates on how to localize the messages displayed by the HTML5 Re {{source=CodeSnippets\js\telerikReportViewer.stringResources}} - {{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\HardCodedStringResources.js}} + {{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: - {{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\AddTranslatedStringResources.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%}). From 9128907408707c0c58f1ec54e9a88db6375c18f7 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 16:03:51 +0300 Subject: [PATCH 35/44] Update how-to-pass-values-to-report-parameters.md --- ...how-to-pass-values-to-report-parameters.md | 112 +----------------- 1 file changed, 6 insertions(+), 106 deletions(-) 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 e8adfbe02..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 @@ -22,127 +22,27 @@ To give an example, we will use the Invoice report from our examples and will up 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: - {{source=CodeSnippets\BlazorAppSnippets\wwwroot\manual-setup\customize\AddRequiredSriptsAndStyles.html}} + {{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\customize\AddCustomDropDown.html}} 1. Add the ReportViewer placeholder - ````HTML -
- loading... -
-```` - + {{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(); - } - }); - }); -```` - + {{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. From a68e70d2e3d925810d5c1c681be987106cbfc2eb Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 16:09:25 +0300 Subject: [PATCH 36/44] Update how-to-create-a-custom-parameter-editor.md --- ...how-to-create-a-custom-parameter-editor.md | 82 ++----------------- 1 file changed, 9 insertions(+), 73 deletions(-) diff --git a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/how-to-create-a-custom-parameter-editor.md b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/how-to-create-a-custom-parameter-editor.md index 146c04399..e87434170 100644 --- a/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/how-to-create-a-custom-parameter-editor.md +++ b/embedding-reports/display-reports-in-applications/web-application/html5-report-viewer/customizing/how-to-create-a-custom-parameter-editor.md @@ -1,9 +1,9 @@ --- title: Custom Parameter Editors page_title: Creating and Using Custom Parameter Editors in HTML5 ReportViewer -description: "Learn How to Create and use Custom Parameter Editors in the HTML5 ReportViewer in Telerik Reporting." +description: "Learn how to create and use Custom Parameter Editors in the HTML5 ReportViewer in Telerik Reporting." slug: telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/customizing/how-to-create-a-custom-parameter-editor -tags: how,create,custom,parameter,editor +tags: create,custom,parameter,editor published: True position: 3 previous_url: /html5-report-viewer-howto-custom-parameter-editor @@ -13,85 +13,21 @@ previous_url: /html5-report-viewer-howto-custom-parameter-editor The article elaborates on how to change the default editors for visible parameters in the HTML5 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 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. +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 passed as an option when creating the report viewer widget. Each object represents a parameter editor factory for creating editors suitable for editing a specific report parameter configuration. -Each editor is an object which contains two methods: `match` and `createEditor`. +Each editor is an object that contains two methods: `match` and `createEditor`. -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 return 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 return result is a new object containing the `beginEdit` method, which is the entry point for creating the editor from the viewer. -The following example illustrates how to use the Kendo DropDownList widget for a single parameter value parameter editor which also has available values: +The following example illustrates how to use the Kendo DropDownList widget for a single parameter value parameter editor, which also has available values: -````JavaScript -{ - match: function (parameter) { - // Here you can use all of the parameter properties to - // create a more specific editor - return Boolean(parameter.availableValues) && !parameter.multivalue; - }, - createEditor: function (placeholder, options) { - var dropDownElement = $(placeholder).html('
'); - 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. From 4b771ff0e8c1e2958385ed9bd71dc36fec89b73a Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 16:35:34 +0300 Subject: [PATCH 37/44] Update overview.md --- .../styling-and-appearance/overview.md | 50 +++---------------- 1 file changed, 8 insertions(+), 42 deletions(-) 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 From e6d71a1897d4a5eee3bc1a37465603944beb0b8f Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 16:38:09 +0300 Subject: [PATCH 38/44] Update providing-custom-templates.md --- .../styling-and-appearance/providing-custom-templates.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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..cedf6d727 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,9 +13,9 @@ 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). +> 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: +If you have a custom HTML template, you should provide it to the `telerik_ReportViewer` plugin’s options: ````JavaScript $("#reportViewer1").telerik_ReportViewer({ @@ -25,7 +25,7 @@ $("#reportViewer1").telerik_ReportViewer({ }); ```` -The HTML template file is an HTML page while the templates are HTML document fragments inside HTML5 __template__ elements: +The HTML template file is an HTML page, while the templates are HTML document fragments inside HTML5 __template__ elements: ````HTML @@ -43,7 +43,7 @@ The HTML template file is an HTML page while the templates are HTML document fra ```` -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: +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({ From e8c143dd17f07209d37bbdb2eee7fb6c89dbca11 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 16:44:26 +0300 Subject: [PATCH 39/44] Update providing-custom-templates.md --- .../providing-custom-templates.md | 36 ++----------------- 1 file changed, 3 insertions(+), 33 deletions(-) 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 cedf6d727..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 @@ -17,45 +17,15 @@ The article elaborates on how to use a customized HTML template for the HTML5 Re 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" } -}); -```` +{{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: -````HTML - - - - Telerik HTML5 Report Viewer Templates - - - - - -```` +{{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: -````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 - } -}); -```` - +{{source=CodeSnippets\BlazorAppSnippets\wwwroot\customize\AddTemplateAndReadyEvent.html}} ## See Also From fed555fdb7a5cc51c0411f183d3677e54d2f4188 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 16:47:45 +0300 Subject: [PATCH 40/44] Update templates-overview.md --- .../styling-and-appearance/templates-overview.md | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) 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. From 224e7177d5726050a6eb26b1a3b9c3fd26c1e413 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 16:48:37 +0300 Subject: [PATCH 41/44] Update templates-structure.md --- .../styling-and-appearance/templates-structure.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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; From 392ee93ed898e66d4f8d9a60cf3bc81ace41a878 Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 17:36:14 +0300 Subject: [PATCH 42/44] Update how-to-use-native-blazor-report-viewer.md --- .../how-to-use-native-blazor-report-viewer.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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..2e1aba55d 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 @@ -33,9 +33,9 @@ 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(); @@ -68,7 +68,7 @@ app.UseStaticFiles(); ```` -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 __@@__: +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 @@ -95,7 +95,7 @@ app.UseStaticFiles(); ```` -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: +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 "/" @@ -132,7 +132,7 @@ app.UseStaticFiles(); > 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: +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 "/" From c67da0ec89e46f3e760c303d92d2bf84bfd4b86c Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 18:11:09 +0300 Subject: [PATCH 43/44] Update how-to-use-native-blazor-report-viewer.md --- .../how-to-use-native-blazor-report-viewer.md | 118 ++---------------- 1 file changed, 8 insertions(+), 110 deletions(-) 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 2e1aba55d..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. @@ -37,137 +37,35 @@ If you wish to connect the Report Viewer to a Report Server instance, refer to t 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 *@ - @* *@ - - - @* 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 *@ - @* *@ -```` - + {{source=CodeSnippets\BlazorAppSnippets\Components\Pages\Native_Layout.cshtml}} 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 - -```` - + {{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 - }); - } -```` + {{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 - }); - } -```` - + {{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. From a7b9b077801140e9d604e2d92caa31e751928e4a Mon Sep 17 00:00:00 2001 From: Todor Arabadzhiev Date: Tue, 13 May 2025 18:20:56 +0300 Subject: [PATCH 44/44] Update send-mail-message.md --- .../send-mail-message.md | 34 ++++--------------- 1 file changed, 7 insertions(+), 27 deletions(-) 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. ![Send Email Message Dialog that pops up after clicking on the Send Email button](../images/NativeBlazorReportViewer/BlazorNativeSendMail.png) ## 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