License errors when displaying a Chart and a PDF Viewer on the same page

[Richard]

I have a simple test page that has a Chart and a PDF Viewer. I can not get both to work at the same time without getting a license error.

Below is how I  have tried loading the Kendo library at the top of the page. For the chart, I need to load it as a script for it to work. For the PDF Viewer I need to load it as a module. But loading both always breaks the license. I have tried version combinations (see below) 

How do I get a chart on the same page as the PDF Viewer and have the license work?

Scenario 1:

<script src="~/Portal/kendo/kendo.all.min.js" ></script>
<script src="~/Portal/kendo/kendo.aspnetmvc.min.js" ></script>

• Chart loads correctly
• PDF Viewer fails to load
• The license loads correctly

 Scenario 2:

<script src="~/Portal/kendo/kendo.all.min.js" type="module" ></script>
<script src="~/Portal/kendo/kendo.aspnetmvc.min.js" type="module" ></script>

• Chart fails to load
• PDF Viewer loads correctly
• The license loads correctly

Scenario 3:

<script src="~/Portal/kendo/kendo.all.min.js" ></script>
<script src="~/Portal/kendo/kendo.aspnetmvc.min.js" ></script>

<script src="~/Portal/kendo/kendo.all.min.js" type="module" ></script>
<script src="~/Portal/kendo/kendo.aspnetmvc.min.js" type="module" ></script>

• Chart loads correctly
• PDF Viewer loads correctly
• The license fails to load

 

Thanks,

Richard

[Eyup]

Hello Richard,

 

Thank you for reaching out.

You can resolve this issue by adding type="module" directive to the kendo license script reference in your _Layout.cshtml page:
https://www.telerik.com/kendo-jquery-ui/documentation/intro/installation/licensing/adding-the-license-key 

Can you please give it a try and let me know if this suggestion resolve the problem?

 

Regards,
Eyup
Progress Telerik

[Richard]

Hi Eyup,

Thank you for your response.

I tried your suggestion of adding the license script as a module, but unfortunately, I wasn't able to get it working as expected.

To help illustrate the issue, I've put together a minimal project. It doesn’t include _Layout.cshtml or a separate license script. Instead, I believe the license is resolved via the Telerik.Licensing NuGet package, as I can see that the license key is correctly generated on the rendered page.

Here’s what I’m seeing:

When not loading kendo.all as a module, the Chart renders and the license appears to function correctly, but the PDF Viewer hangs indefinitely.

When loading kendo.all as a module, both the Chart and PDF Viewer work, but the license fails to resolve.

Please let me know if there’s anything else I can try.

Thanks,
Richard

 

[Eyup]

This situation with the module requirement is caused by the pdf.js library and we as the Telerik UI Team did a lot of research to remedy the situation for our users.

We provided multiple workarounds as mentioned in my previous reply:
https://www.telerik.com/aspnet-mvc/documentation/knowledge-base/pdfviewer-pdfjs-script-workarounds#using-renderasmodule-for-module-based-script-initialization

And our Dev Team has introduced the aspnetmvc.ready.js solution with the recent release, which you can find in the installation folder:

<script src="../content/js/jquery.min.js" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.mjs" type="module"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.3.136/pdf.worker.mjs" type="module"></script>
<script src="../../dist/js/kendo.aspnetmvc.ready.js"></script>
<script src="../../dist/js/kendo.all.js" type="module"></script>
<script src="../../dist/js/kendo.aspnetmvc.js" type="module"></script>
...
<script>
  kendo.syncReady(() => {
    var pdfViewer = $("#pdfViewer")
    .kendoPDFViewer({
      ....
    })
    .data("kendoPDFViewer");
  }); // PDFViewer is successfully initialized 
</script>

But I understand your position and the complex project you might have. In order to provide a more convenient solution for your scenario, I suggest another approach which will not require type module to be added. You can achieve it using the following steps:

 

1. Download the pdf.mjs scripts from here:
https://cdnjs.com/libraries/pdf.js/4.6.82

2. Compile these .mjs scripts to UMD .js files. You can check the net for different ways to do that:


3. Then add these pdf.js UMD files to the project:

4. Now you can change the _Layout.cshtml page to remove the module attributes and the other script references from the Index.cshtml page:

    <link href="https://unpkg.com/%40progress/kendo-font-icons/dist/index.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-turquoise.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
    <script src="~/Scripts/pdfjs.min.js"></script>
    <script src="~/Scripts/pdfjs.worker.min.js"></script>
    <script src="https://cdn.kendostatic.com/2025.1.227/js/kendo.all.min.js"></script>
    <script src="/Scripts/kendo-ui-license.js"></script>
    <script src="https://cdn.kendostatic.com/2025.1.227/js/kendo.aspnetmvc.min.js"></script>

5. And the PdfViewer will work once again without errors and watermarks:

I am sending the pdfjs files in any case for your convenience.

Do you find this information and archive helpful?

[Richard]

Hi Eyup, 

Thank you for the response. The compiled mjs files solution has worked for me, and I can now display a PDF and a Chart on the same page without a license error.

Can you tell me if you were able to get a PDF and a Chart to display on the same page using the other methods outlined in the KB?
I have tried several of the options (including the ready.js). The PDF and Chart would load for me, but always with a license error. I don't know what I was doing wrong. 

Thanks,
Richard

[Eyup]

Hi Richard,

 

I can see both the Chart and PdfViewer on the same page without the watermark when I add the scripts (including the kendo license script) two times - once as type="module" for the PdfViewer and once without for the Chart.

The alternative is to provide the pdf.js library scripts as compiled UMD source as demonstrated in my previous post. Then no script will require the type="module" approach:

    <script src="~/Scripts/pdfjs.min.js"></script>
    <script src="~/Scripts/pdfjs.worker.min.js"></script>

[Richard]

Thank you for checking. I'll mark this as answered. I ended up using the UMD solution. 

I'll mark this as answered.