8000 Update how-to-use-native-blazor-report-viewer.md · telerik/reporting-docs@c67da0e · GitHub
[go: up one dir, main page]
Skip to content

Commit c67da0e

Browse files
todorarabadzhievtodorarabadzhiev
authored
Update how-to-use-native-blazor-report-viewer.md
1 parent 392ee93 commit c67da0e

File tree

1 file changed

+8
-110
lines changed

1 file changed

+8
-110
lines changed

‎embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/how-to-use-native-blazor-report-viewer.md

Lines changed: 8 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ The following articles will guide you on [how to use the new Native Blazor Repor
2323

2424
The Native Blazor Report Viewer item template allows you to quickly and easily add the Native Blazor Report Viewer to your application.
2525

26-
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.
26+
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.
2727

2828
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.
2929

@@ -37,137 +37,35 @@ If you wish to connect the Report Viewer to a Report Server instance, refer to t
3737

3838
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:
3939

40-
````C#
41-
app.UseStaticFiles();
42-
````
40+
{{source=CodeSnippets\BlazorAppSnippets\Program.cs region=UseStaticFiles}}
4341

4442
>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.
4543

4644
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):
4745

48-
````HTML
49-
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
50-
@* Or this one if using the Telerik.UI.for.Blazor.Trial package *@
51-
@* <script src="_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js" defer></script> *@
52-
53-
<script src="_content/Telerik.ReportViewer.BlazorNative/js/reporting-blazor-viewer.js" defer></script>
54-
@* Or this one if using the Telerik.ReportViewer.BlazorNative.Trial package *@
55-
@* <script src="_content/Telerik.ReportViewer.BlazorNative.Trial/js/reporting-blazor-viewer.js" defer></script> *@
56-
57-
@* 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. *@
58-
@* 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. *@
59-
<link href="https://kendo.cdn.telerik.com/themes/8.2.1/utils/all.css" rel="stylesheet" />
60-
61-
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
62-
@* Or this one if using the Telerik.UI.for.Blazor.Trial package *@
63-
@* <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-default/all.css" /> *@
64-
65-
<link href="_content/Telerik.ReportViewer.BlazorNative/css/reporting-blazor-viewer.css" rel="stylesheet" />
66-
@* Or this one if using the Telerik.ReportViewer.BlazorNative.Trial package *@
67-
@* <link href="_content/Telerik.ReportViewer.BlazorNative.Trial/css/reporting-blazor-viewer.css" rel="stylesheet" /> *@
68-
````
69-
46+
{{source=CodeSnippets\BlazorAppSnippets\Components\Pages\Native_Layout.cshtml}}
7047

7148
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 __@@__:
7249

73-
````HTML
74-
<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/{{blazoruiversion}}/kendo-theme-default/all.css" />
75-
````
76-
50+
{{source=CodeSnippets\BlazorAppSnippets\Components\Pages\Native_AddTheme.cshtml}}
7751

7852
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__:
7953

80-
````C#
81-
@using Telerik.Blazor
82-
@using Telerik.Blazor.Components
83-
@using Telerik.ReportViewer.BlazorNative
84-
````
85-
54+
{{source=CodeSnippets\BlazorAppSnippets\Components\Native_Imports.razor}}
8655

8756
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__:
8857

89-
````HTML
90-
@inherits LayoutComponentBase
91-
92-
<TelerikRootComponent>
93-
@Body
94-
</TelerikRootComponent>
95-
````
96-
58+
9759

9860
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:
9961

100-
````CSHTML
101-
@page "/"
102-
@* For Blazor Web Apps, an interactive render mode should be used, for example: *@
103-
@* @rendermode InteractiveServer *@
104-
105-
<PageTitle>Report Viewer</PageTitle>
106-
107-
<ReportViewer
108-
ServiceType="@ReportViewerServiceType.REST"
109-
ServiceUrl="https://demos.telerik.com/reporting/api/reports"
110-
@bind-ReportSource="@ReportSource"
111-
@bind-ScaleMode="@ScaleMode"
112-
@bind-ViewMode="@ViewMode"
113-
@bind-ParametersAreaVisible="@ParametersAreaVisible"
114-
@bind-DocumentMapVisible="@DocumentMapVisible"
115-
@bind-Scale="@Scale">
116-
</ReportViewer>
117-
118-
@code {
119-
public ScaleMode ScaleMode { get; set; } = ScaleMode.Specific;
120-
public ViewMode ViewMode { get; set; } = ViewMode.Interactive;
121-
public bool ParametersAreaVisible { get; set; }
122-
public bool DocumentMapVisible { get; set; }
123-
public double Scale { get; set; } = 1.0;
124-
125-
public ReportSourceOptions ReportSource { get; set; } = new ReportSourceOptions("Report Catalog.trdx",
126-
new Dictionary<string, object>
127-
{
128-
// Add parameters if applicable
129-
});
130-
}
131-
````
62+
{{source=CodeSnippets\BlazorAppSnippets\Components\Pages\Native_Viewer_REST.razor}}
13263

13364
> 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<string, object>()))"` 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.
13465

13566
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:
13667

137-
````CSHTML
138-
@page "/"
139-
@* For Blazor Web Apps, an interactive render mode should be used, for example: *@
140-
@* @rendermode InteractiveServer *@
141-
142-
<PageTitle>Report Viewer</PageTitle>
143-
144-
<ReportViewer
145-
ServiceType="@ReportViewerServiceType.ReportServer"
146-
@bind-ReportSource="@ReportSource"
147-
@bind-ScaleMode="@ScaleMode"
148-
@bind-ViewMode="@ViewMode"
149-
@bind-ParametersAreaVisible="@ParametersAreaVisible"
150-
@bind-DocumentMapVisible="@DocumentMapVisible"
151-
@bind-Scale="@Scale">
152-
<ReportViewerSettings>
153-
<ReportServerSettings Url="https://demos.telerik.com/report-server/" Username="demouser" Password="demopass"></ReportServerSettings>
154-
</ReportViewerSettings>
155-
</ReportViewer>
156-
157-
@code {
158-
public ScaleMode ScaleMode { get; set; } = ScaleMode.Specific;
159-
public ViewMode ViewMode { get; set; } = ViewMode.Interactive;
160-
public bool ParametersAreaVisible { get; set; }
161-
public bool DocumentMapVisible { get; set; }
162-
public double Scale { get; set; } = 1.0;
163-
164-
public ReportSourceOptions ReportSource { get; set; } = new ReportSourceOptions("Published/Dashboard", new Dictionary<string, object>
165-
{
166-
// Add parameters if applicable
167-
});
168-
}
169-
````
170-
68+
{{source=CodeSnippets\BlazorAppSnippets\Components\Pages\Native_Viewer_ReportServer.razor}}
17169

17270
1. Use the rest of the parameters exposed on the Blazor viewer component to set up its appearance and behavior as desired.
17371
1. Finally, run the project to see the rendered report.

0 commit comments

Comments
 (0)
0