Hey developer folks, it’s Telerik R3 2021 release time and we’re excited to announce that the Telerik UI for Blazor component suite has reached a new milestone of 85+ truly native components!
The new Telerik UI for Blazor 2.27 release brings Carousel, Barcode, Breadcrumb components, along with more Gantt features, Scheduler & TreeView enhancements, accessibility improvements, Design Kits for Figma, compatibility with .NET 6 RC1 and much more!
Read ahead and see in detail all the new components, features and tooling that will help you speed up the development of Blazor Server and WebAssembly apps!
The UI for Blazor Carousel (also known as ScrollView or ImageGallery) is a component that helps you visualize images and content in a stylish and well-organized way. It includes options for paging its content, configuration for left and right navigation arrows, automatic page change (with animation), setup of time interval between image changes and more. Like the rest of the Blazor UI components in Telerik offering, it comes with built-in keyboard navigation support and accessibility.
Telerik UI for Blazor Carousel Component
The Telerik Blazor Barcode component displays data in a machine-readable format, and the generated barcodes are suitable for both printing and on-screen scanning. The component supports various encoding types (Code11, Code39, Code93, Code128(A|B|C), EAN8, MSImods and more) and can represent both numeric and character data.
Telerik UI for Blazor Barcode Component
The Barcode generator allows for customization of its appearance through a multitude of exposed properties such as: Background, Color, Text Color, Barcode Border Color, Barcode Padding, Width, Height and more! You can additionally show/hide the barcode label (text), add checksum and configure rendering engine for SVG or Canvas.
The new Breadcrumb component provides developers with an easy way to create a sleek navigation in Blazor apps with a large amount of content or hierarchical structure. Using the Breadcrumb, you can significantly reduce the number of actions needed by a user to get to a certain app resource. Additionally, the Breadcrumb provides a visual aid that indicates the current location of the user and is a simple way to add contextual information to landing pages.
Telerik UI for Blazor Breadcrumb Component
The component comes with items template support for custom content rendering including breadcrumb items with icons, images and various styles. To make it adaptive, it includes three collapse modes for better visualization when the available space is scarce:
Telerik UI for Blazor Breadcrumb—Collapse Modes
The first version of Telerik Blazor Gantt component was shipped last month in August, and we made a promise that in September you could expect more features related to task dependencies, column resizing and reordering, as well as editing enhancements.
Here we are in September, and those features are now available as built-in functionalities within the component:
Telerik UI for Blazor Gantt—Column Resizing
Both the Grid and TreeList components now support binding to interfaces, and you have the flexibility to decide which instance model to plug for their Add, Edit and Delete commands. For the Add command, you can use custom buttons in the toolbar and use the State of the component to define your own InsertedItem. As for the Edit and Delete commands, these are supported out of the box.
In addition to the existing Day, Week and Month views, the Scheduler component now provides the option tо visualize appointments in a timeline view in a continuous horizontal direction. The timeline view supports horizontal and vertical resource grouping options, by one or more resources.
You have multiple configurable parameters available: start and end times (day and workday), slot duration, slot divisions, column width, item template for custom content rendering and more!
Telerik UI for Blazor Scheduler Timeline View
In R3 2021 we also added several new Scheduler events that will help you easily control the logic when appointments are clicked or need to be managed by end users. The new events include: OnItemClick, OnItemContextMenu and OnItemDoubleClick.
Several TreeView events received the EventArgs parameter, namely the OnItemClick, OnItemDoubleClick and OnItemContextMenu events, providing you the option to use the position of the action/event to show a custom element.
Continuing our efforts to provide a high level of accessibility by Telerik components, in this release we ensured that multiple top-used components received a boost to comply with WCAG 2.1 and Section 508 accessibility standards. The list of components includes: Button, ToggleButton, TextBox, NumericTextBox, MaskedTextBox, TextArea, DateInput, DatePicker, DateTimePicker, TimePicker and DateRangePicker.
In addition to showing the Tooltip UI component with initially rendered items, it can now be integrated with dynamically added HTML out of the box (relates to implementation of the following Feedback Portal item).
The Default, Material and Bootstrap themes now shine with different coloring options, which you can apply in Telerik UI for Blazor component demos by selecting one of the many new available swatches:
Themes & Swatches in Telerik Demos
Following the announcement of Bootstrap 5 earlier this summer, we worked to ensure that we can accommodate various preferences for its support. If you want to be compatible with the latest updates, make sure to use the bootstrap-main swatch. If you wish to continue using the previous versions, you can reference Bootstrap-3 and Bootstrap-4.
To achieve efficient collaboration between designers and developers on your team, we have created three Telerik UI Design Kits for Figma (one for each of the top three themes we ship with Telerik UI for Blazor—Material, Bootstrap and Default—of our own styling).
Telerik & Kendo UI Design Kits for Figma
The design files include 30+ of the most widely used UI for Blazor components, such as Grid, Scheduler, Dropdowns and Inputs, with their detailed anatomical structures, colors, indicators and icons. The included building blocks and elements enable smooth collaboration between designers and developers, and our goal is to continuously grow the number of included components and ensure full coverage.
Check out the dedicated sample project that shows example of Telerik UI for Blazor web components running in hybrid scenarios inside native MAUI, WPF and WinForms apps.
Head over to the Telerik UI for Blazor page and download a free trial of Telerik UI for Blazor 2.27.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 2.27.0. directly in your Blazor solutions.
- Your Telerik Blazor Team at Progress
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!