You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -26,193 +26,63 @@ Before you continue, make sure that the following prerequisites are met:
26
26
27
27
## Utilizing the HTML5 Report Viewer in an HTML page
28
28
29
-
The following steps produce an HTML page with settings similar to these of the local Html5Demo project installed by default under __[TelerikReporting_InstallDir]\Examples__:
29
+
The following steps produce an HTML page with settings similar to those of the local HTML5Demo project installed by default under __[TelerikReporting_InstallDir]\Examples__:
30
30
31
31
> 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.
>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.
47
38
48
39
1. Initialize the browser’s viewport in the `<head>` element:
>The report viewer JavaScript must be referenced after any other Kendo widgets or bundles.
80
60
81
61
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:
1. Add a `<div>` element to the `<body>` element that will serve as a placeholder for the viewer’s widget. The `<div>` 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):
1. Add the following script element at the bottom of the `<body>` element and create the HTML5 Report Viewer widget for the reportViewer1 `<div>` element that we just added:
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`.
151
74
152
75
>The viewer's __reportSource__ consists of report and parameters attributes, where __report__ is the string description of the report that will be displayed, and __parameters__ is a collection of parameter keys and values that will be sent to the report. The report's string description is handled on the server by the [report source resolver used in the Reporting REST service]({%slug telerikreporting/using-reports-in-applications/host-the-report-engine-remotely/telerik-reporting-rest-services/rest-service-report-source-resolver/overview%}). The above example uses the [assembly qualified name](https://learn.microsoft.com/en-us/dotnet/api/system.type.assemblyqualifiedname?view=net-7.0#System_Type_AssemblyQualifiedName) of a report's type (report created in Visual Studio Report Designer). This string description will be handled automatically by the [ReportTypeResolver](/api/Telerik.Reporting.Services.WebApi.ReportTypeResolver).
153
76
154
77
1. Make the viewer fill the entire browser window. Add the following style to the `<head>` element:
155
78
156
-
````HTML
157
-
<style>
158
-
#reportViewer1 {
159
-
position: absolute;
160
-
left: 5px;
161
-
right: 5px;
162
-
top: 5px;
163
-
bottom: 5px;
164
-
font-family: 'segoe ui', 'ms sans serif';
165
-
overflow: hidden;
166
-
}
167
-
</style>
168
-
````
169
-
170
-
>The above CSS rule will be applied on the `<div>` element holding the viewer object. The HTML elements building the viewer object will be sized based on the size of this container `<div>` element. To make the viewer fit in another container, use *position:relative* and provide width and height values.
1. The HTML page that we have just created should look like this:
81
+
>The above CSS rule will be applied to the `<div>` element holding the viewer object. The HTML elements building the viewer object will be sized based on the size of this container `<div>` element. To make the viewer fit in another container, use *position:relative* and provide width and height values.
0 commit comments