Including Client-Side Resources

This article demonstrates how to include the client-side resources which are required by Telerik® UI for ASP.NET Core in Visual Studio 2017 projects.

As the UI for ASP.NET Core suite is a set of server-side wrappers over the Kendo UI for jQuery client-side widgets, to run the components, you have to provide the same set of web assets. For more information on the files you need, refer to the articles on:

To include the client-side resources, use any of the following approaches:

Manual Installation

  1. Go to the UI for ASP.NET Core download page or to Account Overview > Downloads > Telerik UI for ASP.NET Core.
  2. Download the archive that matches the Kendo.Mvc.UI version:

    • telerik.ui.for.aspnet.core.2019.1.115.commercial-source includes non-minified scripts and styles.
    • telerik.ui.for.aspnet.core.2019.1.115.commercial includes minified scripts and styles.
  3. Copy the js and styles folders from the archive to your project under wwwroot\lib\kendo-ui.

    Kendo UI resources

  4. Register the UI styles and scripts in ~/Views/Shared/_Layout.cshtml.

    • The CDN links and/or package versions have to point to the same UI for ASP.NET Core version which your project references.
    • In the default .NET Core template, the jQuery scripts are included at the end of the <body> element. To properly load the Telerik UI for ASP.NET HTML Helpers, move the jQuery scripts and the Kendo UI client-side scripts to the <head> element and make sure that the Kendo UI scripts are loaded after the jQuery ones.
    <head>
        ...
    
        <environment include="Development">
            ...
    
            <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-nova.min.css" />
            <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.nova.min.css" />
        </environment>
        <environment exclude="Development">
            ...
    
            <link rel="stylesheet"
                href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common-nova.min.css"
                asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-nova.min.css"
                asp-fallback-test-class="k-common-test-class"
                asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
    
            <link rel="stylesheet"
                href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.nova.min.css"
                asp-fallback-href="~/lib/kendo-ui/styles/kendo.nova.min.css"
                asp-fallback-test-class="k-theme-test-class"
                asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
        </environment>
    
        <environment include="Development">
            ...
    
            <script src="~/lib/jquery/dist/jquery.js"></script>
    
            @* Place the Kendo UI scripts after jQuery. *@
            <script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
            <script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
        </environment>
        <environment exclude="Development">
            ...
    
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    crossorigin="anonymous"
                    integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
            </script>
    
            @* Place the Kendo UI scripts after jQuery. *@
            <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"
                    asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
                    asp-fallback-test="window.kendo">
            </script>
            <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.aspnetmvc.min.js"
                    asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
                    asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
            </script>
        </environment>
    
        ...
    </head>
    

See Also

In this article
Not finding the help you need? Improve this article