Edit this page

Getting Started with Progress® Telerik® UI for ASP.NET Core

This article demonstrates how to configure an ASP.NET Core project to use Telerik UI for ASP.NET Core.


The prerequisites you need depend on the Visual Studio (VS) version your project requires:

Using VS 2017

  1. Download VS 2017.
  2. Use the VS Installer to install the .NET Core workload.

Using VS 2015

  1. Download VS 2015 with Update 3.
  2. Download NET Core 1.1.0 - VS 2015 Tooling Preview 2.
  3. (Optional) Download .NET SDK Core for Windows.


To configure an ASP.NET Core Web Application to use Telerik UI for ASP.NET Core:

  1. Create an ASP.NET Core Web Application.
  2. Add the Kendo UI NuGet package.

Create ASP.NET Core Project


If you are configuring an existing project, skip this step.

To create an ASP.NET Core Web Application (with or without Razor Pages):

  1. Select File > New Project.
  2. Choose Templates > Visual C# > Web > ASP.NET Core Web Application (.NET Core).
  3. Set a name and location for the project and click OK.
  4. Select Web Application from the ASP.NET Core Templates section.
  5. Click OK to create the project.

Add NuGet Packages


Before you continue, set up the Telerik NuGet Private Feed. Store the password in clear text because the .NET Core tooling does not support encryption.

To add the NuGet packages:

  1. Open the NuGet Package Manager.

    Figure 1. The NuGet package manager

    NuGet package manager

  2. Select the Telerik package source and search for Telerik.UI.for.AspNet.Core.

  3. Install the Telerik.UI.for.AspNet.Core package. This should add a line to your project.json (for VS2015) or csproj (for VS2017) similar to the examples below.


    If you use VS 2015 and to ensure the matching of the ASP.NET Core version which is distributed with the Telerik UI for ASP.NET Core, you need to manually change the Microsoft.AspNetCore.Routing and Microsoft.AspNetCore.Mvc versions to 1.1.0 in project.json.

           <PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2017.2.621" />
            "dependencies": {
                "Telerik.UI.for.AspNet.Core": "2017.2.621"
  4. Open Startup.cs by using a text editor (IDE) and update it in the way demonstrated in the following examples.

    Locate the ConfigureServices method and add the calls shown in the code snippet below:

        public void ConfigureServices(IServiceCollection services)
            // Maintain property names during serialization. See:
            // https://github.com/aspnet/Announcements/issues/194
                .AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
            // Add Kendo UI services to the services container

    Locate the Configure method and add a call to app.UseKendo at the end.

        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
            // Configure Kendo UI
  5. Import the Kendo.Mvc.UI namespace in ~/Views/_ViewImports.cshtml through @using Kendo.Mvc.UI.

        @using MyASPNETCoreProject
        @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
        @using Kendo.Mvc.UI
  6. Copy the Kendo UI client-side resources. You can use either of the following approaches:

    • Manual installation—To manually install the resources, copy the js and styles folders from the telerik.ui.for.aspnetmvc archive to wwwroot\lib\kendo-ui. The archive is located in Downloads > Telerik UI for ASP.NET Core of your www.telerik.com account.

      Figure 2. Kendo UI resources

      Kendo UI resources

    • Bower package installation—For more information on how to achieve this, refer to the Kendo UI Professional Bower package installation.

  7. Register the Kendo UI styles and scripts in ~/Views/Shared/_Layout.cshtml.


    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 HtmlHelpers, 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.

        <environment names="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 names="Staging,Production">
        <link rel="stylesheet"
                asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
        <link rel="stylesheet"
                asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
        <environment names="Development">
            <script src="~/lib/jquery/dist/jquery.js"></script>
            @* Place 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 names="Staging,Production">
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
            @*  Place Kendo UI scripts after jQuery *@
            <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"
            <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.aspnetmvc.min.js"
  8. Use a Kendo UI widget by adding the snippet from the following example to ~/Views/Home/Index.cshtml.

            <h2>Kendo UI DatePicker</h2>

    Now that all is done, you can see the sample page.

    Figure 3. The end result—a sample page

    Sample page

See Also