Installation

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:

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

Manual Installation

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

  2. Download the archive that matches the Kendo.Mvc.UI version:

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

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

    Kendo UI resources

  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 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.915/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.915/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.915/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.915/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>

See Also

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