Visual Studio 2019 Support

Telerik UI for ASP.NET Core Components

The most complete UI toolset for cross-platform responsive web and cloud development. Powered by Kendo UI

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;

Key Features

UI Framework for Any App Scenario

Cut development time, while delivering rich, powerful, modern websites and apps. Telerik® UI for ASP.NET Core offers 80+ jQuery-based components ranging from must-have HTML helpers for every app like Grids, Dropdowns and Menus to advanced line-of-business controls such as Charts, Gantt, Diagram, Scheduler, PivotGrid and Maps.

Despite the variety of built-in functionality the product offers, we continue to release new functionality based on customer feedback three times a year. Feel free to suggest product ideas for the community to vote on in Telerik feedback portal—the more votes your suggestion receives, the higher priority it becomes to introduce into our roadmap.


HTML5 Rendering Powered by Kendo UI

Telerik ASP.NET Core components are comprised of Telerik award-winning Kendo UI HTML5/JS widgets and their server-side wrappers for ASP.NET Core. The wrappers generate the JavaScript and HTML required by the Kendo UI widgets enabling you to use C# to configure them. Telerik UI for ASP.NET Core ships the same built-in functionality as Kendo UI, but offers Core-specific features on top, including:

  • Server-side data binding and in some cases server-side rendering
  • Support for unobtrusive validation based on Data Annotation attributes
  • Visual Studio Intellisense for the server-side configuration syntax
  • Visual Studio Extensions for automatic creation of new applications
  • Built-in editor templates and more

Mobile Support and Responsiveness

Telerik® UI for ASP.NET Core saves you time and effort when implementing responsive design practices, because the controls take care of them out-of-the-box or with the change of a single property:

  • All components render larger clickable areas on small screens and scale proportionately to the container in which they are placed
  • All components integrate well with grid-layout frameworks, such as Bootstrap and Zurb Foundation
  • The complex and popular components, such as Grid and Scheduler, serve different rendering on small screens to provide optimal user experience.

Simple Server-Side Data Binding and CRUD

If you are familiar with server-side programming, it can be hard to work with data in HTML5. Telerik UI for ASP.NET Core makes data binding simple. Use your existing server-side data access technologies to quickly bind data to the UI widgets via our DataSource component.  With it, you can define endpoints for read and data editing operations, as well as mappings for requests between .NET and JavaScript.


Built-In, Yet Customizable Themes

With UI for ASP.NET Core, you build sleek, modern apps without a designer on-hand. Registering the CSS styles of the theme on the page is all it takes to theme your project with one of the 11 out-of-the-box skins. To apply the professional themes on normal HTML elements, like buttons and inputs, simply use the basic CSS classes included in UI for ASP.NET Core.

Transforming the ready-made themes to perfectly match your site is also easy when using the ThemeBuilder tool. With the point-and-click configuration wizard, your new themes are ready in a matter of seconds.


Use Bower and Nuget

Popular package management and task automation solutions such as NuGet, Bower and Gulp are made first class citizens in ASP.NET Core. That means every web developer can use Bower for client packages, NuGet for server packages and Grunt/Gulp for compilation, minification, etc., when building web apps.

UI for ASP.NET Core takes advantage of these tools by providing a Bower feed for its client scripts, and a NuGet feed, hosted on our NuGet server, for its server wrappers implementation (see this help topic for details). Furthermore, you can build a custom script from the source using Grunt by following these steps.

nuget-and-bower ASPNET Core UI Telerik widget

Cross-Platform Development

Probably the most significant feature of ASP.NET Core is the introduction of the new light and modular .NET Core runtime, which is OS-neutral. For the first time in .NET history, you can build applications and deploy them on Windows, Linux and Mac OSX devices. And on top of all that, it’s an open source solution so it’s free!

UI for ASP.NET Core fully supports the .NET Core runtime, and helps you build beautiful responsive web experiences crossing the boundaries of the Windows world.


Tag Helpers

Tag Helpers are the new HTML-friendly way to create views and define UI in ASP.NET Core applications. They are recommended as the better alternative to traditional MVC HTML helpers, while still allowing you to extend the elements with server MVC functionality. Tag Helpers are also much more “understandable” to front end developers and designers.

We are proud to announce that Tag Helpers are now available for all Telerik UI for ASP.NET Core  widgets, including Gauge, Grid, Button, Chart, DatePicker, TimePicker, DataTimePicker, Button, Window,  NumericTextBox and more.

mvc6-tag-helpers  ASPNET Core UI Telerik

Conversational UI - Modern UI for Chatbots

The Conversational UI control (aka RadChat) is a new control intended to be used with various chat bot services. Highlights of the features include:

  • Built-in hero cards
  • Built-in suggested actions
  • Built-in simple message and typing indicator
  • Custom card/attachment templates
  • Easy connectivity to chat bot services (Azure/Microsoft Bot Framework,, Amazon Lex)
conversational UI resized

See Them in Action

Launch demos

See Them in Action

Launch demos

Upgrade to Telerik DevCraft Complete

Well-equipped for Any Future Project

Get 1,250+ .NET and JavaScript components for
building web, desktop and mobile apps and save up
to 50% in development time.

Get the Best Value for Money

Buy Telerik UI for ASP.NET Core plus 15 products, embedded
reporting and mocking tools and save up to 90%
from the upgrade price.

Get the Best Value for Money


You Can Bank On

We combine our winning client-side technology and our server-side solutions in price-friendly bundles. JavaScript, ASP.NET, PHP, and JSP – the complete package!

For one low price you get the individual technologies you need for your specific project including our extensive library of components, three major update releases per year, and flexible support options. Value and convenience in one package.

Slash Development Time

Kendo UI and UI for ASP.NET MVC can dramatically reduce the time you spend coding and testing. Our high-quality components drop right into your app providing an enhanced user experience and advanced functionality. Works great and looks great too. Great demos and extensive documentation will get you up and running in no time.

Great demos and excellent documentation are here to get you coding on your specific project within hours.

Buy it as Part of DevCraft

Telerik .NET and Kendo UI JavaScript components and Reporting and Productivity tools enable you to build modern and high-performant apps on any web, desktop or mobile platform—fast. Comes with flexible support options designed to cover your every need.

Optimize your time and budget by taking advantage of our intuitive APIs, thousands of demos with source code availability, comprehensive documentation and a full assortment of VS templates.

More about DevCraft
See pricing details

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

Telerik UI for ASP.NET Core .NET Core Support

Official Support for the latest preview version of .NET Core 5

We are now supporting the latest preview version of .NET Core 5

Telerik UI for ASP.NET Core ImageEditor

New Component: ASP.NET Core Image Editor

You can now let users edit images directly in their browser! Add the Telerik UI for ASP.NET Core Image Editor and skip on using third-parties or external applications.

Telerik UI for ASP.NET Core Wizard

New component: ASP.NET Core Wizard

Don’t overwhelm you users! With the new Telerik UI for ASP.NET Core Wizard component, walk your users through multi-step processes with ease and customize every step of the way!

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.


ASP.NET Core 2.1 Goes RC: An Interview with Daniel Roth

Catch all the latest news about the RC release of ASP.NET Core 2.1 in Ed Charbeneau's interview with Daniel Roth at Microsoft Build 2018.


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.