Visual Studio 2022 Support

Telerik UI for ASP.NET Core Components

Create modern web apps with optimal quality using the most complete set of ASP.NET Core UI components for any scenario!

Download Free Trial

NEW

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

LightBrandElement_Hero
ninja-peeking
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.DetailProductViewModel>()
  .Name("grid")
  .Columns(columns =>
  {
      columns.Select().Width("6%").HtmlAttributes(new { @class = "checkbox-align" }).HeaderHtmlAttributes(new { @class = "checkbox-align" });
      columns.Bound(p => p.ProductName)
              .ClientTemplate(
                  @"<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()
              .Name("rating_#=ProductID#")
              .Min(1)
              .Max(5)
              .Label(false)
              .HtmlAttributes(new { data_bind = "value: CustomerRating" })
              .Selection("continuous")
              .ToClientTemplate().Value
          );
      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")
                    .ClientTemplate(Html.Kendo().Sparkline()
                    .Name("chart_#=ProductID#")
                    .Legend(legend => legend
                        .Visible(false)
                    )
                    .Type(SparklineType.Bar)
                    .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))
                        )
                        .ChartArea(c=>c.Background("transparent"))
                        .ValueAxis(axis => axis
                            .Numeric()
                            .Min(0)
                            .Max(130)
                            .Visible(false)
                            .Labels(l => l.Visible(false))
                            .MinorTicks(lines => lines.Visible(false))
                            .MajorGridLines(lines => lines.Visible(false))
                        )
                        .Tooltip(tooltip => tooltip
                            .Visible(false)
                        ).ToClientTemplate().Value
                   );
  })
  .ToolBar(toolbar =>
  {
      toolbar.Search();
      toolbar.Excel();
      toolbar.Pdf();
  })
  .ColumnMenu(col=>col.Filterable(false))
  .Height(700)
  .Pageable()
  .Sortable()
  .Navigatable()
  .Resizable(r=>r.Columns(true))
  .Reorderable(r => r.Columns(true))
  .Filterable()
  .Scrollable()
  .Events(events => events.DataBound("onDataBound"))
  .DataSource(dataSource => dataSource
      .Ajax()
      .Batch(true)
      .PageSize(20)
      .AutoSync(true)
      .ServerOperation(false)
      .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))
      .Aggregates(agg=>agg.Add(field=>field.TotalSales).Sum())
      .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";
                  });
              }
          });
          alert(message);
      }
  }

  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 () {
              eval($(this).html());
          });

          $(this).find(".badgeTemplate").kendoBadge({
              type: type,
              value: text,
          });
         

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

  function returnFalse() {
      return false;
  }
</script>


<style>
  .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%;
  }
</style>
          
@(Html.Kendo().StockChart()
      .Name("stockChart")
      .Title("The Boeing Company \n (NYSE:BA)")
      .DataSource(ds => ds.Read(read => read
          .Action("_BoeingStockData", "Financial")
      ))
      .DateField("Date")
      .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);
          })
          .Select(
              DateTime.Parse("2008/02/05"),
              DateTime.Parse("2020/10/07")
          )
      )
  )
<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">
  </div>
</div>
@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
  .Name("scheduler")
  .Date(new DateTime(2020, 6, 13))
  .StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
  .Height(400)
  .Views(views =>
  {
      views.DayView();
      views.WorkWeekView(workWeekView =>
      {
          workWeekView.Selected(true);
      });
      views.WeekView();
      views.MonthView();
      views.AgendaView();
      views.TimelineView();
  })
  .Timezone("Etc/UTC")
  .Resources(resource =>
  {
      resource.Add(m => m.OwnerID)
          .Title("Owner")
          .DataTextField("Text")
          .DataValueField("Value")
          .DataColorField("Color")
          .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) {
  this.cancelChanges();

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

  alert(errorMessage);
}

  $(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");

          scheduler.dataSource.filter(filter);
      });
  })
</script>

<style>
  #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;
  }
</style>
<script id="treeview-template" type="text/kendo-ui-template">
  #: item.text #    
  # if (!item.items) { #
      <a class='delete-link' href='\#'></a>
  # } #
</script>
<div class="demo-section k-content">
  @(Html.Kendo().TreeView()
      .Name("treeview")
      .Checkboxes(c=>c.CheckChildren(true))
      .DragAndDrop(true)
      .TemplateId("treeview-template")  
      .DataSource(source =>
      {
          source.Read(read => read.Action("Read_TemplateData", "TreeView"));
      })    
  )
</div>

<script type="text/javascript">

  $(document).on("click", ".delete-link", function (e) {
      e.preventDefault();
      var treeview = $("#treeview").data("kendoTreeView");
      treeview.remove($(this).closest(".k-item"));
  });

</script>

<style>
  #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;
  }
</style>
          
trust-radius-badge

Telerik Earns Multiple TrustRadius Best of Development 2021 awards

Telerik has won Best Feature Set and Best Customer Support.

trust-radius-badge

Telerik UI Earns TrustRadius' 2021 Top Rated Award

Progress Telerik UI has earned TrustRadius’ Top Rated Award for Software Components and .NET Development.

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 100 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 100+ ASP.NET Core UI Components

BrandElement_Botom_Ninja-min

See Them in Action

Launch demos

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

lamps
Whitepaper

Review of Telerik toolsets for ASP.NET Web Forms and Core

This guide aims to assist developers in familiarizing quickly with the overall idea of ASP.NET Web Forms and ASP.NET Core and what Telerik has to offer for both technologies. It also provides couple of fundamental steps for customers who’ve decided to create a new application based on ASP.NET Core, or modernize their existing Web Forms App by switching to a Core App.

DotNetT2 Light_270x123
Blog

Your Guide to REST API Versioning in ASP.NET Core

Since ASP.NET Core 3.1, you have the ability to version your APIs using a Microsoft NuGet package. Learn how to use this package to version your APIs easily.

Telerik UI for ASP.NET Core - Overview
Video

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.

Services

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

Telerik UI for ASP.NET Core TaskBoard

New Component: TaskBoard

Users can now easily track work progress by managing and organizing tasks in workflows like “in progress”, “finished” and “upcoming” with the Telerik UI for ASP.NET Core TaskBoard component.

Telerik UI for ASP.NET Core Skeleton

New Component: Skeleton

Create an accurate representation of how content is going to be displayed even before it’s loaded to improve user experience with the Telerik UI for ASP.NET Core Skeleton container.

Telerik UI for ASP.NET Core ActionSheet

New Component: ActionSheet

Speed up your users’ productivity by placing the possible actions they can take right at their fingertips with the brand new ASP.NET Core ActionSheet component.

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.