Develop Blazor applications in half the time with a high-performing Grid and
75+ truly native, easy-to-customize UI components to cover any requirement.
NEW
*Includes access to online technical training to speed-up your onboarding.
Telerik has won Best Feature Set and Best Customer Support. The award is based on both quantitative and qualitative feedback provided in user reviews with regards to customer support, feature set and usability.
<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline" Height="450px" Width="100%" Pageable="true" PageSize="10" Resizable="true" Reorderable="true" FilterMode="@GridFilterMode.FilterMenu" Groupable="true" Sortable="true" SortMode="@SortMode.Multiple" OnCreate="@CreateHandler" OnDelete="@DeleteHandler" OnUpdate="@UpdateHandler"> <GridToolBar> <GridCommandButton Command="Add" Icon="add">Add Product</GridCommandButton> <GridCommandButton Command="ExcelExport" Icon="file-excel">Export to Excel</GridCommandButton> </GridToolBar> <GridExport> <GridExcelExport FileName="telerik-grid-export" AllPages="true" /> </GridExport> <GridColumns> <GridColumn Field=@nameof(Product.ProductName) Width="220px" Title="Product Name" /> <GridColumn Field=@nameof(Product.ListPrice) Title="Price" Width="100px" DisplayFormat="{0:C2}" /> <GridColumn Field=@nameof(Product.UnitsInStock) Title="In Stock" Width="100px"> <Template> @{ bool isInStock = (context as Product).UnitsInStock > 0 ? true : false; if (isInStock) { <span class="k-badge k-badge-md k-badge-solid k-badge-success k-badge-rounded">Available</span> } else { <span class="k-badge k-badge-md k-badge-solid k-badge-error k-badge-rounded">Not Available</span> } } </Template> </GridColumn> <GridColumn Field=@nameof(Product.Size) Title="Size" Width="80px"></GridColumn> <GridCommandColumn Width="110px" Locked="true" Resizable="false"> <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton> <GridCommandButton Command="Delete" Icon="delete"></GridCommandButton> <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Save</GridCommandButton> <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton> </GridCommandColumn> </GridColumns> </TelerikGrid>
@code { public List<Product> GridData { get; set; } int lastId = 0; protected override Task OnInitializedAsync() { GridData = GetProducts(); return base.OnInitializedAsync(); } private List<Product> GetProducts() { List<Product> data = new List<Product>(); data.Add(new Product(1, "HL Road Frame - Black, 58", 1, "Black", 1431.5, "58")); data.Add(new Product(2, "HL Road Frame - Red, 58", 1, "Red", 1431.5, "58")); data.Add(new Product(3, "Mountain Bike Socks, M", 0, "White", 9.5, "M")); data.Add(new Product(4, "Mountain Bike Socks, L", 0, "White", 9.5, "L")); data.Add(new Product(5, "Long-Sleeve Logo Jersey, S", 0, "Multi", 49.99, "S")); data.Add(new Product(6, "Long-Sleeve Logo Jersey, M", 0, "Multi", 49.99, "M")); data.Add(new Product(7, "Long-Sleeve Logo Jersey, L", 0, "Multi", 49.99, "L")); data.Add(new Product(8, "Long-Sleeve Logo Jersey, XL", 0, "Multi", 49.99, "XL")); data.Add(new Product(9, "HL Road Frame - Red, 62", 1, "Red", 1431.5, "62")); data.Add(new Product(10, "HL Road Frame - Red, 44", 1, "Red", 1431.5, "44")); data.Add(new Product(11, "HL Road Frame - Red, 48", 1, "Red", 1431.5, "48")); data.Add(new Product(12, "HL Road Frame - Red, 52", 1, "Red", 1431.5, "52")); data.Add(new Product(13, "HL Road Frame - Red, 56", 1, "Red", 1431.5, "56")); data.Add(new Product(14, "LL Road Frame - Black, 58", 1, "Black", 337.22, "58")); data.Add(new Product(15, "LL Road Frame - Black, 60", 1, "Black", 337.22, "60")); data.Add(new Product(16, "LL Road Frame - Black, 62", 1, "Black", 337.22, "62")); data.Add(new Product(17, "LL Road Frame - Red, 44", 1, "Red", 337.22, "44")); data.Add(new Product(18, "LL Road Frame - Red, 48", 1, "Red", 337.22, "48")); data.Add(new Product(19, "LL Road Frame - Red, 52", 1, "Red", 337.22, "52")); data.Add(new Product(20, "LL Road Frame - Red, 58", 1, "Red", 337.22, "58")); data.Add(new Product(21, "LL Road Frame - Red, 60", 1, "Red", 337.22, "60")); data.Add(new Product(22, "LL Road Frame - Red, 62", 1, "Red", 337.22, "62")); data.Add(new Product(23, "ML Road Frame - Red, 44", 1, "Red", 594.83, "44")); data.Add(new Product(24, "ML Road Frame - Red, 48", 1, "Red", 594.83, "48")); data.Add(new Product(25, "ML Road Frame - Red, 52", 1, "Red", 594.83, "52")); data.Add(new Product(26, "ML Road Frame - Red, 58", 1, "Red", 594.83, "58")); data.Add(new Product(27, "ML Road Frame - Red, 60", 1, "Red", 594.83, "60")); data.Add(new Product(28, "LL Road Frame - Black, 44", 1, "Black", 337.22, "44")); data.Add(new Product(29, "LL Road Frame - Black, 48", 1, "Black", 337.22, "48")); data.Add(new Product(30, "LL Road Frame - Black, 52", 1, "Black", 337.22, "52")); data.Add(new Product(31, "HL Mountain Frame - Silver, 42", 1, "Silver", 1364.5, "42")); data.Add(new Product(32, "HL Mountain Frame - Silver, 44", 1, "Silver", 1364.5, "44")); data.Add(new Product(33, "HL Mountain Frame - Silver, 48", 1, "Silver", 1364.5, "48")); data.Add(new Product(34, "HL Mountain Frame - Silver, 46", 1, "Silver", 1364.5, "46")); data.Add(new Product(35, "HL Mountain Frame - Black, 42", 1, "Black", 1349.6, "42")); data.Add(new Product(36, "HL Mountain Frame - Black, 44", 1, "Black", 1349.6, "44")); data.Add(new Product(37, "HL Mountain Frame - Black, 48", 1, "Black", 1349.6, "48")); data.Add(new Product(38, "HL Mountain Frame - Black, 46", 1, "Black", 1349.6, "46")); data.Add(new Product(39, "HL Mountain Frame - Silver, 38", 1, "Silver", 1364.5, "38")); data.Add(new Product(40, "Road-150 Red, 62", 1, "Red", 3578.27, "62")); data.Add(new Product(41, "Road-150 Red, 44", 1, "Red", 3578.27, "44")); data.Add(new Product(42, "Road-150 Red, 48", 1, "Red", 3578.27, "48")); data.Add(new Product(43, "Road-150 Red, 52", 1, "Red", 3578.27, "52")); data.Add(new Product(44, "Road-150 Red, 56", 1, "Red", 3578.27, "56")); data.Add(new Product(45, "Road-450 Red, 58", 1, "Red", 1457.99, "58")); data.Add(new Product(46, "Road-450 Red, 60", 1, "Red", 1457.99, "60")); data.Add(new Product(47, "Road-450 Red, 44", 1, "Red", 1457.99, "44")); data.Add(new Product(48, "Road-450 Red, 48", 1, "Red", 1457.99, "48")); data.Add(new Product(49, "Road-450 Red, 52", 1, "Red", 1457.99, "52")); data.Add(new Product(50, "Road-650 Red, 58", 1, "Red", 782.99, "58")); return data; } 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.ListPrice = product.ListPrice; existing.UnitsInStock = product.UnitsInStock; existing.Color = product.Color; existing.Size = product.Size; } } }
<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)" Name="Canada"></ChartSeries> <ChartSeries Type="@ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series2)" Name="USA"></ChartSeries> <ChartSeries Type="@ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series3)" Name="Bulgaria"></ChartSeries> <ChartSeries Type="@ChartSeriesType.Line" Data="@Data" Field="@nameof(ModelData.Series4)" Name="Average Trend"></ChartSeries> </ChartSeriesItems> <ChartCategoryAxes> <ChartCategoryAxis Categories="@Categories"> <ChartCategoryAxisLabels> <ChartCategoryAxisLabelsRotation Angle="45" Align="@ChartAxisLabelsRotationAlignment.Center" /> </ChartCategoryAxisLabels> </ChartCategoryAxis> </ChartCategoryAxes> <ChartValueAxes> <ChartValueAxis> <ChartValueAxisTitle Text="Growth, %"></ChartValueAxisTitle> <ChartValueAxisLabels Format="{0:N0}%"></ChartValueAxisLabels> </ChartValueAxis> </ChartValueAxes> <ChartTooltip Visible="true" Shared="true"></ChartTooltip> </TelerikChart>
<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)"> <ChartSeriesTooltip Visible="true"> <Template> @((context.DataItem as DonutData).Category) - @((context.DataItem as DonutData).Value)% </Template> </ChartSeriesTooltip> <ChartSeriesLabels Position="@ChartSeriesLabelsPosition.OutsideEnd" Visible="true" Background="transparent" Format="{0}%"> </ChartSeriesLabels> </ChartSeries> </ChartSeriesItems> </TelerikChart>
@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 <TelerikScheduler @bind-Date="@StartDate" @bind-View="@CurrView" Data="@Appointments" OnUpdate="@UpdateAppointment" OnDelete="@DeleteAppointment" OnCreate="@AddAppointment" AllowUpdate="true" AllowCreate="true" AllowDelete="true" Height="500px" Width="100%" IdField="@(nameof(Appointment.Id))" RecurrenceRuleField="@(nameof(Appointment.RecurrenceRule))" RecurrenceExceptionsField="@(nameof(Appointment.RecurrenceExceptions))" RecurrenceIdField="@(nameof(Appointment.RecurrenceId))"> <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 Task OnInitializedAsync() { StartDate = GetStart(); Appointments = GetAppointments(); return base.OnInitializedAsync(); } private List<Appointment> GetAppointments() { List<Appointment> data = new List<Appointment>(); DateTime baselineTime = GetStart(); data.Add(new Appointment { Title = "Vet visit", Description = "The cat needs vaccinations and her teeth checked.", Start = baselineTime.AddHours(2), End = baselineTime.AddHours(2).AddMinutes(30) }); data.Add(new Appointment { Title = "Trip to Hawaii", Description = "An unforgettable holiday!", IsAllDay = true, Start = baselineTime.AddDays(-10), End = baselineTime.AddDays(-2) }); data.Add(new Appointment { Title = "Jane's birthday party", Description = "Make sure to get her fresh flowers in addition to the gift.", Start = baselineTime.AddDays(5).AddHours(10), End = baselineTime.AddDays(5).AddHours(18), }); data.Add(new Appointment { Title = "One-on-one with the manager", Start = baselineTime.AddDays(2).AddHours(3).AddMinutes(30), End = baselineTime.AddDays(2).AddHours(3).AddMinutes(45), }); data.Add(new Appointment { Title = "Brunch with HR", Description = "Performance evaluation of the new recruit.", Start = baselineTime.AddDays(3).AddHours(3), End = baselineTime.AddDays(3).AddHours(3).AddMinutes(45) }); data.Add(new Appointment { Title = "Interview with new recruit", Description = "See if John will be a suitable match for our team.", Start = baselineTime.AddDays(3).AddHours(1).AddMinutes(30), End = baselineTime.AddDays(3).AddHours(2).AddMinutes(30) }); data.Add(new Appointment { Title = "Conference", Description = "The big important work conference. Don't forget to practice your presentation.", Start = baselineTime.AddDays(6), End = baselineTime.AddDays(11), IsAllDay = true }); data.Add(new Appointment { Title = "New Project Kickoff", Description = "Everyone assemble! We will also have clients on the call from a later time zone.", Start = baselineTime.AddDays(3).AddHours(8).AddMinutes(30), End = baselineTime.AddDays(3).AddHours(11).AddMinutes(30) }); data.Add(new Appointment { Title = "Get photos", Description = "Get the printed photos from last week's holiday. It's on the way from the vet to work.", Start = baselineTime.AddHours(2).AddMinutes(15), End = baselineTime.AddHours(2).AddMinutes(30) }); return data; } public DateTime GetStart() { DateTime now = DateTime.Now; int diff = (7 + (now.DayOfWeek - DayOfWeek.Monday)) % 7; DateTime lastMonday = now.AddDays(-1 * diff); //return 8 AM on today's date for better visualization of the demos return new DateTime(lastMonday.Year, lastMonday.Month, lastMonday.Day, 8, 0, 0); } 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-3"> <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-9"> <TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple" @bind-Date="@startDate" @bind-View="@CalendarViewValue" Views="2"> </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 /> <TelerikValidationSummary /> <label>Categories</label> <TelerikDropDownList Data="@CategoryData" @bind-Value="@category.CategoryId" PopupHeight="170px" DefaultText="Select Category" ValueField="CategoryId" TextField="CategoryName"> </TelerikDropDownList> <label>Products</label> <TelerikDropDownList Data="@DropDownListData" @bind-Value=@SelectedValue PopupHeight="170px" DefaultText="Select Product" ValueField="ProductId" TextField="ProductName"> </TelerikDropDownList> <label>Shipping Address</label> <TelerikDropDownList Data="@OrderData" @bind-Value=@order.OrderId PopupHeight="170px" DefaultText="Select City" ValueField="OrderId" TextField="OrderName"> </TelerikDropDownList> <div class="submit-btn-wrap"> <TelerikButton Primary="true">Submit</TelerikButton> </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>
Create native, rich and powerful Grids with customizable and sortable columns, data editing, selection, filtering and grouping capabilities.
More about GridCharts to give sense to data, enabling end-users to analyze volumes of complex information. Choose from a rich set of series including: Area, Bar, Column, Pie, Donut, Line.
More about ChartCustomize your agenda by editing or adding appointments and displaying events in different views.
More about SchedulerWeek, month and year views. Single, multiple and range date selection.
More about CalendarТhe easiest way to let your users pick an option from a predetermined list. You can control the data, sizes, and various appearance options like class and templates.
More about Drop Down ListCut development time and cost in half with the Telerik high-performing Grid and 75+ truly native, easy-to-customize UI components to cover any app scenario. New set of components is added every 6 weeks!
100+ features provide flexible data visualization and manipulation, rich API, professional looks and a way to satisfy any design requirement.
“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
Easy to customize Telerik Blazor controls through multitude of methods, properties and events, as well as professionally styled built-in themes & the Telerik Sass Theme Builder enabling you to build your own.
Outstanding support from the developers who build the product to help you work out all challenges promptly.
Get results within hours by experimenting with our extensive Blazor demos, docs & online technical training to help you get started in no time.
Give your users the choice on how much space their tools should take by placing them in the panes of newly added Splitter component.
Numerical inputs are sometimes best entered via a slider. Use our new Slider and Range Slider controls in your app the next time you need a simple number from your users.
Improve your app’s user experience by playing an animated loading indicator whenever your data is being processed with the Telerik UI for Blazor Loading Container.
Get answers to your questions directly from the developers who build this UI suite, even during your trial period.
Contact supportIf 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