Skip to content

Commit 809d85c

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 8030dcd commit 809d85c

File tree

4 files changed

+311
-0
lines changed

4 files changed

+311
-0
lines changed

‎docs-aspnet/knowledge-base/images/pdfviewer-kendo-module-error.png‎

86.2 KB
Loading

‎docs-aspnet/knowledge-base/images/pdfviewer-pdfjs-error.png‎

31.2 KB
Loading

‎docs-aspnet/knowledge-base/pdfviewer-pdfjs-script-workarounds.md‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
---
2+
title: Using PDFViewer with PDF.js Version 4.x.x or Later
3+
description: Learn how to configure the Telerik UI for {{ site.framework }} PDFViewer to use PDF.js version 4.x.x for PDF processing.
4+
type: how-to
5+
page_title: Configuring the PDFViewer component to use PDF.js version 4.x.x
6+
slug: pdfviewer-pdfjs-script-workarounds
7+
tags: pdfviewer, pdf.js, version, 4.x.x, processing, script
8+
res_type: kb
9+
---
10+
11+
## Environment
12+
<table>
13+
<tbody>
14+
<tr>
15+
<td>Product Version</td>
16+
<td>2024.4.1112 or later</td>
17+
</tr>
18+
<tr>
19+
<td>Product</td>
20+
<td>PDFViewer for Progress® Telerik® {{ site.product_short }}</td>
21+
</tr>
22+
</tbody>
23+
</table>
24+
25+
## Description
26+
The {% if site.core %}<a href="https://www.telerik.com/support/whats-new/aspnet-core-ui/release-history/telerik-ui-for-asp-net-core-2024-4-1112-(2024-q4)" target="_blank">2024 Q4 November release (version 2024.4.1112)</a>{% else%}<a href="https://www.telerik.com/support/whats-new/aspnet-mvc/release-history/telerik-ui-for-asp-net-mvc-2024-4-1112-(2024-q4)" target="_blank">2024 Q4 November release (version 2024.4.1112)</a>{% endif %} introduced a new common engine for the PDFViewer component and support for the latest <a href="https://mozilla.github.io/pdf.js/" target="_blank">PDF.js library version 4. x.x</a>. Since PDF.js 4 (versions 4.x.x) uses <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules" target="_blank">ECMAScript modules</a>, the required Kendo UI scripts must be included as modules as well.
27+
28+
The {{ site.product }} versions before 2024.4.1112 are not compatible with PDF.js version 4.x. You must use either PDF.js version 2.x or 3.x. For reference, the example below shows the PDFViewer configured for PDF.js processing when using versions before 2024.4.1112.
29+
30+
```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>
35+
36+
@(Html.Kendo().PDFViewer()
37+
.Name("pdfviewer")
38+
.PdfjsProcessing(pdf => pdf
39+
.File("")
40+
)
41+
.Height(1200)
42+
)
43+
```
44+
{% if site.core %}
45+
```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" height="1200">
52+
<pdfjs-processing file="@Url.Content("")" />
53+
</kendo-pdfviewer>
54+
```
55+
{% endif %}
56+
57+
When upgrading to version 2024.4.1112 or later, including the [required Kendo UI scripts]({% slug copyclientresources_aspnetmvc6_aspnetmvc%}) by adding `type="module"` in the script tags will throw the following client-side error:
58+
![Kendo script, defined as a module, is not defined when the PDFViewer is initialized.](images/pdfviewer-kendo-module-error.png)
59+
60+
However, adding the scripts without `type="module"` is also not an option because the PDF.js library requires module scripts:
61+
![PDF.js scripts are not added](images/pdfviewer-pdfjs-error.png)
62+
63+
## Solution
64+
65+
Apply any of the following approaches when using {{ site.product }} PDFViewer (version 2024.4.1112 or later):
66+
67+
- [Loading Kendo UI scripts twice](#loading-kendo-ui-scripts-twice)
68+
- [Loading only the required PDFViewer scripts](#loading-only-the-required-pdfviewer-scripts)
69+
- [Using RenderAsModule option for module-based script initialization](#using-renderasmodule-for-module-based-script-initialization)
70+
- [Compiling the PDF.js scripts to UMD modules](#compiling-pdfjs-scripts-to-umd-modules)
71+
72+
### Loading Kendo UI Scripts Twice
73+
74+
The easiest workaround is to include the Kendo UI scripts twice—with and without `type="module"`:
75+
76+
```HtmlHelper
77+
<link href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
78+
79+
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
80+
81+
<!-- Add the Kendo UI scripts in standard fashion. -->
82+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js"></script>
83+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js"></script>
84+
85+
<!-- Add the "pdf.mjs" and "pdf.worker.mjs" module scripts. -->
86+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
87+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
88+
89+
<!-- Add the Kendo UI script as a module afterwards -->
90+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
91+
92+
@(Html.Kendo().PDFViewer().Name("pdfviewer")
93+
.PdfjsProcessing(pdf => pdf.File(@Url.Content("../sample.pdf")))
94+
.Height(1200)
95+
)
96+
@(Html.Kendo().DateTimePicker().Name("picker"))
97+
```
98+
{% if site.core %}
99+
```TagHelper
100+
<link href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
101+
102+
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
103+
104+
<!-- Add the Kendo UI scripts in standard fashion. -->
105+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js"></script>
106+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js"></script>
107+
108+
<!-- Add the "pdf.mjs" and "pdf.worker.mjs" module scripts. -->
109+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
110+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
111+
112+
<!-- Add the Kendo UI script as a module afterwards -->
113+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
114+
115+
<kendo-pdfviewer name="pdfviewer" height="1200">
116+
<pdfjs-processing file-url="@Url.Content("../sample.pdf")" />
117+
</kendo-pdfviewer>
118+
119+
<kendo-datetimepicker name="picker"/>
120+
```
121+
{% endif %}
122+
123+
### Loading Only the Required PDFViewer Scripts
124+
125+
Instead of loading the whole "kendo.all.min.js" script file twice, you can include only the specific PDFViewer scripts. Also, you can load the scripts and the PDFViewer declaration through a Partial View:
126+
127+
```_Layout
128+
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css">
129+
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
130+
<script src="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.all.min.js"></script>
131+
<script src="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.aspnetmvc.min.js"></script>
132+
133+
<partial name="PDFViewer" />
134+
```
135+
```HtmlHelper
136+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
137+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
138+
<script src="https://kendo.cdn.telerik.com/2024.4.1112/mjs/kendo.pdfviewer-common.cmn.chunk.js" type="module"></script>
139+
<script src="https://kendo.cdn.telerik.com/2024.4.1112/mjs/kendo.pdfviewer.js" type="module"></script>
140+
141+
@(Html.Kendo().PDFViewer()
142+
.Name("pdfviewer")
143+
.PdfjsProcessing(pdf => pdf.File(""))
144+
.Height(1200)
145+
)
146+
```
147+
{% if site.core %}
148+
```TagHelper
149+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
150+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
151+
<script src="https://kendo.cdn.telerik.com/2024.4.1112/mjs/kendo.pdfviewer-common.cmn.chunk.js" type="module"></script>
152+
<script src="https://kendo.cdn.telerik.com/2024.4.1112/mjs/kendo.pdfviewer.js" type="module"></script>
153+
154+
<kendo-pdfviewer name="pdfviewer1" height="1200">
155+
<pdfjs-processing />
156+
</kendo-pdfviewer>
157+
```
158+
{% endif %}
159+
160+
### Using RenderAsModule for Module-Based Script Initialization
161+
162+
Another solution is to include the required Kendo UI scripts as modules and enable the `RenderAsModule` option, which will add `type="module"` to the initialization scripts of all Telerik UI components in the application.
163+
164+
Also, it is important to ensure that `type="module"` is added to all script tags that contain custom logic related to the Telerik UI components.
165+
166+
{% if site.core %}
167+
```Program.cs
168+
builder.Services.AddKendo(x => x.RenderAsModule = true);
169+
```
170+
{% else %}
171+
```Global.asax
172+
KendoMvc.Setup(options =>
173+
{
174+
options.RenderAsModule = true;
175+
});
176+
```
177+
{% endif %}
178+
```_Layout
179+
<link href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
180+
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
181+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.mjs" type="module"></script>
182+
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.8.69/pdf.worker.mjs" type="module"></script>
183+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.all.min.js" type="module"></script>
184+
<script src="https://cdn.kendostatic.com/2024.4.1112/js/kendo.aspnetmvc.min.js" type="module"></script>
185+
```
186+
```HtmlHelper
187+
@(Html.Kendo().PDFViewer()
188+
.Name("pdfviewer")
189+
.PdfjsProcessing(pdf => pdf.File(""))
190+
.Height(800)
191+
)
192+
193+
<script type="module">
194+
$(document).ready(() => {
195+
var pdfviewer = $('#pdfviewer').data('kendoPdfViewer');
196+
console.log(pdfviewer);
197+
})
198+
</script>
199+
```
200+
{% if site.core %}
201+
```TagHelper
202+
<kendo-pdfviewer name="pdfviewer" height="800">
203+
<pdfjs-processing file="@Url.Content("")" />
204+
</kendo-pdfviewer>
205+
206+
<script type="module">
207+
$(document).ready(() => {
208+
var pdfviewer = $('#pdfviewer').data('kendoPdfViewer');
209+
console.log(pdfviewer);
210+
})
211+
</script>
212+
```
213+
{% endif %}
214+
215+
216+
### Compiling PDF.js Scripts to UMD Modules
217+
218+
Theoretically, you can download the PDF.js scripts and use a JS bundler tool like [webpack](https://webpack.js.org/) to compile them to UMD modules.
219+
220+
## More {{ site.framework }} PDFViewer Resources
221+
222+
* [{{ site.framework }} PDFViewer Documentation]({%slug htmlhelpers_pdfviewer_aspnetcore%})
223+
224+
* [{{ site.framework }} PDFViewer Demos](https://demos.telerik.com/{{ site.platform }}/pdfviewer/index)
225+
226+
{% if site.core %}
227+
* [{{ site.framework }} PDFViewer Product Page](https://www.telerik.com/aspnet-core-ui/pdf-viewer)
228+
229+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
230+
231+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
232+
233+
{% else %}
234+
* [{{ site.framework }} PDFViewer Product Page](https://www.telerik.com/aspnet-mvc/pdf-viewer)
235+
236+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
237+
238+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
239+
{% endif %}
240+
241+
## See Also
242+
243+
* [Client-Side API Reference of the PDFViewer for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/ui/pdfviewer)
244+
* [Server-Side API Reference of the PDFViewer for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/pdfviewer)
245+
{% if site.core %}
246+
* [Server-Side TagHelper API Reference of the PDFViewer for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/taghelpers/pdfviewer)
247+
{% endif %}
248+
* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
249+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

‎docs/knowledge-base/how-to-set-default-filter-operator-kendo-ui-grid.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
title: Setting a Default Filter Operator in Kendo UI for jQuery Grid with Column Menu
3+
description: Learn how to set a default filter operator for columns in the Kendo UI for jQuery Grid when using the column menu filter mode.
4+
type: how-to
5+
page_title: How to Set Default Filter Operator for Kendo UI for jQuery Grid Column Menu
6+
slug: how-to-set-default-filter-operator-kendo-ui-grid
7+
tags: kendo-ui, grid, filter, default operator, column menu
8+
res_type: kb
9+
ticketid: 1674080
10+
---
11+
12+
## Description
13+
14+
When configuring the Kendo UI for jQuery Grid with the column menu filter mode, you might want to set a default filter operator for a specific column. For example, setting the default operator to "not equal to" for a string column. This knowledge base article also answers the following questions:
15+
- How can I change the default filter operator in the Kendo UI for jQuery Grid?
16+
- Is there a way to specify a default filter condition for columns in the Grid?
17+
- Can I set a default filter operator for a Grid column using the column menu?
18+
19+
## Environment
20+
21+
<table>
22+
<tbody>
23+
<tr>
24+
<td>Product</td>
25+
<td>Kendo UI for jQuery Grid</td>
26+
</tr>
27+
</tbody>
28+
</table>
29+
30+
## Solution
31+
32+
To change the default filter operator for a column in the Kendo UI for jQuery Grid with a "columnMenu" of "tabbed" and "filterable" mode set to "menu", utilize the `columnMenuInit` event. This event allows you to access and modify the dropdown list for the filter menu, thereby setting a new default operator.
33+
34+
Here is how you can achieve this:
35+
36+
1. Bind to the Grid's `columnMenuInit` event.
37+
38+
2. Within the event handler, check the field for which the column menu is initialized.
39+
40+
3. Find the DropDownList component in the `e.container` element.
41+
42+
4. Set the desired value (operator) for the DropDownList and trigger a change event.
43+
44+
Below is a code example that demonstrates how to set the default operator to "not equal" (`"neq"`) for a column with the field name "name".
45+
46+
```javascript
47+
columnMenuInit:function(e){
48+
if(e.field === "name"){
49+
var ddl = e.container.find("[data-role='dropdownlist']").data("kendoDropDownList");
50+
ddl.value("neq");
51+
ddl.trigger("change");
52+
}
53+
},
54+
```
55+
56+
For a practical implementation, refer to this [example](https://dojo.telerik.com/AXaopZtE/8).
57+
58+
## See Also
59+
60+
- [Kendo UI for jQuery Grid Documentation](https://docs.telerik.com/kendo-ui/controls/grid/overview)
61+
- [Column Menu](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/columnmenuinit) Event of the Kendo UI Grid
62+
- [DropDownList Value Method](https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/methods/value) in the Kendo UI API Documentation

0 commit comments

Comments
 (0)