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 Progress Telerik UI for ASP.NET Core.

Prerequisites

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.

Configuration

To configure an ASP.NET Core Web Application to use Progress 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

Important

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

To create an ASP.NET Core Web Application:

  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

Important

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.

    Important

    If you use VS 2015 and to ensure the matching of the ASP.NET Core version which is distributed with the 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.

    Example
    
            "dependencies": {
                ...
                "Telerik.UI.for.AspNet.Core": "2017.2.621"
            }
    
    
           <PackageReference Include="Telerik.UI.for.AspNet.Core" Version="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:

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

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

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

    Example
        @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 > UI for ASP.NET MVC 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.

    Example
        <head>
        ...
    
        <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>
        <environment names="Staging,Production">
            ...
    
        <link rel="stylesheet"
                href="https://kendo.cdn.telerik.com/2017.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/2017.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 names="Development">
            ...
    
            @* 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>
        <environment names="Staging,Production">
            ...
    
            @*  Place Kendo UI scripts after jQuery *@
            <script src="https://kendo.cdn.telerik.com/2017.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/2017.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>
    
        @RenderSection("scripts", required: false)
        </head>
    
  8. Use a Kendo UI widget by adding the snippet from the following example to ~/Views/Home/Index.cshtml.

    Example
            <h2>Kendo UI DatePicker</h2>
    
            @(Html.Kendo().DatePicker()
                    .Name("datepicker")
            )
    
            <!--_-->
    

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

    Figure 3. The end result—a sample page

    Sample page

See Also