Installation / Providing Client Side Resources

New to Telerik UI for ASP.NET Core? Download free 30-day trial

Using Local Files

To render correctly, the Telerik UI for ASP.NET Core components need the corresponding client-side JavaScript and CSS files. This guide demonstrates how to import these client-side assets in your project by using files that you will download from the Telerik website to your local machine.

If you used the automated MSI installer to install Telerik UI for ASP.NET Core, all required files are already available on your machine and you can skip the downloading instructions and jump to Step 4 below. By default, these js and CSS files are located in the Telerik UI for ASP.NET Core installation folder under C:\Program Files (x86)\Progress\Telerik UI for ASP.NET Core <version>.

Adding the Resources

To add the client-side resources to your project:

  1. Go to the UI for ASP.NET Core download page or to Account Overview > Downloads > Progress® Telerik® UI for ASP.NET Core.

  2. Download the archive that matches the Kendo.Mvc.UI version in your project. For example, if your project references Kendo.Mvc.UI version 2024.1.319, then download the telerik.ui.for.aspnetcore.2024.1.319.commercial zip or 7z archive.

    • telerik.ui.for.aspnet.core.2024.1.319.commercial-source includes non-minified scripts and styles.
    • telerik.ui.for.aspnet.core.2024.1.319.commercial includes minified scripts and styles.

  3. Copy the js and styles folders from the archive to your project under wwwroot\lib\kendo-ui.

    The culture and localization (the translation of component messages) scripts are included in the js folder. For more information on using localization, internationalization, and right-to-left (RTL) support with Telerik UI for ASP.NET Core helpers, refer to the article on globalization support by Telerik UI for ASP.NET Core.

  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 Core 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/default-main.css" />
    </environment>
    <environment exclude="Development">
        ...

        <link rel="stylesheet"
            href="https://kendo.cdn.telerik.com/themes/7.2.1/default/default-main.css"
            asp-fallback-href="~/lib/kendo-ui/styles/default-main.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/2024.1.319/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/2024.1.319/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>

Additional Local Files

Starting with Telerik UI for ASP.NET Core version 2022.3.1109, you can choose between three module systems that allow you to import the client-side assets into your project: ECMAScript, UMD, and CommonJS.

The files for all these module systems are available in the downloaded zip or 7z archive or in the local installation directory of Telerik UI for ASP.NET Core:

  • ECMAScript—The script files are located in the mjs folder. Available as of 2022.3.1109.
  • UMD—The script files are located in the umd folder. Available as of 2022.3.1109.
  • CommonJS—The script files are located in the js folder.

See Also

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