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 references Kendo.Mvc.UI version 2022.2.621, then download the telerik.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 the Scripts folder of the application.
Drag the styles directory from the archive and drop it in Visual Studio over the Content folder of the application.
Rename the Scripts/js directory to Scripts/kendo. Rename Content/styles to Content/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, or Site.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")

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>

Using Local Files

See Also

Getting Started

Support Resources

Community