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_Herowave_dblue_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>
          

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
plus-signs-bottom

Get the Best Value for Money

ROI

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

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.

.net5-image
Blog

Your Monthly December Update for Telerik UI for ASP.NET Core

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 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!

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.

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.