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 in Visual Studio (VS) 2017.


The prerequisites for creating and running an ASP.NET Core on Windows with VS 2017 are described on the .NET Core documentation site.


You can use Visual Studio 2015 only for .NET Core 1.x development. However, this approach is not recommended because:

  • The .NET Core tooling is in a preview version which is not officially supported.
  • The projects are project.json-based which is deprecated.

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


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

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

Add the Telerik UI for ASP.NET Core NuGet Package

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

  2. Open the NuGet Package Manager.

    Figure 1. The NuGet package manager

    NuGet package manager

  3. Click the Browse tab, select the Telerik package source and search for Telerik.UI.for.AspNet.Core.

  4. Install the Telerik.UI.for.AspNet.Core package. It adds a line to your .csproj file similar to the following example.

    <PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2017.2.621" />
  5. Open Startup.cs and update it in the following way:

    • Locate the ConfigureServices method and add the calls.

      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
    • Add the required using Newtonsoft.Json.Serialization line.

      using Newtonsoft.Json.Serialization;
    • Locate the Configure method and add a call to app.UseKendo at the end (required for versions prior to R2 2018).

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

        @using MyASPNETCoreProject
        @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
        @addTagHelper *, Kendo.Mvc
        @using Kendo.Mvc.UI
  7. 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—Refer to the article on Bower package installation. ASP.NET Core v2.1 no longer supports Bower. For more information on the alternative approach for copying Kendo UI scripts, refer to the section on copying client resources through NPM and Webpack.

  8. 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 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 exclude="Development">
            <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 include="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 exclude="Development">
            <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"
  9. 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

Copy Kendo UI Client Resources through NPM and Webpack

  1. Create a new Telerik ASP.NET Core project.
  2. Remove the bower.json file.
  3. Add package.json in the following way:

        "name": "YourAppName",
        "version": "1.0.0",
        "description": "",
        "main": "main.js",
        "scripts": {
            "build": "webpack"
        "keywords": [],
        "author": "",
        "license": "ISC",
        "dependencies": {               
            "@progress/kendo-ui": "2018.2.620"
        "devDependencies": {
            "webpack": "^4.12.0",
            "webpack-cli": "^3.0.8"
  4. Add webpack.config.js in the following way:

    const path = require('path');
    module.exports = {
        entry: './main.js',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'wwwroot')
  5. Create a main.js file with the following content:

    As both jQuery and $ are used throughout the application, in the global scope jQuery is assigned to both variables.

    jQuery = $ = require("jquery");
  6. Open the Command prompt and navigate to the folder of the project.

  7. Run the following commands:

    npm install
    npm run build
  8. In ~/Views/Shared/_Layout.cshtml, replace the Kendo UI CDN scripts with the script that references bundle.js.

    <script src="~/bundle.js"></script>

See Also