Visual Studio 2022 Support

The Most Complete ASP.NET Core UI Component Library

Create modern cross-platform web applications with over 110+ full-featured ASP.NET Core UI components for any scenario.

Download Free Trial


*Includes access to online technical training to speed-up your onboarding.

  .Columns(columns =>
      columns.Select().Width("6%").HtmlAttributes(new { @class = "checkbox-align" }).HeaderHtmlAttributes(new { @class = "checkbox-align" });
      columns.Bound(p => p.ProductName)
                  @"<div class='product-photo'
                      style='background-image: url(" + @Url.Content("~/shared/web/foods/#:data.ProductID#.jpg") + ");'></div><div class='product-name'>#: ProductName #</div>").Width(300);
      columns.Bound(p => p.Discontinued).Title("In Stock").Width("30%")
                          .ClientTemplate("<span id='badge_#=ProductID#' class='badgeTemplate'></span>");        
      columns.Bound(p => p.CustomerRating).Title("Rating").Width("16%").Editable("returnFalse").ClientTemplate(Html.Kendo().Rating()
              .HtmlAttributes(new { data_bind = "value: CustomerRating" })
      columns.Bound(p => p.Country.CountryNameLong).Title("Country").EditorTemplateName("Country").ClientTemplate(
          @"<div class='k-text-center'><img src='" + @Url.Content("~/shared/web/country-flags/#:data.Country.CountryNameShort#.png") + "' alt='#: data.Country.CountryNameLong#' title='#: data.Country.CountryNameLong#' width='30' /></div>").Width("12%");
      columns.Bound(p => p.TargetSales).Editable("returnFalse").Title("Target Sales")
                    .Legend(legend => legend
                    .HtmlAttributes(new { data_series= "[{data: [#=TargetSales#], labels:{visible:true, format:'{0}%', background:'none'}}]"})
                        .ChartArea(chartArea => chartArea.Margin(0).Width(180))
                        .CategoryAxis(axis => axis
                            .MajorGridLines(lines => lines.Visible(false))
                            .MajorTicks(lines => lines.Visible(false))
                        .ValueAxis(axis => axis
                            .Labels(l => l.Visible(false))
                            .MinorTicks(lines => lines.Visible(false))
                            .MajorGridLines(lines => lines.Visible(false))
                        .Tooltip(tooltip => tooltip
  .ToolBar(toolbar =>
  .Reorderable(r => r.Columns(true))
  .Events(events => events.DataBound("onDataBound"))
  .DataSource(dataSource => dataSource
      .Events(events => events.Error("error_handler"))
      .Model(model =>
          model.Id(p => p.ProductID);
          model.Field(p => p.ProductID).Editable(false);
          model.Field(p => p.Discontinued).Editable(false);
          model.Field(p => p.TotalSales).Editable(false);
          model.Field(p => p.Category).DefaultValue(new CategoryViewModel() { CategoryID= 8, CategoryName="Seafood"});
          model.Field(p => p.Country).DefaultValue(new CountryViewModel() { CountryNameLong="Bulgaria", CountryNameShort="bg"});
      .Group(group=>group.Add("Category.CategoryName", typeof(string), ListSortDirection.Descending))
      .Create("DetailProducts_Create", "Grid")
      .Read("DetailProducts_Read", "Grid")
      .Update("DetailProducts_Update", "Grid")
      .Destroy("DetailProducts_Destroy", "Grid")
<script type="text/javascript">
  function error_handler(e) {
      if (e.errors) {
          var message = "Errors:\n";
          $.each(e.errors, function (key, value) {
              if ('errors' in value) {
                  $.each(value.errors, function () {
                      message += this + "\n";

  function onDataBound(e) {
      var grid = this;
      grid.table.find("tr").each(function () {
          var dataItem = grid.dataItem(this);
          var type = dataItem.Discontinued ? 'success' : 'error';
          var text = dataItem.Discontinued ? 'available' : 'not available';

          $(this).find('script').each(function () {

              type: type,
              value: text,

          kendo.bind($(this), dataItem);

  function returnFalse() {
      return false;

  .k-grid tr .checkbox-align {
      text-align: center;
      vertical-align: middle;

  .product-photo {
      display: inline-block;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-size: 32px 35px;
      background-position: center center;
      vertical-align: middle;
      line-height: 32px;
      box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
      margin-right: 5px;

  .product-name {
      display: inline-block;
      vertical-align: middle;
      line-height: 32px;
      padding-left: 3px;
      width: 70%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

  .k-grid .checkbox-align {
    text-overflow: clip;

  .k-rating-container .k-rating-item {
      padding: 4px 0;

      .k-rating-container .k-rating-item .k-icon {
          font-size: 16px;

  .dropdown-country-wrap {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      white-space: nowrap;

      .dropdown-country-wrap img {
          margin-right: 10px;

  #grid .k-grid-edit-row > td > .k-rating {
      margin-left: 0;
      width: 100%;
      .Title("The Boeing Company \n (NYSE:BA)")
      .DataSource(ds => ds.Read(read => read
          .Action("_BoeingStockData", "Financial")
      .Series(series =>
          series.Candlestick(s => s.Open, s => s.High, s => s.Low, s => s.Close);
      .Navigator(nav => nav
          .Series(series =>
              series.Area(s => s.Close);
<div id="team-schedule">
  <div id="people">
      <input checked type="checkbox" id="alex" aria-label="Alex" value="1">
      <input checked type="checkbox" id="bob" aria-label="Bob" value="2">
      <input checked type="checkbox" id="charlie" aria-label="Charlie" value="3">
  .Date(new DateTime(2020, 6, 13))
  .StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
  .Views(views =>
      views.WorkWeekView(workWeekView =>
  .Resources(resource =>
      resource.Add(m => m.OwnerID)
          .BindTo(new[] {
              new { Text = "Alex", Value = 1, Color = "#f8a398" } ,
              new { Text = "Bob", Value = 2, Color = "#51a0ed" } ,
              new { Text = "Charlie", Value = 3, Color = "#56ca85" }
  .DataSource(d => d
      .Events(e => e.Error("onError"))
      .Model(m =>
          m.Id(f => f.TaskID);
          m.Field(f => f.Title).DefaultValue("No title");
          m.Field(f => f.OwnerID).DefaultValue(1);
          m.RecurrenceId(f => f.RecurrenceID);
      .Read("Read", "Scheduler")
      .Create("Create", "Scheduler")
      .Destroy("Destroy", "Scheduler")
      .Update("Update", "Scheduler")
      .Filter(filters =>
          filters.Add(model => model.OwnerID).IsEqualTo(1).Or().IsEqualTo(2) Or().IsEqualTo(3);

<script type="text/javascript">

function onError(e) {

  var errorMessage = "";
  if (e.errors) {
      for (var error in e.errors) {
          errorMessage += e.errors[error].errors[0] + " ";


  $(function () {
      $("#people :checkbox").change(function (e) {
          var checked = $.map($("#people :checked"), function (checkbox) {
              return parseInt($(checkbox).val());

          var filter = {
              logic: "or",
              filters: $.map(checked, function (value) {
                  return {
                      operator: "eq",
                      field: "OwnerID",
                      value: value

          var scheduler = $("#scheduler").data("kendoScheduler");


  #team-schedule {
      background: url('@Url.Content("~/shared/web/scheduler/")team-schedule.png') transparent no-repeat;
      height: 115px;
      position: relative;

  #people {
      background: url('@Url.Content("~/shared/web/scheduler/")scheduler-people.png') no-repeat;
      width: 345px;
      height: 115px;
      position: absolute;
      right: 0;
  #alex {
      position: absolute;
      left: 4px;
      top: 81px;
  #bob {
      position: absolute;
      left: 119px;
      top: 81px;
  #charlie {
      position: absolute;
      left: 234px;
      top: 81px;
<script id="treeview-template" type="text/kendo-ui-template">
  #: item.text #    
  # if (!item.items) { #
      <a class='delete-link' href='\#'></a>
  # } #
<div class="demo-section k-content">
      .DataSource(source =>
          source.Read(read => read.Action("Read_TemplateData", "TreeView"));

<script type="text/javascript">

  $(document).on("click", ".delete-link", function (e) {
      var treeview = $("#treeview").data("kendoTreeView");


  #treeview {
      width: 240px;
      margin: 0 auto;

  #treeview .k-sprite {
      background-image: url("@Url.Content("~/shared/web/treeview/coloricons-sprite.png")");

  .k-i-close-outline {
    color: red;
  .rootfolder { background-position: 0 0; }
  .folder     { background-position: 0 -16px; }
  .pdf        { background-position: 0 -32px; }
  .html       { background-position: 0 -48px; }
  .image      { background-position: 0 -64px; }

  .delete-link {
      width: 12px;
      height: 12px;
      background: transparent url("@Url.Content("~/shared/web/treeview/close.png")") no-repeat 50% 50%;
      overflow: hidden;
      display: inline-block;
      font-size: 0;
      line-height: 0;
      vertical-align: top;
      margin: 2px 0 0 3px;
      -webkit-border-radius: 5px;
      -mox-border-radius: 5px;
      border-radius: 5px;

  .k-i-close-outline {
   color: grey;
   padding-left: 5px;
   font-size: 12px;

Telerik Earns Multiple TrustRadius Best of Development 2021 awards

Telerik has won Best Feature Set and Best Customer Support. The award is based on both quantitative and qualitative feedback provided in user reviews with regards to customer support, feature set and usability.

Telerik UI for ASP.NET Core Components Key Features

ASP.NET Core Components Ready for Any UI Scenario

Cut development time and cost in half with more than 110 ASP.NET Core components for every need: navigation and layout, data management & visualization, editing, interactivity and more.

Visualize Data with Our Robust Components

Use a battle-hardened component such as Grid, Scheduler, Chart, Editor and many more, all with a ton of customization options to visualize your data.

Built-In, Yet Customizable Themes

Benefit from a variety of professionally designed built-in themes & the Telerik SAAS Theme Builder to deliver exceptional UI in no time.

Award-Winning Documentation, Code Samples & Technical Trainings

Hit the ground running with our extensive ASP.NET Core documentation, demos, docs & online technical training to achieve meaningful results in hours not months.

Outstanding Support from the Minds Behind the Product

Work in comfort knowing you have a trusted partner in the face of Telerik’s outstanding technical support team.

Web Apps Available to Any User Anywhere

Enjoy full support for accessibility standards, keyboard navigation for the tech-savvy users & respond to the user's culture to correctly format numbers, dates and helper texts.

Explore our 110+ ASP.NET Core UI Components


Build, Run, Style and Share Your Snippets


See Them in Action

Launch demos

Working with Designers? We Got You Covered!

It's easy to collaborate with your designers using Telerik UI for ASP.NET Core and the Telerik UI kits for Figma. The highly-customizable, identical components on both sides set you off to a running start to craft your own design system.

Upgrade to Telerik DevCraft Complete

Be Ready for Any Project & Technology

Save up to 50% in development time by getting 1,250+ .NET and JavaScript UI components for building web, desktop and mobile apps.

Get the Best Value for Money

Enjoy Telerik UI for ASP.NET Core along with embedded reporting and mocking tools while saving up to 90% from the upgrade price.

Telerik UI for ASP.NET Core
Support and Learning

ASP.NET Core App

Planning an ASP.NET Application

Get a free Telerik whitepaper for a high-level outline of what developers need to consider when planning an ASP.NET app, from tooling choices during development all the way through deployment and performance strategies.


Building (and Testing) Minimal APIs in ASP.NET Core 7

ASP.NET Framework and ASP.NET Core enable you to build Web Services using Web API controllers.

Telerik UI for ASP.NET Core - Overview

Telerik UI for ASP.NET Core - Overview

In the Telerik UI for ASP.NET Core update for December, catch up with what’s new about the product and get a taste of what we are preparing for you in the first release of the new 2021 in January.


What's New with
Telerik UI for ASP.NET Core Components

Telerik UI for ASP.NET Core is Compatible with .NET 6 and Visual Studio 2022

Support for .NET 6 and Visual Studio 2022

Telerik UI for ASP.NET Core suite is compatible with .NET 6 and Visual Studio 2022, ensuring you can take advantage of the latest and greatest from the .NET world.

Telerik REPL for ASP.NET Core Playground

Telerik REPL for ASP.NET Core Playground

The new cool browser-based ASP.NET Core playground for creating, saving, running, and sharing C# code snippets.

Telerik UI for ASP.NET Core Avatar Component

New ASP.NET Core Component: Avatar

Perfect for displaying entities with small photos, custom icons, avatars, or initials in your ASP.NET Core apps.

Industry-Leading Support

Expert and Timely Support

Get answers to your questions directly from the developers who build this UI suite, even during your trial period.

Contact support

Need Evaluation Help?

If you are not a developer or don't have time to evaluate our product, send us your project requirements. We will evaluate your required features and let you know how our products fit your needs.

Send us your project requirements
Get Started Waves

Next Steps

Launch demos

See Telerik UI for ASP.NET Core in action and check out how much it can do out-of-the-box.

Compare pricing

Check out the offers. Purchase an individual suite, or treat yourself to one of our bundles.

Download Free Trial

Try Telerik UI for ASP.NET Core with dedicated technical support.