We're thrilled to announce that the latest release of Telerik UI for Blazor is loaded with new features - read on to catch up on everything that's new.
Happy new and blazing 2020, fellow developers! We hope it brings health, inspiration and success to all of you! As we kick off 2020, we're excited to announce that the Telerik UI for Blazor component suite - which counts 30+ native, production-ready components and a growing ecosystem of tooling and libraries - is getting even more goodness in the latest release. Telerik UI for Blazor 2.6 includes new and improved features such as Document Processing Library (DPL), Keyboard Navigation, Accessibility, new AutoComplete Component, Report Viewer for Blazor (thanks to Telerik Reporting Team), Enhanced Scheduler and more.
With the first release for 2020 we are adding some much desired libraries, tooling, components and features to Telerik UI for Blazor which will take your Blazor apps to the next level! Generate various documents like Excel, Word and PDF, convert files from one format to another, manage stream compression and archived files; Keyboard Navigation and Accessibility across the board, Report Viewer for Blazor (as part of Telerik Reporting R1 2020), brand new AutoComplete component, enhancements to the Scheduler with drag-and-drop, resources and more.
2020 promises to be really progressive for the application development world with the official release of Blazor WebAssembly in May. Our goal with Telerik UI for Blazor is to continuously deliver Native, Production-Ready UI components and support both Blazor hosting models – Server-Side and WebAssembly.
We will ensure that your server-side apps work with .NET Core 3.1 LTS, and at the same time your client-side apps are continuously compatible with all latest preview versions of Blazor WebAssembly 3.2.
In the 2.6.0 release we added Telerik Document Processing as part of our Blazor offering. Telerik Document Processing is a set of UI-independent and cross-platform libraries that will boost your Blazor applications with the following:
With the R1 2020 release, the Telerik Reporting Team introduced a new Report Viewer for Blazor, wrapping the flexible HTML5/JS web report viewer that will ensure the easy and fast preview of reports directly into your Blazor application.
Check out the official Telerik Reporting page for more details and demos.
Accessibility is a topic of growing importance and we at Progress are continuously working towards built-in accessibility for the components we create.
What does Accessibility mean for your Blazor apps and why you should consider it?
First of all, you show you care about people with disabilities and contribute to making their lives a bit easier. You can now provide full control over your Blazor app features by giving users with disabilities access to app content through assistive technologies or keyboard navigation.
Secondly, your apps will be compliant with current accessibility standards and policies, namely: The WCAG, Section 508 and WAI-ARIA standards.
A third factor is that by making your Blazor app accessible to people with disabilities, you are actually making it more accessible to everyone else too – from people in noisy offices that need captions, to people browsing your apps in a sunny park that need high-contrast themes.
And if the above reasons are not enough, consider the fact that there are more than 50 million people in the U.S. alone with some amount of disability - a pretty big market. So, with a little more care when you build your Blazor apps you can reach out many new potential customers.
The Telerik UI for Blazor components have support for Keyboard Navigation! Your app users can directly use their keyboard to navigate through your app components and interact with them - invoke actions such as clicking links, buttons, paging the grid, navigating to form controls and more.
The following article shows the Telerik Blazor components that support specific keyboard combinations and links to live demos where you can see the behavior in action, together with the available keyboard shortcuts.
The AutoComplete component concept is well known and almost mandatory for modern app development. Based on a user’s input, the Blazor AutoComplete component provides a list of suggestions.
The AutoComplete component can be bound to a simple collection of string values or data model with just a line of code:
<TelerikAutoComplete Data="@Suggestions" @bind-Value="@TheValue" />
For cases with a large number of list values or where there's a need for a faster, simplified search of values, you can use the Filtering option of the component. This way the AutoComplete component will filter the available suggestions according to the current user input.
To enable filtering, set the Filterable parameter to true. The default filter operator is “starts with,” and it ignores casing.
<TelerikAutoComplete Data="@Suggestions" @bind-Value="@TheValue" Filterable="true" />
Additionally, you can use the MinLength property to control when the filter list will appear.
<TelerikAutoComplete Data="@Suggestions" @bind-Value="@TheValue" Filterable="true" MinLength="2" />
You can set different filter operators as shown in the example below:
<TelerikAutoComplete Data="@Suggestions" @bind-Value="@TheValue" Filterable="true" FilterOperator="@StringFilterOperator .Contains" />
You can completely customize the AutoComplete component and its items rendering by using templates. The component gives you options to set the following templates and customize:
For capturing and handling changes to the values in the AutoComplete, you have two events which you can utilize:
Just released in December 2019, the Scheduler Component quickly became a favorite one and we are happy to extend its functionally based on your feedback. In the 2.6.0 release we are adding:
Change the timing of your appointments with a simple drag-and-drop between different slots, and resize the events to alter their duration.
The Scheduler now allows you to assign shared resources to your appointments and mark that with a specific color. A common scenario is when you have meeting rooms, equipment or subject matter experts that you need to share between teams.
Resources are optional so you can have none, single or multiple resources. The color of an appointment will be determined by the first declared resource.
To add resources to a <TelerikScheduler>, add a <ScheduerResource> tag for each and specify its Field, Title and Data fields.
<TelerikScheduler Data="@Appointments" @bind-Date="@StartDate" @bind-View="@CurrView" Height="600px" Width="800px" AllowUpdate="true" AllowCreate="true">
<SchedulerResource Field="RoomId" Title="Meeting Room" Data="@Rooms" />
<SchedulerResource Field="ManagerName" Title="Manager Name" Data="@Managers" />
<SchedulerDayView StartTime="@DayStart" />
<SchedulerWeekView StartTime="@DayStart" />
<SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
Example of Telerik UI for Blazor with Multiple Resources
We encourage you to download the 2.6.0 version of Telerik UI for Blazor native components from the Telerik UI for Blazor page. Be sure to let us know what you would like to see next in the suite in our dedicated Blazor feedback portal.
As we have packed a lot of great new stuff from all Telerik UI Component suites, be sure to sign up for the Telerik R1 2020 release webinar on Tuesday, January 21st at 11:00 AM ET for a deeper look at all the new features in the release.
Thank you for contributing and being part of the amazing UI for Blazor Community! Looking Forward to an Amazing Blazing 2020!
Maria Veledinova is Product Manager for Telerik UI .NET Web components - Blazor, ASP.NET Core, MVC and AJAX. She has experience in the field of product development and transformations of organizations towards forward-looking, innovative and impactful software products. Maria believes that behind every great product along with the cutting-edge technology stands challenging the status quo, close collaboration with the customers, and spirit of experimentation. Follow her on Twitter or LinkedIn.
Subscribe to be the first to get our expert-written articles and tutorials for developers!