Skip to content

Commit 34e63b3

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent bb92196 commit 34e63b3

File tree

5 files changed

+294
-131
lines changed

5 files changed

+294
-131
lines changed

‎docs-aspnet/html-helpers/pdf/pdfviewer/events.md‎

Lines changed: 49 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,28 @@ For a complete example on basic PDFViewer events, refer to the [demo on using th
1616

1717
The following example demonstrates how to subscribe to events by a handler name.
1818

19+
{% if site.core %}
20+
```Program.cs
21+
builder.Services.AddKendo(x => x.RenderAsModule = true);
22+
```
23+
{% else %}
24+
```Global.asax
25+
KendoMvc.Setup(options =>
26+
{
27+
options.RenderAsModule = true;
28+
});
29+
```
30+
{% endif %}
1931
```HtmlHelper
2032
@using Kendo.Mvc.UI
2133
2234
<h4>PDFViewer</h4>
2335
<div>
24-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
36+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
37+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
38+
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
39+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
40+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></script>
2541
2642
<h4>PDFViewer</h4>
2743
<div>
@@ -61,39 +77,43 @@ The following example demonstrates how to subscribe to events by a handler name.
6177
```
6278
{% if site.core %}
6379
```TagHelper
64-
@addTagHelper *, Kendo.Mvc
65-
66-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
67-
68-
<div id="example">
69-
<kendo-pdfviewer name="pdfviewer"
70-
height="400"
71-
on-render="onRender"
72-
on-open="onOpen"
73-
on-error="onError">
74-
</kendo-pdfviewer>
75-
</div>
80+
@addTagHelper *, Kendo.Mvc
81+
82+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
83+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
84+
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
85+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
86+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></script>
87+
88+
<div id="example">
89+
<kendo-pdfviewer name="pdfviewer"
90+
height="400"
91+
on-render="onRender"
92+
on-open="onOpen"
93+
on-error="onError">
94+
</kendo-pdfviewer>
95+
</div>
7696
77-
<script>
78-
function onRender(e) {
79-
console.log("page rendered: " + e.page.pageNumber);
80-
}
97+
<script>
98+
function onRender(e) {
99+
console.log("page rendered: " + e.page.pageNumber);
100+
}
81101
82-
function onOpen(e) {
83-
console.log("file open: " + e.file.name);
84-
}
102+
function onOpen(e) {
103+
console.log("file open: " + e.file.name);
104+
}
85105
86-
function onError(e) {
87-
console.log("error message: " + e.message);
88-
}
89-
</script>
106+
function onError(e) {
107+
console.log("error message: " + e.message);
108+
}
109+
</script>
90110
91111
92-
<style>
93-
html body #pdfviewer {
94-
width: 100% !important;
95-
}
96-
</style>
112+
<style>
113+
html body #pdfviewer {
114+
width: 100% !important;
115+
}
116+
</style>
97117
98118
```
99119
{% endif %}

‎docs-aspnet/html-helpers/pdf/pdfviewer/getting-started.md‎

Lines changed: 94 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,25 @@ Optionally, you can structure the document by adding the desired HTML elements l
4141
```
4242
{% endif %}
4343

44-
## 2. Initialize the PDFViewer
44+
## 2. Enable the RenderAsModule option
45+
Enable the `RenderAsModule` option, which will add `type="module"` to the initialization scripts of all Telerik UI components in the application:
4546

46-
Load the `pdf.js` library and use the PDFViewer HtmlHelper {% if site.core %}or TagHelper{% endif %} to add the component to the view:
47+
{% if site.core %}
48+
```Program.cs
49+
builder.Services.AddKendo(x => x.RenderAsModule = true);
50+
```
51+
{% else %}
52+
```Global.asax
53+
KendoMvc.Setup(options =>
54+
{
55+
options.RenderAsModule = true;
56+
});
57+
```
58+
{% endif %}
59+
60+
## 3. Initialize the PDFViewer
61+
62+
Load the `pdf.js` library and use the PDFViewer HtmlHelper {% if site.core %}or TagHelper{% endif %} to add the component to the view. :
4763

4864
* The `Name()` configuration method is mandatory as its value is used for the `id` and the `name` attributes of the PDFViewer element.
4965
* The `Height()` configuration allows you to control the height of the component.
@@ -53,7 +69,11 @@ Load the `pdf.js` library and use the PDFViewer HtmlHelper {% if site.core %}or
5369
5470
<h4>PDFViewer</h4>
5571
<div>
56-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
72+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
73+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
74+
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
75+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
76+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></script>
5777
5878
<div>
5979
@(Html.Kendo().PDFViewer()
@@ -72,26 +92,30 @@ Load the `pdf.js` library and use the PDFViewer HtmlHelper {% if site.core %}or
7292
```
7393
{% if site.core %}
7494
```TagHelper
75-
@addTagHelper *, Kendo.Mvc
95+
@addTagHelper *, Kendo.Mvc
7696
77-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
97+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
98+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
99+
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
100+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
101+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></script>
78102
79-
<div id="example">
80-
<kendo-pdfviewer name="pdfviewer"
81-
height="400">
82-
</kendo-pdfviewer>
83-
</div>
103+
<div id="example">
104+
<kendo-pdfviewer name="pdfviewer"
105+
height="400">
106+
</kendo-pdfviewer>
107+
</div>
84108
85-
<style>
86-
html body #pdfviewer {
87-
width: 100% !important;
88-
}
89-
</style>
109+
<style>
110+
html body #pdfviewer {
111+
width: 100% !important;
112+
}
113+
</style>
90114
91115
```
92116
{% endif %}
93117

94-
## 3. Load an Initial PDF Document
118+
## 4. Load an Initial PDF Document
95119

96120
To load and visualize an initial PDF document, set the `PdfjsProcessing` configuration and specify the path to the PDF file.
97121

@@ -100,7 +124,11 @@ To load and visualize an initial PDF document, set the `PdfjsProcessing` configu
100124
101125
<h4>PDFViewer</h4>
102126
<div>
103-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
127+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
128+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
129+
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
130+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
131+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></script>
104132
105133
<div>
106134
@(Html.Kendo().PDFViewer()
@@ -120,27 +148,30 @@ To load and visualize an initial PDF document, set the `PdfjsProcessing` configu
120148
```
121149
{% if site.core %}
122150
```TagHelper
123-
@addTagHelper *, Kendo.Mvc
124-
125-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
126-
127-
<div id="example">
128-
<kendo-pdfviewer name="pdfviewer"
129-
height="400">
130-
<pdfjs-processing file="@Url.Content("~/shared/web/pdfViewer/sample.pdf")" />
131-
</kendo-pdfviewer>
132-
</div>
151+
@addTagHelper *, Kendo.Mvc
133152
134-
<style>
135-
html body #pdfviewer {
136-
width: 100% !important;
137-
}
138-
</style>
153+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
154+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
155+
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
156+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
157+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></script>
158+
159+
<div id="example">
160+
<kendo-pdfviewer name="pdfviewer"
161+
height="400">
162+
<pdfjs-processing file="@Url.Content("~/shared/web/pdfViewer/sample.pdf")" />
163+
</kendo-pdfviewer>
164+
</div>
139165
166+
<style>
167+
html body #pdfviewer {
168+
width: 100% !important;
169+
}
170+
</style>
140171
```
141172
{% endif %}
142173

143-
## 4. Handle a PDFViewer Event
174+
## 5. Handle a PDFViewer Event
144175

145176
The PDFViewer exposes various [events](/api/kendo.mvc.ui.fluent/pdfviewerbuilder) that you can handle and further customize the functionality of the component. In this example, you will use the `Open` event, which fires when a PDF is opened in the PDFViewer. As a result, the browser console will log a message when you open a PDF file.
146177

@@ -149,7 +180,11 @@ The PDFViewer exposes various [events](/api/kendo.mvc.ui.fluent/pdfviewerbuilder
149180
150181
<h4>PDFViewer</h4>
151182
<div>
152-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
183+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
184+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
185+
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
186+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
187+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></script>
153188
154189
<div>
155190
@(Html.Kendo().PDFViewer()
@@ -178,34 +213,38 @@ The PDFViewer exposes various [events](/api/kendo.mvc.ui.fluent/pdfviewerbuilder
178213
```
179214
{% if site.core %}
180215
```TagHelper
181-
@addTagHelper *, Kendo.Mvc
182-
183-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
216+
@addTagHelper *, Kendo.Mvc
184217
185-
<div id="example">
186-
<kendo-pdfviewer name="pdfviewer"
187-
<pdfjs-processing file="@Url.Content("~/shared/web/pdfViewer/sample.pdf")" />
188-
height="400"
189-
on-open="onOpen">
190-
</kendo-pdfviewer>
191-
</div>
218+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
219+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
220+
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
221+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
222+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></script>
223+
224+
<div id="example">
225+
<kendo-pdfviewer name="pdfviewer"
226+
<pdfjs-processing file="@Url.Content("~/shared/web/pdfViewer/sample.pdf")" />
227+
height="400"
228+
on-open="onOpen">
229+
</kendo-pdfviewer>
230+
</div>
192231
193-
<script>
194-
function onOpen(e) {
195-
console.log("file open: " + e.file.name);
196-
}
197-
</script>
232+
<script>
233+
function onOpen(e) {
234+
console.log("file open: " + e.file.name);
235+
}
236+
</script>
198237
199-
<style>
200-
html body #pdfviewer {
201-
width: 100% !important;
202-
}
203-
</style>
238+
<style>
239+
html body #pdfviewer {
240+
width: 100% !important;
241+
}
242+
</style>
204243
205244
```
206245
{% endif %}
207246

208-
## 5. (Optional) Reference Existing PDFViewer Instances
247+
## 6. (Optional) Reference Existing PDFViewer Instances
209248

210249
You can reference the PDFViewer instances that you have created and build on top of their existing configuration:
211250

‎docs-aspnet/html-helpers/pdf/pdfviewer/overview.md‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,27 @@ You can initialize the PDFViewer from HTML either by using [PDF.JS](#using-pdfjs
2727

2828
The following example demonstrates how to initialize the PDFViewer by using [PDF.JS](https://mozilla.github.io/pdf.js/).
2929

30+
{% if site.core %}
31+
```Program.cs
32+
builder.Services.AddKendo(x => x.RenderAsModule = true);
33+
```
34+
{% else %}
35+
```Global.asax
36+
KendoMvc.Setup(options =>
37+
{
38+
options.RenderAsModule = true;
39+
});
40+
```
41+
{% endif %}
3042
```HtmlHelper
31-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
32-
<script>
33-
window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
34-
</script>
43+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
44+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
45+
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
46+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
47+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></script>
3548
3649
@(Html.Kendo().PDFViewer()
37-
.Name("pdfviewer") // The name of the PDFViewer is mandatory. It specifies the "id" attribute of the widget.
50+
.Name("pdfviewer") // The name of the PDFViewer is mandatory. It specifies the "id" attribute of the component.
3851
.PdfjsProcessing(pdf => pdf
3952
.File(Url.Content("~/Content/web/pdfViewer/sample.pdf"))
4053
)
@@ -43,14 +56,14 @@ The following example demonstrates how to initialize the PDFViewer by using [PDF
4356
```
4457
{% if site.core %}
4558
```TagHelper
46-
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
47-
<script>
48-
window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
49-
</script>
50-
51-
<kendo-pdfviewer name="pdfviewer"
52-
height="1200">
53-
<pdfjs-processing file="@(Url.Content("~/shared/web/pdfViewer/sample.pdf"))" />
59+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
60+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
61+
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
62+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
63+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></script>
64+
65+
<kendo-pdfviewer name="pdfviewer" height="1200">
66+
<pdfjs-processing file="@Url.Content("~/Content/web/pdfViewer/sample.pdf")"/>
5467
</kendo-pdfviewer>
5568
```
5669
{% endif %}

0 commit comments

Comments
 (0)