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 > Telerik UI for ASP.NET Core.
-
Download the archive that matches the
Kendo.Mvc.UI
version:-
telerik.ui.for.aspnet.core.2020.3.1118.commercial-source
includes non-minified scripts and styles. -
telerik.ui.for.aspnet.core.2020.3.1118.commercial
includes minified scripts and styles.
-
-
Copy the
js
andstyles
folders from the archive to your project underwwwroot\lib\kendo-ui
. -
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/2020.3.1118/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/2020.3.1118/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/2020.3.1118/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/2020.3.1118/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>