landing_hero_bg_all-min

Easily Build Modern
Cross-Platform Web and Cloud Apps

The ultimate UI ASP.NET Core suite that delivers beautiful web apps using over 100+ full-featured components to cover any app scenario

trust-radius-badge
Download Free Trial

*no credit card required

See Our Most Popular ASP.NET Core Components

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

Kendo UI Earns 2020 TrustRadius Top Rated Award

Progress Kendo UI has earned TrustRadius's Top Rated Award for App Development Platform. The awards are based
entirely on customer satisfaction ratings.

Download Free Trial

*no credit card required

How Does Telerik UI for ASP.NET Core Ease Development?

Cut development time and cost with more than 100 ASP.NET Core components for every need

Deliver exceptionally looking UI using a variety of professionally designed built-in themes & the Telerik SAAS Theme Builder

Support culture-specific data formats while fully maintaining accessibility standards

Accelerate Your Start with the Most Extensive Demos, Docs & Technical Trainings

Download Free Trial

*no credit card required


inverted-top-curve-darkblue

Telerik UI for Blazor Sample Apps

See our high-performing Grid plus 50 stunning truly native easy-to-customize UI components in action.

 
 
 
8/10 Ease of Use
9.5/10 Quality of Support
9/10 Ease of Setup
big-waves-plus-signs_graphic

Get Started with Telerik UI for ASP.NET Core

Download a 30-day trial and measure how much more productive you can be!

  • Over а 100 full-featured ASP.NET Core UI components to cover every need

  • Popular package management and task automation solutions such as NuGet, Bower and Gulp are supported by Telerik UI for ASP.NET Core

  • Outstanding support with 97% customer satisfaction rating from the minds behind the product

Download Free Trial

Includes free 30-day dedicated support to help you complete a successful evaluation

What Developers Say

I've been testing Blazor components from a variety of providers and hands-down, the Telerik ones are the best - great UX, fast, easy to extend/implement.

Chris Woodard Technical Consultant, Avisra

Very happy with the current control set, the progress to release new controls and the extending of current functionality. The controls are fast and easy to implement. Support is one of the best I've had to deal with. Friendly response and they always try to help you with examples, custom made for you examples and if what you want/need is not yet possible they try to find a workaround for you.

Jurgen Mangé , SGS Belgium NV

I saw Telerik UI components in YouTube videos and then I loved it. It is going to be a blast using them!

M Imamul Hassan Khan Developer, Xenon Solutions Ltd.

I'm excited to see partners like Telerik creating custom UI controls for Blazor. The Telerik UI controls make building beautiful web apps with lots of rich functionality sooooo easy!

Daniel Roth Program Manager, Microsoft