Greatness—it’s one thing to say you have it, but it means more when others recognize it. Telerik is proud to hold the following industry awards.
G2 Leaders Summer Award
TrustRadius Most Loved Award
TrustRadius Best Feature Set Award
TrustRadius Best Customer Support Award
See Our Most Popular Blazor Components
Get full support for AngularJS out of the box, or use your favorite JavaScript framework.Get full support for AngularJS out of the box, or use your favorite.
<divstyle="width:40%; display: inline-block;"><TelerikChart><ChartTitleText="Gross domestic product growth /GDP annual %/"></ChartTitle><ChartLegendVisible="false"></ChartLegend><ChartSeriesItems><ChartSeriesType="@ChartSeriesType.Column"Data="@Data"Field="@nameof(ModelData.Series1)"Name="Canada"></ChartSeries><ChartSeriesType="@ChartSeriesType.Column"Data="@Data"Field="@nameof(ModelData.Series2)"Name="USA"></ChartSeries><ChartSeriesType="@ChartSeriesType.Column"Data="@Data"Field="@nameof(ModelData.Series3)"Name="Bulgaria"></ChartSeries><ChartSeriesType="@ChartSeriesType.Line"Data="@Data"Field="@nameof(ModelData.Series4)"Name="Average Trend"></ChartSeries></ChartSeriesItems><ChartCategoryAxes><ChartCategoryAxisCategories="@Categories"><ChartCategoryAxisLabels><ChartCategoryAxisLabelsRotationAngle="45"Align="@ChartAxisLabelsRotationAlignment.Center"/></ChartCategoryAxisLabels></ChartCategoryAxis></ChartCategoryAxes><ChartValueAxes><ChartValueAxis><ChartValueAxisTitleText="Growth, %"></ChartValueAxisTitle><ChartValueAxisLabelsFormat="{0:N0}%"></ChartValueAxisLabels></ChartValueAxis></ChartValueAxes><ChartTooltipVisible="true"Shared="true"></ChartTooltip></TelerikChart></div><divstyle="width:50%; display: inline-block; margin-left:10px;"><TelerikChart><ChartTitleText="What is you favourite sport?"></ChartTitle><ChartLegendVisible="true"Position="ChartLegendPosition.Top"></ChartLegend><ChartSeriesItems><ChartSeriesType="@ChartSeriesType.Donut"Data="@DataForDonut"Field="@nameof(DonutData.Value)"CategoryField="@nameof(DonutData.Category)"><ChartSeriesTooltipVisible="true"><Template>
@((context.DataItem as DonutData).Category) - @((context.DataItem as DonutData).Value)%
</Template></ChartSeriesTooltip><ChartSeriesLabelsPosition="@ChartSeriesLabelsPosition.OutsideEnd"Visible="true"Background="transparent"Format="{0}%"></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
}
};
}
@page "/scheduler"
<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><SchedulerDayViewStartTime="@DayStart"/><SchedulerWeekViewStartTime="@DayStart"/><SchedulerMultiDayViewStartTime="@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);
}
public class Appointment
{
public Guid Id { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
public string Title { get; set; }
public bool IsAllDay { get; set; }
public string Description { get; set; }
public string RecurrenceRule { get; set; }
public List<DateTime> RecurrenceExceptions { get; set; }
public Guid? RecurrenceId { get; set; }
public Appointment()
{
Id = Guid.NewGuid();
}
}
}
<divclass="calendar-wrap"><div><divclass="header"><h3>Switch View</h3></div><TelerikRadioGroupData="@CalendarViews"@bind-Value="@CalendarViewValue"Layout="@RadioGroupLayout.Vertical"></TelerikRadioGroup></div><TelerikCalendarSelectionMode="@CalendarSelectionMode.Multiple"@bind-Date="@startDate"@bind-View="@CalendarViewValue"Views="2"></TelerikCalendar></div>
@code {
private DateTime startDate = DateTime.Now;
public CalendarView CalendarViewValue { get; set; } = CalendarView.Month;
public List<CalendarViewModel> CalendarViews { get; set; } = new List<CalendarViewModel>()
{
new CalendarViewModel() { Text = "Month View", Value = CalendarView.Month },
new CalendarViewModel() { Text = "Year View", Value = CalendarView.Year },
new CalendarViewModel() { Text = "Decade View", Value = CalendarView.Decade },
new CalendarViewModel() { Text = "Century View", Value = CalendarView.Century }
};
public class CalendarViewModel
{
public string Text { get; set; }
public CalendarView Value { get; set; }
public CalendarViewModel()
{
}
}
}
<style>
.calendar-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
width: 100%;
}
.header {
color: #454545;
}
.header h3 {
font-weight: 700;
font-size: 18px;
}
</style>
Charts 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.
Т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.
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.
See our high-performing Grid plus 50 stunning truly native easy-to-customize UI components in action.
9/10Ease of Use
9.7/10Quality of Support
9.6/10Ease of Setup
What Developers Say
Telerik UI for Blazor has been a game-changer for my web development projects. Its seamless integration, versatile and comprehensive component library, and easy customization options saved me valuable time while creating polished applications. The outstanding performance ensured smooth user experiences even with complex data. The exceptional customer support from the Telerik team was commendable. I highly recommend Telerik UI for Blazor to any developer seeking efficient and visually stunning web applications. Kudos to Telerik for developing an outstanding product that elevates the development process and user satisfaction!
Madho Singh
, Globillize
With the new .NET Blazor Web Assembly implementation with Telerik, it's really a fun way to implement user interfaces quickly and in efficient way. I've been using Telerik controls since 2013 with multiple .NET products and it saves a lot of time on UI
development.
When I became interested in blazor I tested multiple products. Telerik was both the most advanced product and the easiest to use.
jean pierre HARCOURT
DIRECTOR, PROXIMA INFORMATIQUE
Great Tool
Cesar Marquez
Engineer, nttdata
EXCELLENT CONTROLS WORK 100%, TIME DEDICATED TO THE LOGIC NOT TO THE DEVELOPMENT OF THE CONTROL AND DESIGN
Gerardo Alexander
developer, alexcorp
Telerik Team does an awesome job constantly improving their products. The team actively engages with end-users via community forums for bug fixes, product enquiries, supports and releases. Well done! Telerik
Chun Loke
Founder, Rumewa Technologies
This is a very useful product. I use it for my front end websites.
Easy to use. Lots of examples on the site and repo. Great product support also.
Oleksandr Viktor
Senior ASP.NET Core / C# / SQL Server / Telerik Blazor UI Developer, Business Net Solutions Ltd
For anyone reading this that is not a Progress Telerik customer yet, this (customer support) is why I have been since 2010. Great controls / components but even better service.
Renier Pretorius
Owner, Consultlink
An artisan-crafted product out of the box for a developer with less time to do with the UI and other details. Just focus on your logic, the rest is handled very well.
Evlv Digital
Dev, Evlv Digital
Telerik UI for Blazor is a great product. It saves time, high performance and Professional Look.
Mahmoud Helmy
Senior Data Scientists, Kuwait University
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
Get started with Telerik UI for Blazor and live in a JavaScript-free world
Download a 30-day trial and measure how much more productive you can be
95+ (and growing) UI components to match any app scenario
A UI component library designed and built for Blazor, with zero dependencies
Outstanding support with 97% customer satisfaction rating from the developers who build the product