Using Local Files
To render correctly, the Telerik UI 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 MVC, 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 installation folder under
C:\Program Files (x86)\Progress\Telerik UI for ASP.NET MVC <version>
.
To add the client-side resources to your project:
Go to the UI for ASP.NET MVC download page or to Account Overview > Downloads > Progress® Telerik® UI for ASP.NET MVC.
Download the archive that matches the
Kendo.Mvc.UI
version in your project. For example, if your project referencesKendo.Mvc.UI
version2022.2.621
, then download thetelerik.ui.for.aspnetmvc.2022.2.621.commercial
zip or 7z archive.Extract the files from the archive.
Drag the
js
directory from the archive and drop it in Visual Studio over theScripts
folder of the application.Drag the
styles
directory from the archive and drop it in Visual Studio over theContent
folder of the application.-
Rename the
Scripts/js
directory toScripts/kendo
. RenameContent/styles
toContent/kendo
. After the needed JavaScript and CSS files are added to the application, you can include them. Open
App_Start/BundleConfig.cs
to add bundles for Telerik UI for ASP.NET MVC.-
Add a script bundle for Telerik UI for ASP.NET MVC.
bundles.Add(new ScriptBundle("~/bundles/kendo").Include( "~/Scripts/kendo/kendo.all.min.js", // Uncomment below if you use the Scheduler. // "~/Scripts/kendo/kendo.timezones.min.js", "~/Scripts/kendo/kendo.aspnetmvc.min.js"));
-
Add a style bundle for Telerik UI for ASP.NET MVC.
Make sure you are familiar with the Telerik UI for ASP.NET MVC fundamentals and CSS bundling.
bundles.Add(new StyleBundle("~/Content/kendo/css").Include( "~/Content/kendo/kendo.common-bootstrap.min.css", "~/Content/kendo/kendo.bootstrap.min.css"));
-
Set the ASP.NET bundles to allow minified files in debug mode.
bundles.IgnoreList.Clear();
Open the layout of the application. By default, if using ASPX, it is
Views/Shared/_Layout.cshtml
, orSite.master
.-
Render the Telerik UI for ASP.NET MVC style bundle.
<%: Styles.Render("~/Content/kendo/css") %>
@Styles.Render("~/Content/kendo/css")
Move the jQuery bundle to the
head
tag of the page. By default, it is located at the end of the page.-
Render the Telerik UI for ASP.NET MVC script bundle after jQuery. Make sure that the jQuery version you load is supported
<%: Scripts.Render("~/bundles/jquery") %> <%: Scripts.Render("~/bundles/kendo") %>
@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/kendo")
-
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 MVC version which your project references.
- In the default .NET MVC 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.2.621/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.2.621/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.2.621/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.2.621/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>