Visual Studio 2019 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. 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 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

ASP.NET Core App
Whitepaper

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.

How ToT2 Dark_270x123
Blog

Select Tag Helper in ASP.NET Core MVC

In this article, we explore tag helpers: what they are, which ones are built in, select tag helper, setting selected options, disabling options and option groups using a simple example.

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 .NET 6

Compatibility with .NET 6 preview 1

We are now supporting the first preview version of .NET Core 6

New Component: Floating Action Button

New Component: Floating Action Button

Speed up your users’ productivity by spotlighting the most often used commands with the brand new ASP.NET Core Floating Action Button component.

New Component: Bottom Navigation

New Component: Bottom Navigation

Present users with the quickest way to jump to the top-level screen they want by using the Telerik UI for ASP.NET Core Bottom Navigation 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.