Native UI Components for Microsoft’s Blazor Framework

Telerik UI for Blazor

Blazor gives you the ability to write rich web apps with C# rather than JavaScript. Telerik UI for Blazor components have been built from the ground-up to ensure you experience shorter development cycles, quick iterations and cut time to market.

Try now
Demo Code Full List of Controls 
<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline" Height="500px"
             Pageable="true" PageSize=@PageSize
             OnCreate="@CreateHandler" OnDelete="@DeleteHandler" OnUpdate="@UpdateHandler">
  <GridToolBar>
    <GridCommandButton Command="Add" Icon="add">Add Product</GridCommandButton>
  </GridToolBar>
  <GridColumns>
    <GridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
    <GridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price">
      <Template>
        @(String.Format("{0:C2}", (context as Product).UnitPrice))
      </Template>
    </GridColumn>
    <GridColumn Field=@nameof(Product.UnitsInStock) Title="Units In Stock" />
    <GridCommandColumn>
      <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
      <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
      <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
      <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
    </GridCommandColumn>
  </GridColumns>
</TelerikGrid>

@code {
    public List<Product> GridData { get; set; }
    public Product ProductToEdit { get; set; }
    int PageSize = 15;
    int lastId = 0;

    protected override void OnInitialized()
    {
      GridData = new List<Product>();

      for (int i = 1; i <= 100; i++)
      {
        GridData.Add(new Product()
        {
          ProductId = i,
          ProductName = "Product" + i.ToString(),
          SupplierId = i,
          UnitPrice = (decimal)(i * 3.14),
          UnitsInStock = (short)(i * 1),
        });

        lastId = i;
      }
    }

    private void CreateHandler(GridCommandEventArgs args)
    {
      Product product = (Product)args.Item;

      product.ProductId = ++lastId;
      GridData.Insert(0, product);
    }

    private void DeleteHandler(GridCommandEventArgs args)
    {
      GridData.Remove((Product)args.Item);
    }

    private void UpdateHandler(GridCommandEventArgs args)
    {
      Product product = (Product)args.Item;

      var existing = GridData.FirstOrDefault(p => p.ProductId == product.ProductId);

      if (existing != null)
      {
        existing.ProductName = product.ProductName;
        existing.UnitPrice = product.UnitPrice;
        existing.UnitsInStock = product.UnitsInStock;
      }
    }
}
<div style="width:40%; display: inline-block;">
  <TelerikChart>
    <ChartTitle Text="Gross domestic product growth /GDP annual %/"></ChartTitle>
    <ChartLegend Visible="false"></ChartLegend>

    <ChartSeriesItems>
      <ChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series1)"></ChartSeries>
      <ChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series2)"></ChartSeries>
      <ChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series3)"></ChartSeries>
      <ChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series4)"></ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
      <ChartCategoryAxis Categories="@Categories"></ChartCategoryAxis>
    </ChartCategoryAxes>
  </TelerikChart>
</div>

<div style="width:50%; display: inline-block; margin-left:10px;">
  <TelerikChart>
    <ChartTitle Text="What is you favourite sport?"></ChartTitle>
    <ChartLegend Visible="true" Position="ChartLegendPosition.Top"></ChartLegend>

    <ChartSeriesItems>
      <ChartSeries Type="ChartSeriesType.Donut" Data="@DataForDonut" Field="@nameof(DonutData.Value)" CategoryField="@nameof(DonutData.Category)">
        <ChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
          Visible="true"
          Background="transparent"
          Template="#= dataItem.Category # - #= percentage*100 #%"></ChartSeriesLabels>
      </ChartSeries>
    </ChartSeriesItems>
  </TelerikChart>
</div>

@code {
    public class DonutData
    {
        public string Category { get; set; }
        public Int32 Value { get; set; }
    }

    public List<DonutData> DataForDonut = new List<DonutData>()
    {
        new DonutData()
        {
            Category = "Football",
            Value = 35
        },
        new DonutData()
        {
            Category = "Basketball",
            Value = 25
        },
        new DonutData()
        {
            Category = "Volleyball",
            Value = 20
        },
        new DonutData()
        {
            Category = "Rugby",
            Value = 10
        },
        new DonutData()
        {
            Category = "Tennis",
            Value = 10
        },

    };

    public class ModelData
    {
        public double Series1 { get; set; }
        public double Series2 { get; set; }
        public double Series3 { get; set; }
        public double Series4 { get; set; }
    }

    public string[] Categories = new string[] { "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011" };


    public List<ModelData> Data = new List<ModelData>()
    {
        new ModelData()
        {
            Series1 = 3.907,
            Series2 = 4.743,
            Series3 = 0.01,
            Series4 = 1.988
        },
        new ModelData()
        {
            Series1 = 7.943,
            Series2 = 7.295,
            Series3 = 0.375,
            Series4 = 2.733
        },
        new ModelData()
        {
            Series1 = 7.848,
            Series2 = 7.175,
            Series3 = 1.161,
            Series4 = 3.994
        },
        new ModelData()
        {
            Series1 = 9.284,
            Series2 = 6.376,
            Series3 = 0.684,
            Series4 = 3.464
        },
        new ModelData()
        {
            Series1 = 9.263,
            Series2 = 8.153,
            Series3 = 3.7,
            Series4 = 4.001
        },
        new ModelData()
        {
            Series1 = 9.801,
            Series2 = 8.535,
            Series3 = 3.269,
            Series4 = 3.939
        },
        new ModelData()
        {
            Series1 = 3.89,
            Series2 = 5.247,
            Series3 = 1.083,
            Series4 = 1.333
        },
        new ModelData()
        {
            Series1 = 8.238,
            Series2 = 7.832,
            Series3 = 5.127,
            Series4 = 2.245
        },
        new ModelData()
        {
            Series1 = 9.552,
            Series2 = 4.3,
            Series3 = 3.69,
            Series4 = 4.339
        },
        new ModelData()
        {
            Series1 = 6.855,
            Series2 = 4.3,
            Series3 = 2.995,
            Series4 = 2.727
        }
    };

  }

@using blazor.Data
 
@inject AppointmentService Service
 
<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" Height="500px">
  <SchedulerViews>
    <SchedulerDayView StartTime="@DayStart" />
    <SchedulerWeekView StartTime="@DayStart" />
    <SchedulerMultiDayView StartTime="@DayStart" />
  </SchedulerViews>
</TelerikScheduler>
 
@code {
  List<Appointment> Appointments = new List<Appointment>();
  public DateTime StartDate { get; set; }
  public SchedulerView CurrView { get; set; } = SchedulerView.Week;
 
  public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);
 
  protected override async Task OnInitializedAsync()
  {
    StartDate = Service.GetStart();
 
    Appointments = await Service.GetAppointmentsAsync();
  }
 
  void UpdateAppointment(SchedulerUpdateEventArgs args)
  {
    Appointment item = (Appointment)args.Item;
    var matchingItem = Appointments.FirstOrDefault(a => a.Id == item.Id);
    if (matchingItem != null)
    {
      matchingItem.Title = item.Title;
      matchingItem.Description = item.Description;
      matchingItem.Start = item.Start;
      matchingItem.End = item.End;
      matchingItem.IsAllDay = item.IsAllDay;
    }
  }
 
  void AddAppointment(SchedulerCreateEventArgs args)
  {
    Appointment item = args.Item as Appointment;
    Appointments.Add(item);
  }
 
  void DeleteAppointment(SchedulerDeleteEventArgs args)
  {
    Appointment item = (Appointment)args.Item;
    Appointments.Remove(item);
  }
}

<div class="calendar-wrap">
  <div class="col col-sm">
    <div class="switch-view-wrap">
      <h2>Switch View</h2>

      <ul class="fieldlist">

        @foreach (var possibleCalendarView in Enum.GetValues(typeof(CalendarView)))
        {
          <li>
            <input type="radio" name="calendarView" id="@possibleCalendarView" value="@possibleCalendarView" @onchange="ChangeCalendarView" class="k-radio" checked="@(String.Equals(possibleCalendarView.ToString(), CalendarViewValue.ToString()))" />
            <label class="k-radio-label" for="@possibleCalendarView">@possibleCalendarView View </label>
          </li>
        }
      </ul>
    </div>
  </div>

  <div class="col col-lg">
    <TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple"
                     Date="@startDate"
                     @bind-View="@CalendarViewValue">
    </TelerikCalendar>
  </div>
</div>

@code {
  private DateTime startDate = new DateTime(2019, 4, 1);//set the initial date of the calendar

  public CalendarView CalendarViewValue { get; set; } = CalendarView.Month;

  public void ChangeCalendarView(ChangeEventArgs args)
  {
    CalendarViewValue = (CalendarView)Enum.Parse(typeof(CalendarView), args.Value.ToString());
  }
}

<style>
  .calendar-wrap {
    width: 100%;
    height: 340px;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: center;
  }
  .calendar-wrap .col {
    padding: 0 30px;
    box-sizing: border-box;
  }
  .calendar-wrap h2 {
    margin-top: 0;
    margin-bottom: 1.5em;
  }
  .col-sm {
    width: 40%;
  }
  .col-lg {
    width: 60%;
  }
  .switch-view-wrap {
    width: 150px;
    margin-left: auto;
  }
  .fieldlist {
    margin-bottom: 0 0 -1em;
  }
  .fieldlist li {
    padding-bottom: 1.5em;
  }
</style>
@using System.ComponentModel.DataAnnotations

<div class="dropdownlist-form">

  <div class="header">
    <h3>Product Details</h3>
  </div>

  <EditForm Model="@category" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary></ValidationSummary>

    <label>Categories</label>
    <TelerikDropDownList Data="@CategoryData" @bind-Value="@category.CategoryId" DefaultItem="@DefaultCategory" ValueField="CategoryId" TextField="CategoryName">
    </TelerikDropDownList>

    <label>Products</label>
    <TelerikDropDownList Data="@DropDownListData" @bind-Value=@SelectedValue PopupHeight="170" DefaultItem="@DefaultItem" ValueField="ProductId" TextField="ProductName">
    </TelerikDropDownList>

    <label>Shipping Address</label>
    <TelerikDropDownList Data="@OrderData" @bind-Value=@order.OrderId PopupHeight="170" DefaultItem="@DefaultOrder" ValueField="OrderId" TextField="OrderName">
    </TelerikDropDownList>

    <div class="submit-btn-wrap">
      <button class="k-button k-primary" type="submit">Submit</button>
    </div>

    @if (SuccessMessage != string.Empty)
    {
      <div class="k-notification k-notification-success">
        @SuccessMessage
      </div>
    }
  </EditForm>
</div>

@code  {

  string[] categoriesList = { "Seafood", "Confections", "Dairy Products", "Meat/Poultry", "Beverages" };
  string[] productsList = { "Boston Crab Meat", "Teatime Chocolate Biscuits", "Tofu", "Mascarpone", "Chai" };
  string[] orderList = { "Marseille", "Rio de Janeiro", "Lyon", "Bern", "Genève" };

  public IEnumerable<Product> DropDownListData { get; set; }
  public Product DefaultItem { get; set; } = new Product()
  {
    ProductId = 0,
    ProductName = "Select a product..."
  };

  public int SelectedValue { get; set; } = 2;

  protected override void OnInitialized()
  {

    List<Product> products = new List<Product>();
    for (int i = 0; i < 5; i++)
    {
      products.Add(new Product()
      {
        ProductId = i,
        ProductName = productsList[i],

      });
    }

    DropDownListData = products.AsQueryable();

    List<DropDownValidationModel> categories = new List<DropDownValidationModel>();
    for (int i = 0; i < 5; i++)
    {
      categories.Add(new DropDownValidationModel()
      {
        CategoryId = i,
        CategoryName = categoriesList[i],
      });
    }

    CategoryData = categories.AsQueryable();

    List<Order> orders = new List<Order>();
    for (int i = 0; i < 5; i++)
    {
      orders.Add(new Order()
      {
        OrderId = i,
        OrderName = orderList[i],
      });
    }

    OrderData = orders.AsQueryable();

    base.OnInitialized();
  }

  class DropDownValidationModel
  {
    [Required(ErrorMessage = "Choose a category")]
    public int? CategoryId { get; set; }

    public string CategoryName { get; set; }
  }

  IEnumerable<DropDownValidationModel> CategoryData { get; set; }
  DropDownValidationModel category { get; set; } = new DropDownValidationModel();
  DropDownValidationModel DefaultCategory { get; set; } = new DropDownValidationModel()
  {
    CategoryName = "Choose a category"
  };

  string SuccessMessage = string.Empty;

  void HandleValidSubmit()
  {
    SuccessMessage = "Form Submitted Successfully!";
  }

  class Order
  {
    public int? OrderId { get; set; }

    public string OrderName { get; set; }
  }

  IEnumerable<Order> OrderData { get; set; }
  Order order { get; set; } = new Order();
  Order DefaultOrder { get; set; } = new Order()
  {
    OrderId = 0,
    OrderName = "Choose a shipping city"
  };

}

<style>
  .dropdownlist-form {
    max-width: 340px;
    padding: 20px 0;
  }
  .dropdownlist-form form {
    padding: 15px 20px;
  }
  .dropdownlist-form h3 {
    color: #454545;
    font-weight: 700;
  }
  .dropdownlist-form .header:before {
    bottom: 12px;
  }
  .dropdownlist-form label {
    font-size: 14px;
  }
  .dropdownlist-form .k-widget {
    margin-bottom: 20px;
  }
  .submit-btn-wrap {
    margin-top: 10px;
    text-align: right;
  }
  .k-notification {
    margin-top: 20px;
  }
  .validation-errors {
    margin-bottom: 20px;
  }
  .validation-message {
    color: #f31700;
  }
</style>

Explore our Native UI Blazor Components

Data Management

Navigation

Blazor UI Components Key Features

Template

Template Support

With native components, the Telerik UI for Blazor Grid templates can fully utilize the best features of Blazor to highly customize the user experience.

paralel-min

Native Blazor Validation Integration

The UI for Blazor suite supports and integrates seemlessly into Blazor's Forms and Validation infrastructure. All Telerik UI for Blazor Input components work out of the box when placed inside an EditForm, respond to EditContext changes and provide default invalid styles.

modern_design

Modern design

Telerik UI for Blazor provides Material, Bootstrap and Default themes that you can use to achieve modern design of your Blazor application. Thanks to the Theme Builder you can even customize the existing themes or create a new one to fit your needs.

Get The Best Value for Your Money

SaveMoney

ROI / Cut Development Time

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.

Expert-and-Timely-Support

Leading Support

Get answers to your questions directly from the developers who build this UI suite, even during your trial period.

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.

buy-as-part-of-devcraft-blue-109-131

Buy 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

New Grid feature: Row Virtualization

Fast, robust and user-friendly way to browse large volumes of data with Telerik Blazor Grid Virtualization.

Accessibility and Keyboard Navigation

Make your Blazor apps Accessible for everyone and let them navigate swiftly using Keyboard.

Localization and Globalization

Go Global with your Blazor App - translate your app in any language, render date formats, currencies and numbers based on users' CurrentCulture.

More new and planned features

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
Blazar_background-min

Ready to Try it Out?

Try now