Telerik UI for Blazor R1 2022 brings 90+ native components: Map, FileSelect, Dialog, Heatmap, QR Code, ColorPicker, REPL code runner, theming options and more!
Hey, developer folks! It’s Telerik R1 2022 release time and we’re excited to start 2022 with the introduction of multiple new UI components such as Map, FileSelect and ColorPicker; more Data Grid, TabStrip and Editor features; theme and style improvements; REPL code runner; .NET 6 and Visual Studio 2022 support; Visual Studio Code extension updates; and more! The Telerik UI for Blazor component suite continues to expand and has reached a new milestone of 90+ truly native components!
Below is a summary of the R1 2022 Telerik UI for Blazor release content shipped between October 2021 and January 2022 (includes Telerik UI for Blazor 2.28, 2.29, 2.30 and the current 3.0.0 releases):
Let’s take a closer look at the current 3.0.0 release content and then review the new components and features from Telerik UI for Blazor 2.30, 2.29 and 2.28 releases shipped in October, November and December 2021 as part of the R1 2022 release.
We are happy to announce the first release of the Telerik UI for Blazor Map component! The map allows you to display geographical information organized in layers, and can be integrated with open map providers in your Blazor apps. The component includes tile, bubble, shape and marker layers, and support for the GeoJSON data format. It is compatible with a wide range of tile map providers, enabling you to easily integrate advanced location and mobility capabilities into your maps, touch support, multiple customization options and more!
Depending on the different map providers and use case, you can take advantage of the following layers:
The Map for Blazor includes multiple configuration options related to the map itself, the map controls (zoom, attribution, navigator) and its tiles (type, size, min & max zoom, multiple styles fill properties, marker shape and more).
With the initial release of the Map component, there are several events exposed that let you define logic when a marker, shape or the map is clicked: OnMarkerClick, OnShapeClick and OnClick.
The UI for Blazor FileSelect component allows users to select single or multiple files from their local file systems and store them on a server. The component is especially handy when you want complete control over the management of selected files and the way they are uploaded. It has built-in keyboard navigation support and accessibility, just like the rest of the Blazor UI components in the Telerik portfolio.
For cases when you need to restrict users from selecting files, the FileSelect can be disabled with a single configuration option.
The component allows you to define rules about the accepted minimum and maximum file size, file types and extensions.
The File Select component exposes OnSelect and OnRemove events, giving programmatic control over the selected and removed files:
Based on your feedback related to themes customizations and design language trends, we are going to address various aspects of our themes in an ongoing effort to make Kendo UI themes more flexible, extensible and customizable to help our users cover more design and UX requirements. (Note: Kendo UI’s common set of themes can be shared across all Telerik and Kendo UI products: UI for Blazor, ASP.NET Core and MVC, as well as Kendo UI for jQuery, React, Vue and Angular).
We have revisited all Telerik UI components across the Default, Bootstrap and Material themes and introduced common options that can be set on a component level that can help with defining the main theme colors, the size and shape of the individual components, and more.
With R1 2022 we have updated the Button, Input, DateInput, and DropDown component categories to offer the following theme rendering options:
These options have rolled out with the v5 release of the Kendo UI Sass-based themes, which is the latest version of the theme packages as of today. These updates contain breaking changes for anyone that has customized the Telerik UI for Blazor components, so we highly recommend adding some time for addressing breaking changes as a part of any update process you may have planned.
Additional components will be tackled with future releases in 2022. Here’s a rough roadmap around what components will be covered next: AppBar, BottomNavigation, Badge, Notification, Tooltip, Loader, Toolbar, Window, Dialog, TabStrip, PanelBar, ExpansionPanel, Upload, Editor, Scheduler and more!
Keep in mind that things may change here as our roadmap does adjust based on customer feedback, but this should still serve as a rough plan for when certain components will be targeted. To provide more information about these changes, and our general plan around the Kendo UI themes, we recently posted a blog post about the future of Themes in Telerik and Kendo UI.
We officially introduced the Telerik and Kendo UI Kits for Figma a few months back with the goal to help improve the collaboration between designers and developers using Telerik and Kendo UI components. We expanded the initial set of UI components, and I am happy to share that with R1 2022 we have introduced Figma assets for all Telerik and Kendo UI components with only one exception: the charts.
You can now easily customize popups within a single dedicated tag for Telerik select components: Dropdownlist, Combobox, Autocomplete and MultiSelect. The popup settings allow you to configure minimum and maximum dimensions along with the already existing width, height and class parameters.
A popular Feedback Portal request has been implemented as a feature in both the Data Grid and TreeList components.
The Editor component now allows you to add media tags such as video, audio and iframe.
With this release, we exposed new methods in the Upload component API for triggering upload, file select dialog, and the ability to clear successfully uploaded files.
In the R1 2022 release, we have something new for those of you who are using Telerik Document Processing within Blazor apps! In the latest distribution package, you will find several of the most-wanted items from our Feedback Portal, such as:
While we aimed to ensure undisturbed releases for two+ years, as the product and the framework evolved, we introduced several breaking changes in the current 3.0.0 release ensuring improvements in the API, rending and theming and some related to unifying parameter naming.
We highly recommend reviewing the documentation article describing in detail the breaking changes in 3.0.0 release, and adding time for addressing them as a part of any update process you may have planned.
As we covered the new goodies from the Telerik UI for Blazor 3.0.0 release, let’s review the rest of the items that are part of R1 2022 and were shipped earlier.
The Telerik REPL for Blazor was launched in October and represents an interactive online environment that reads, compiles and immediately runs your Blazor code in the browser. The run-ready environment requires no installation, account or special tooling—just jump in and start coding. Additional features include:
Telerik REPL for Blazor always integrates with the latest version of Telerik UI for Blazor, so any snippet created before the current 3.0.0 that uses the Telerik Components might need an update due to the breaking changes in the release.
We added a standalone Telerik Blazor Dialog UI component so you have an out-of-the-box solution for building UI popups. The component comes in handy for displaying information to users and provides multiple options for customization such as width, height, title, visibility, content and action button templates, close on overlay click, and more.
The Heatmap Chart UI component allows you to visualize two-dimensional data in a magnitude of colors. Some of the features of the new Heatmap component include: visualizing data values in different shapes; various color scales; tooltips that allow you to display additional information; built-in and custom themes and swatches.
The new Telerik UI for Blazor QR Code component is a machine-readable label that carries data for a locator, identifier or tracker, directing users to a website or application when scanned with any smart device. You can encode several data formats such as URLs, phone numbers, email addresses, contact information and geolocations. The QR Code can be customized in various ways: rendering your own custom logos and pictures in it, configuring its size, width, padding, borders, error correction levels, colors and overlay settings of the QR Code. The component also supports Swiss QR Code generation.
In addition to the ColorPalette component, we introduced three new flavors ensuring simplified reference for different scenarios. You can plug the ColorGradient component in case you need to show just a gradient view, and for more advanced scenarios you can use the FlatColorPicker or the ColorPicker with a popup.
You can now render a text suggestion for each input field and provide descriptions for the format parts for multiple DateInputs components. The format placeholders are supported for the DateTimePicker, DatePicker, TimePicker, DateRangePicker and DateInput components.
The TabStrip now exposes two new parameters: PersistTabContent, which determines whether the content of tabs is persisted when changing tabs, and Visible, which allows you to easily control the visibility of each of the tabs.
A new enum parameter ValidateOn was introduced in all Telerik Blazor input components, such as Date & Time Pickers, TextBox, Numeric TextBox, MaskedTextBox and TextArea. The ValidateOn parameter allows you to configure whether to trigger validation on change, blur or while typing.
Starting with Telerik UI for Blazor 2.29 release, we now ship the product source code for our active license holders (available in Your Account -> Downloads section).
Telerik UI for Blazor library is compatible with .NET 6 and Visual Studio 2022 since November 2021, shortly after the release by Microsoft. You can dive into seamless development with our web components and create new projects using our VS and VS Code project templates and built-in layouts.
The Create New Project Wizards for Visual Studio and Visual Studio Code now provide the option for theme and swatches configuration, plus a brand new Admin Dashboard project template. You can now style your project at the time of its creation and configure both the theme and the specific swatches in the wizard with a click of a button. Using the Admin Dashboard project template, you can easily jump-start a Blazor project with the pre-built layout and functionality—rearrange the layout as it fits your needs, and simply plug in your data and bind it to the components—including Grid, Tile Layout, Drawer, Calendar, Form, various Chart types, Card and more.
Head over to the Telerik UI for Blazor page and download a free trial of Telerik UI for Blazor 3.0.0. Or, if you are an active license holder, you can grab the latest and greatest from the “Your Account” page, or update your NuGet Telerik.UI.for.Blazor package reference to version 3.0.0. Make sure to review and assess the announced breaking changes before updating to the latest version in your Blazor solutions.
Be sure to sign up for the Telerik R1 2022 release webinar and live Twitch sessions to see the newly released components and features in action:
Mon, January 24 I 10:00 am ET – noon I Desktop & Mobile
Tue, January 25 I 10:00 am ET – noon I .NET Web
Wed, February 2 I 11:00 am – 1:00 pm ET
Thank you for the continuous support!
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!