Edit this page

Getting Started with Progress® Telerik® UI for ASP.NET Core and the Command Line Interface

This article demonstrates how to configure an ASP.NET Core project to use Telerik UI for ASP.NET Core using the Command line interface.

The below is applicable when working on .Net Core project in Visual Studio Code or any other editor of preference. It is also platform independent, meaning that the same steps could be followed on MacOS, Linux or Windows machine.

Prerequisites

Creating the Application

Important

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

Below are listed the steps for you to follow when creating an ASP.NET Core web app.

  1. Using the Terminal / cmd, navigate to the folder of your choice. Create a new folder and navigate in it:

    mkdir MyTelerikApp
    cd MyTelerikApp
    
  2. Run dotnet new mvc to create a .Net Core application using the default web MVC template.

  3. Run dotnet restore to restore the project template dependencies. As a result, the NuGet packages are downloaded.

    Important

    For up-to-date commands, refer to the guide on getting started with .NET Core.

  4. Start the application by running dotnet run. The following example demonstrates a sample response that you are expected to receive.

    Hosting environment: Production
    Now listening on: http://localhost:5000
    Application started. Press Ctrl+C to shut down.
    
  5. Use your favorite browser to navigate to the above location and make sure the application is running properly. After you check the application in the browser, stop the server.

Integrating Telerik UI for ASP.NET Core

  1. Configure the private Telerik NuGet feed. You could either:

    • Globally include the telerik.com credentials to the NuGet configuration of the user. To do that you should modify (or create) the NuGet.Config file for the user. That file could be found in the %appdata%\NuGet\ folder on Windows machines. Depending on the exact OS distribution, it should be available / created in the ~/.config/NuGet/ or the ~/.nuget/NuGet/ folder on Mac/Linux machines.
    • Create a local NuGet.Config file in the project folder.

    In both cases, the NuGet.Config file should include your telerik.com credentials:

    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
        <packageSources>
        ...
        <add key="telerik.com" value="https://nuget.telerik.com/nuget" />
        </packageSources>
        <packageSourceCredentials>
        <telerik.com>
            <add key="Username" value="[ your.telerik.com@email.login ]" />
            <add key="ClearTextPassword" value="[ your.telerik.com.password.in.clear.text ]" />
        </telerik.com>
        </packageSourceCredentials>
    </configuration>
    
  2. Install Telerik UI for ASP.NET Core through the cli:

    dotnet add package Telerik.UI.for.AspNet.Core
    
  3. Register Kendo UI as a service in Startup.cs:

    • Locate the ConfigureServices method and add the JsonOptions and the Kendo UI service.
    public void ConfigureServices(IServiceCollection services)
    {
        ...
        // Maintain property names during serialization. See:
        // https://github.com/aspnet/Announcements/issues/19
        services.AddMvc();
                .AddJsonOptions(options =>
                    options.SerializerSettings.ContractResolver = new DefaultContractResolver());
        services.AddKendo();
    }
    
    • Add the required using of Newtonsoft.Json.Serialization namespace.
    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)
    {
        ...
        app.UseKendo(env);
    }
    
  4. Import the Kendo.Mvc.UI namespace. Open ~/Views/_ViewImports.cshtml and add the following references.

    //...
    @addTagHelper *, Kendo.Mvc
    @using Kendo.Mvc.UI
    
  5. Include the Kendo UI client-side resources.

    For more information about the different approaches for including client-side resources please refer to the Include Client Side Resources article.

  6. Create a Kendo UI widget by adding the snippet from the following example to ~/Views/Home/Index.cshtml.

    <h2>Kendo UI DatePicker</h2>
    
    @(Html.Kendo().DatePicker()
        .Name("datepicker")
    )
    
  7. Navigate to the project folder by using the Terminal / cmd and run it using the dotnet run command. The Index page should display a Kendo UI DatePicker.

See Also