Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 02 Mar 2021 15:25 by ADMIN
Jack
Created on: 09 Jan 2020 16:41
Category: Kendo UI for jQuery
Type: Feature Request
0
CDN version of Kendo UI Core does not match download version.

I've setup a new ASP.NET Core project with Kendo UI Core. One of the requirements for this site is to load the scripts/styles from CDN except when the internet is down, in which case it should load from local files. I downloaded a copy of Kendo UI Core 2019.3.1023 and extracted it into the project. I have an ASP.NET Core Tag Helper which handles hashing the local file and using that SRI to load the CDN version.

Here's an example of that generated tag and the fallback:

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css" integrity="sha384-tr4PSEV2CnVkku/o7s0ApjrlIpaxzBOMQTYc8SsPFXXh6ITUZ/SS7t8k8PVUa1Tk" crossorigin="anonymous">
<meta name="x-stylesheet-fallback-test" content="" class="k-widget"><script>!function(a,b,c,d){var e,f=document,g=f.getElementsByTagName("SCRIPT"),h=g[g.length-1].previousElementSibling,i=f.defaultView&&f.defaultView.getComputedStyle?f.defaultView.getComputedStyle(h):h.currentStyle;if(i&&i[a]!==b)for(e=0;e<c.length;e++)f.write('<link href="'+c[e]+'" '+d+"/>")}("box-sizing","content-box",["/lib/kendo-ui-core/styles/kendo.common.min.css"], "rel=\u0022stylesheet\u0022 integrity=\u0022sha384-tr4PSEV2CnVkku/o7s0ApjrlIpaxzBOMQTYc8SsPFXXh6ITUZ/SS7t8k8PVUa1Tk\u0022 crossorigin=\u0022anonymous\u0022 ");</script>

When the hash is calculated from the local file, the CDN copy does not match. So far I have only had an issue with two files: kendo.common.min.css and kendo.bootstrap-v4.min.css: both of these files have different headers from the download and CDN versions and appear to be minified differently. It would be great if future versions could be the same so that the hash for a local file matches the hash for the CDN version.

As a side note, it would be really great if you could work with Libman (the Visual Studio CDN downloader tool) to be able to download Kendo UI Core. The only version that exists currently on that system is very old.

1 comment
ADMIN
Misho
Posted on: 16 Jan 2020 15:20

Hello,

The following article demonstrates how to include the client-side resources which are required by Telerik® UI for ASP.NET MVC in Visual Studio projects but is equivalent for  ASP.NET Core projects:

https://docs.telerik.com/aspnet-mvc/getting-started/installation/getting-started-copy-client-resources

I've created a small sample project with the latest Telerik UI for ASP.NET Core where this approach is applied for the purpose of testing. Here is the relevant part of the layout page with the fallback mechanism applied:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - CDN_Fallback</title>

    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
	<link href="https://1kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css" rel="stylesheet" type="text/css"
          
          asp-fallback-href="~/Content/kendo/kendo.common.min.css"
            asp-fallback-test-class="k-common-test-class"
            asp-fallback-test-property="opacity" asp-fallback-test-value="0" 
          
          />
	<link href="https://1kendo.cdn.telerik.com/2020.1.114/styles/kendo.default.min.css" rel="stylesheet" type="text/css"
          
           asp-fallback-href="~/Content/kendo/kendo.default.min.css"
            asp-fallback-test-class="k-theme-test-class"
            asp-fallback-test-property="opacity" asp-fallback-test-value="0"
          
          
          />
	<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jquery.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jszip.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
	<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.aspnetmvc.min.js"></script>
</head>
<body class="k-content">
    <nav class="navbar navbar-inverse navbar-fixed-top p-3">
        <div class="container p-0 p-sm-3">
            <div class="navbar-header">
                <kendo-button name="configure" tag="button" icon="menu" class="k-rpanel-toggle k-primary btn-toggle"></kendo-button>
                <a asp-controller="Home" asp-action="Index" class="navbar-brand">Your .NET Core Application</a>
            </div>
            <div id="responsive-panel" class="navbar-left">
                <kendo-responsivepanel name="responsive-panel" auto-close="false" breakpoint="768" orientation="top">
                    @(Html.Kendo().Menu()
                                .Name("Menu")
                                .Items(items =>
                                {
                                    items.Add().Text("Home").Action("Index", "Home", new { area = "" });
                                    items.Add().Text("About").Action("About", "Home", new { area = "" });
                                    items.Add().Text("Contact").Action("Contact", "Home", new { area = "" });
                                })
                    )
                </kendo-responsivepanel>
            </div>
        </div>
    </nav>

    <main>
        <div class="container">
            @RenderBody()
        </div>
    </main>

    <footer class="footer text-center d-flex align-items-center">
        <div class="container pb-0">
            <hr />
            <p class="text-muted">
                Copyright © @DateTime.Now.Year Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
            </p>
        </div>
    </footer>

    <environment names="Development">
        <script src="~/lib/bootstrap/js/bootstrap.js"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"></script>
    </environment>
    @RenderSection("scripts", required: false)
</body>
</html>

I've modified the CDN url to test the fallback mechanism and it appears as working properly on my side.

In addition the CDN and the local CSS looks like the same on my end:

https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css

and

C:\Program Files (x86)\Progress\Telerik UI for ASP.NET Core R1 2020\styles\kendo.common.min.css

 

Could you please modify the attached project in accordance with your changes and send it back with the issue details so we could be able to observe the problem on our side?

Best Regards,
Misho
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Attached Files:
Create an account Log In
View
Type
Status
Category