Elements Wave lBlue Hero

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

NEW

*Includes access to online technical training to speed-up your onboarding.

ninja-peeking
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>
flows_end_section

Explore our Native UI Blazor Components

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.

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

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.

ninja-v1-opt
plus-signs-bottom

Get The Best Value for Your Money

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.

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

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.

Learn more
See pricing details

What's New

Telerik UI for Blazor TileLayout

New Component: TileLayout

Help your users organize their work with the sleek UI of the Telerik UI for Blazor TileLayout control!

Telerik UI for Blazor TreeList

New Component: TreeList

The brand new Telerik UI for Blazor TreeList is a powerful list container displaying hierarchial relationships of the underlying data!

Telerik UI for Blazor Editor

New Component: Editor

With the new Telerik UI for Blazor Editor, users can now create rich text and visual documents without leaving the confines of your app!

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

Background-NextSteps

Ready to Try it Out?

Download Free Trial