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:

Getting Started with Kendo UI for jQuery - Add the required JavaScript and CSS files
Getting Started with Kendo UI Themes

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

(Demonstrated in this guide) Manual installation
Using Bower
Using NPM and Webpack

Manual Installation

Go to the UI for ASP.NET Core download page or to Account Overview > Downloads > Progress^® Telerik^® UI for ASP.NET Core.
Download the archive that matches the Kendo.Mvc.UI version:
- telerik.ui.for.aspnet.core.2022.1.119.commercial-source includes non-minified scripts and styles.
- telerik.ui.for.aspnet.core.2022.1.119.commercial includes minified scripts and styles.
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.

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/2022.1.119/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/2022.1.119/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/2022.1.119/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/2022.1.119/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>

Using LibMan

Library Manager (LibMan) is a client-side library management tool. The supported CDNs include CDNJS, jsDelivr, and unpkg. The selected library files are fetched and placed in the specified location within the ASP.NET Core project.

The following guide shows how to include the client-side resources by using LibMan:

Add a libman.json file to your ASP.NET Core application following the Microsoft guidelines.
Add the following configuration to the libman.json file to fetch the library in the specified destination:
```
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
    {
    "provider": "unpkg",
    "library": "@progress/kendo-ui@2021.3.914",
    "destination": "wwwroot/lib/kendo-ui/2021.3.914"
    }
]
}
```
This step uses unpkg to load the Kendo UI library distributed on NPM. The scripts in the NPM package are not usable in the browser. This requires you to use a bundler such as WebPack.

Add the following files, containing the configurations provided below:

webpack.config.js and package.json files to the wwwroot folder of the application.
entry.js file in the wwwroot/js/ folder to specify the scripts that should be bundled.

const path = require('path');
var webpack = require("webpack");

module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
        })
    ],
    entry: {
        site: './js/entry.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: ["", ".js", "min.js"],
        alias: {
            'jquery': path.join(__dirname, 'node_modules/jquery')
        }

    },
    devtool: 'source-map',
};

{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"dependencies": {
    "jquery": "^3.6.0",
    "jquery-validation": "^1.19.3",
    "jquery-validation-unobtrusive": "^3.2.12",
    "bootstrap": "^4.6.0",
    "popper.js": "^1.16.1"
},
"devDependencies": {
    "css-loader": "^5.2.0",
    "source-map-loader": "^0.1.5",
    "file-loader": "^6.2.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.52.1",
    "webpack-cli": "^4.6.0"
},
"scripts": {
    "build": "webpack"
}
}

    require("jquery")
    window.$ = window.jQuery = $

    require("../lib/kendo-ui/2021.3.914/js/kendo.all")
    require("../lib/kendo-ui/2021.3.914/js/kendo.aspnetmvc")

Once LibMan has fetched the Kendo UI client-side files, navigate to the wwwroot folder and execute the following commands:
- npm install to install the dependencies in the local node_modules folder.
- npm run build to bundle the scripts specified in the entry.js file.
The result of the bundling will be a bundle.js file output in the wwwroot/dist/ folder.

In the _Layout.cshtml, file add a reference to the desired theme and the bundled scripts:

    <link rel="stylesheet" href="~/lib/kendo-ui/2021.3.914/css/web/kendo.default-v2.css" />
    <script src="~/dist/bundle.js"></script>

Including Client-Side Resources

Manual Installation

Using LibMan

See Also

Was this article helpful?

Tell us how we can improve this article

Getting Started

Support Resources

Community