Fully compatible with Blazor WebAssembly 3.2.0 official release!

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.

Download Free Trial
Demo Code Full List of Controls 
@using blazor.Data

@inject GridDataService Service

<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) Width="25%" Title="Product Name" />
  <GridColumn Field=@nameof(Product.ListPrice) Title="Price" Width="20%">
    <Template>
      @(String.Format("{0:C2}", (context as Product).ListPrice))
    </Template>
  </GridColumn>
  <GridColumn Field=@nameof(Product.UnitsInStock) Title="In Stock" Width="20%" >
    <Template>
      @{
        bool isInStock = ( as Product).UnitsInStock > 0 ? true : false;

          if (isInStock)
          {
              <span class="k-badge k-badge-success k-badge-rounded">Available</span>
          }
          else
          {
              <span class="k-badge k-badge-error k-badge-rounded">Not Available</span>
          }
      }
    </Template>
  </GridColumn>
  <GridColumn Field=@nameof(Product.Size) Title="Size" Width="10%" ></GridColumn>
  <GridCommandColumn Width="25%" >
    <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 = 10;
  int lastId = 0;

  protected override async Task OnInitializedAsync()
  {
    GridData = await Service.GetProductsAsync();
  }

  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;
      existing.Color = product.Color;
      existing.Size = product.Size;
    }
  }
}
<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

File Upload & Management

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 Component: Blazor Upload

Let users upload files to your application with one line of code with the Telerik UI for Blazor Upload component.

New Component: Blazor ListView

The Telerik UI for Blazor ListView component lets you display lists of items from any data source you need to.

New Grid feature: Blazor Grid state management

Access all new Grid enhancements – Persist State, Export to Excel, Support for nested models, Column Virtualization and much more!

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?

Download Free Trial