Using a Telerik UI for ASP.NET Core Project Template in VS for Windows

This tutorial shows how to create an ASP.NET Core web app that uses Telerik UI for ASP.NET Core components.

You will create a project from a template and configure it for Telerik UI by using the Visual Studio extensions. This method allows you to download the components and then create a pre-configured application that has all necessary scripts, styles, and editor templates so that you can immediately start adding the Telerik UI components.

If you need to add Telerik UI controls to an existing project, see the First Steps with VS for Windows tutorial.

Prerequisites

• .NET Core SDK
• Visual Studio 2017 or later

  For newer .NET Core versions, a recent matching Visual Studio might be required.

• Windows 10 or higher
• Telerik account—if you don't have an account yet, you can create one for free.

Step 1: Install a License Key

Starting with Telerik UI for ASP.NET Core 2025 Q1 release, you must activate the UI components by providing a license key file. Previous versions require a script key instead of a license key file.

To download and install your Telerik license key:

1. Go to the License Keys page in your Telerik account.
2. Click the Download License Key button.
3. Save the telerik-license.txt file to:
   • (on Windows) %AppData%\Telerik\telerik-license.txt, for example, C:\Users\...\AppData\Roaming\Telerik\telerik-license.txt
   • (on Mac or Linux) ~/.telerik/telerik-license.txt, for example, /Users/.../.telerik/telerik-license.txt

This will make the license key available to all Telerik .NET apps that you develop on your local machine.

The Telerik License Key article provides additional details on installing and updating your Telerik license key in different scenarios. Automatic license key maintenance is more effective and recommended in the long run.

Step 2: Install the Telerik UI for ASP.NET Core Visual Studio Extension

1. Close any running Visual Studio instances.

2. Go to the Progress Telerik UI for ASP.NET Core Extension page and click Download.

   • For Visual Studio 2017 and 2019
   • For Visual Studio 2022

3. Locate and double-click the TelerikUI.ASP.NET.Core.VSPackage.vsix file to install the extension.

Once the extension is successfully installed, you can open Visual Studio and start using the automated Create New Telerik Project wizard.

Step 3: Create the Project

1. In Visual Studio, select Create a new project.

2. Filter by project type and select Telerik from the drop-down.

   

3. Select Telerik ASP.NET Core MVC Application, and then select Next.

4. Name the project TelerikAspNetCoreApp and select Create.

   Using this name guarantees that the namespace from the code snippets in this tutorial will match your project.

   

5. From the drop-down box, select the latest ASP.NET Core version for .NET target framework.

   Telerik UI supports all newer ASP.NET Core versions.

   

6. Select HTML or Tag Helpers.

   Telerik UI for ASP.NET Core is a set of server-side wrappers (HTML and Tag Helpers) that allow you to use the Kendo UI widgets in .NET Core. When you select the helper type in the Create New Project Wizard, the wizard will configure the project for the selected helpers.

   In Razor files, Tag Helpers come with predefined strongly-typed attributes that enable server-side code to participate in the creation and rendering of HTML elements. The resulting markup is cleaner and easier to read than with traditional HTML Helpers, which are invoked as methods that are mixed with HTML inside your Razor views.

7. From the Select Version list, select the latest Telerik UI version, and then select Next.

   • If you use the Telerik UI extensions for the first time, you will see a login window. Enter the credentials for your Telerik account to download the controls.
   • If you haven't purchased a license, you can download the Telerik UI controls with a trial license.

8. From the available options Select Grid and Menu, and then select Next.

   The wizard offers various templates for projects with pre-configured Grid and Menu controls and for projects using Razor Pages. This tutorial uses the Grid and Menu MVC version.

   

9. Select the default theme and then select Finish.

   The selected theme defines the appearance of the Telerik UI components. You can change the theme at any time.

   

Congratulations! The created project:

• Is a working app.

• Has all resources required by Telerik UI, and you can start adding components immediately.

Step 4: Review the Grid Component

The default casing for JSON strings in ASP.NET Core is camelCase. The Telerik UI components that are data-bound depend on PascalCase formatted response from the server. If the JSON serialization isn't configured properly, the UI components will display wrong data. To find out how to configure the application to return the data in Pascal-case, refer to the JSON Serialization article.

The next step is to examine the Telerik UI Grid which the template wizard added to your project. The Grid is the richest component in the entire toolset, but this sample will only demonstrate a basic implementation.

Binding the Grid requires adding a model and controller. The Wizard has done the following automatically:

1. Added a Models folder to the project. Created an OrderViewModel class and added it to the Models folder.

   The model represents the shape of the data that the Grid will display.

   C#

   public class OrderViewModel
   {
   	public int OrderID
   	{
   		get;
   		set;
   	}
   
   	public decimal? Freight
   	{
   		get;
   		set;
   	}
   
   	public DateTime? OrderDate
   	{
   		get;
   		set;
   	}
   
   	public string ShipCity
   	{
   		get;
   		set;
   	}
   
   	public string ShipName
   	{
   		get;
   		set;
   	}
   }

   When the Grid is bound to a strongly-typed model such as the OrderViewModel, it automatically detects the data types of the fields.

2. Created a new Controller and named the file GridController.

   The controller handles the incoming requests, retrieves the model data, and then returns the requested data.

3. In GridController.cs, added the following declarations at the top. They enable the data processing by the Telerik UI extensions:

   C#

   using Kendo.Mvc.Extensions;
   using Kendo.Mvc.UI;
   using Microsoft.AspNetCore.Mvc;
   using System;
   using System.Linq;
   using TelerikAspNetCoreApp.Models;

4. In GridController.cs, added an Action method that will return the data for the Grid.

   C#

   public class GridController : Controller
   {
   	public JsonResult Orders_Read([DataSourceRequest] DataSourceRequest request)
   	{
   		var result = Enumerable.Range(0, 50).Select(i => new OrderViewModel
   		{
   			OrderID = i,
   			Freight = i * 10,
   			OrderDate = new DateTime(2016, 9, 15).AddDays(i % 7),
   			ShipName = "ShipName " + i,
   			ShipCity = "ShipCity " + i
   		});
   
   		var dsResult = result.ToDataSourceResult(request);
   		return Json(dsResult);
   	}
   }

5. In the ~/Views/Home/Index.cshtml file, added the Grid:

   HtmlHelperTagHelper

   Razor

   @(Html.Kendo().Grid <TelerikAspNetCoreApp.Models.OrderViewModel>()
   	.Name("grid")
   	.Columns(columns =>
   	{
   		columns.Bound(p => p.OrderID).Filterable(false);
   		columns.Bound(p => p.Freight);
   		columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
   		columns.Bound(p => p.ShipName);
   		columns.Bound(p => p.ShipCity);
   	})
   	.Pageable()
   	.Sortable()
   	.Scrollable()
   	.Filterable()
   	.HtmlAttributes(new { style = "height:550px;" })
   	.DataSource(dataSource => dataSource
   		.Ajax()
   		.PageSize(20)
   		.Read(read => read.Action("Orders_Read", "Grid"))
   		)
   )

   Razor

   <kendo-grid name="grid" height="550">
   	<columns>
   		<column field="OrderID" title="Order ID">
   			<filterable enabled="false"></filterable>
   		</column>
   		<column field="Freight" title="Freight" />
   		<column field="OrderDate" title="Order Date" format="{0:MM/dd/yyyy}" />
   		<column field="ShipName" title="Ship Name" />
   		<column field="ShipCity" title="Ship City" />
   	</columns>
   	<scrollable enabled="true" />
   	<sortable enabled="true" />
   	<pageable enabled="true" />
   	<filterable enabled="true" />
   	<datasource type="DataSourceTagHelperType.Ajax" page-size="20">
   		<transport>
   			<read url="@Url.Action("Orders_Read", "Grid")" />
   		</transport>
   	</datasource>
   </kendo-grid>

6. Now you can run the project and enjoy the neat result:

   

For more information on data processing and data binding, see the following articles:

• Binding the Grid to a database
• CRUD operations

Step 5: Add a DatePicker Component

Next, you will add another Telerik UI component to the project—the Telerik UI DatePicker. You can add the DatePicker as an HTML or TagHelper. Whether you select the HTML or TagHelper syntax depends on what you have configured when you have created the project.

1. Create a DatePicker component by adding the snippet from the following example to ~/Views/Home/Index.cshtml.

   HtmlHelperTagHelper

   Razor

   	<div class="text-center">
   		<h2>Telerik UI DatePicker for ASP.NET Core</h2>
   		@(Html.Kendo().DatePicker()
   			.Name("my-picker")
   		)
   	</div>

   Razor

   	<div class="text-center">
   		<h2>Telerik UI DatePicker for ASP.NET Core</h2>
   		<kendo-datepicker name="my-picker"/>
   	</div>

2. Run the project and open the Index page in the browser.

   

Next, you can change the look and feel of your application by selecting another visual theme.

Step 6: Change the Application Theme

The Telerik UI for ASP.NET Core comes with the Default (our own styling), Bootstrap (matches Bootstrap guidelines), Classic, Fluent, and Material (based on the Material Design guidelines) built-in themes. Each theme provides a set of color swatches you can choose from to match your application appearance and styling. The suite enables you to customize the available themes and modify the default appearance of the UI components.

The themes are usually referenced in the _Layout file of the application. To change the theme, substitute the existing CSS reference in the _Layout with the new theme.

If during the creation the project you've chosen the Bootstrap theme, the _Layout.cshtml file must contain the following CSS link:

	<link href="https://kendo.cdn.telerik.com/themes/12.2.3/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/css" />

To change the theme to the Default theme, substitute the link above with the following:

	<link href="https://kendo.cdn.telerik.com/themes/12.2.3/default/default-main.css" rel="stylesheet" type="text/css" />

Since both the Bootstrap and Default themes are SASS-based themes, no additional CSS files are required. The LESS theme files are no longer supported after the R1 2023 SP1 release. If you need to reference LESS CSS files in an older version of the Telerik UI for ASP.NET Core, you must add a common and a theme stylesheets. The following example shows how to reference the Default LESS theme (applicable to versions of Telerik UI for ASP.NET Core before R1 2023 SP1):

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default.min.css" />

Next Steps

• Check out the free Telerik UI onboarding course
• Getting Started with Telerik UI Video Tutorial
• Using Telerik UI in Razor Pages projects
• Create your own custom bundles
• Switch from Trial to Commercial License

See Also

• Installing UI for ASP.NET Core with NuGet
• Installing UI for ASP.NET Core by Using the CDN Services