Four brand-new components, new features to existing ones and enhancements to our Grid and TreeList—release 2.25.0 of Telerik UI for Blazor has a lot to offer.
Hey Blazor and Telerik UI for Blazor folks,
It’s release time again, and this month Telerik UI for Blazor brings four brand-new components—Wizard, Stepper, StackLayout and GridLayout—new features to existing Blazor components such as the Scheduler resource grouping, grouping in drop-down components, plus multiple Grid and TreeList enhancements that are almost a tradition for every new Telerik UI for Blazor version!
Read the June 2021 release blog post ahead to find out more about the full 2.25.0 content, which you can plug and play in your Blazor Server and WebAssembly apps!
Surely one of the 2.25.0 release highlights is the Telerik Blazor Wizard UI component! Using the Wizard, you can easily carry out multi-step processes and simplify user input by exposing just one form at a time. Each Wizard step can have its own content (form or other HTML), easy-to-integrate form validation for the input data, keyboard navigation and a progress indicator showing the number of steps left toward achieving the final goal for the process. Each of the steps allows further configuration, localization and customization.
Telerik UI for Blazor Wizard UI Component
By default, the Wizard component’s height is dynamic and will fill its container’s width, depending on its content. However, both width and height are exposed as configurable parameters. And this is just the beginning of what you have at your fingertips. 😊 The Wizard allows you to configure almost every aspect of it:
Telerik UI for Blazor Wizard Configuration Options
The Wizard component internally utilizes another new component—the Stepper (reviewed in detail in the next section). We made sure you have control over the main properties of the internal stepper and complete customization options of each of the Wizard steps: Content, Icon, IconClass, ImageUrl, Optional, Disabled, Text, Label and Valid.
The Telerik Wizard component allows smooth integration and use of the Telerik Blazor Form component within its content, thus providing a sleek option for user input and the benefit of built-in form validation. Check out this demo, which shows how to easily restrict going to the next Wizard step when the Form validation is not satisfied.
Telerik UI for Blazor Wizard Form Integration
The Wizard component features three default button options: Next, Previous and Done.
In case you need to define custom buttons, this is achievable by overriding the Wizard buttons through WizardButtons parameter.
The Wizard component exposes the following events, which are triggered when:
The new Telerik Stepper for Blazor component is a feature-rich UI control that navigates users through a sequence of logical steps and visualizes their progress. The Stepper is a perfect match to walk users through processes like application, shopping cart, reservation or configuration.
The component comes with options for full customization of icons, labels, indicators, orientation, built-in keyboard navigation and support for localization of labels. While it can be used as a standalone component, it is also an integral part of the Wizard component.
Telerik UI for Blazor Stepper Component
The Stepper component includes two modes—horizontal and vertical—which can be easily set via the Orientation property.
Telerik UI for Blazor Stepper Vertical Orientation
You can fully control the rendering and styles of the component steps. Using the provided option for step templates, you can customize the stepper indicators and labels as needed. Furthermore, you can set icons in the step indicators and configure the different options provided by the Icon, IconClass, ImageUrl and SpriteClass parameters.
Telerik UI for Blazor Stepper Templates
The Stepper component exposes Disabled and Optional parameters that let you respectively disable a step or mark it with an optional label. Additionally, you can add validation logic for each step and, based on its result, render a success or error icon (in the step indicator or as part of the step label).
Telerik UI for Blazor Stepper States
In this release we are introducing two well-known components from the desktop world in a web Blazor flavor—the StackLayout and GridLayout. Our goal with these two components is to support developers who are transitioning from desktop development to building and arranging web layouts in a familiar way by stacking UI components within Blazor applications.
Using the StackLayout component for Blazor, you can easily arrange its inner elements horizontally, or vertically in a stack. It represents a single-line flex container and supports nesting stack panels, so that you are enabled to build more complex layouts.
Telerik UI for Blazor StackLayout UI Component
The StackLayout component exposes the following configuration options: width & height, orientation, spacing, horizontal align, vertical align and CSS class.
For more complex layout arrangements you can rely on the GridLayout component, which offers a flexible grid-layout system with rows and columns. It is based on the well-known CSS Grid Layout system and allows items to be configured per specific row and column and could span across them.
Telerik UI for Blazor GridLayout UI Component
The GridLayout allows configuration on multiple levels, namely:
The Telerik Grid was the first native Blazor component in the product back in 2019 (even when Telerik UI for Blazor was still not yet a product, but just a bold experiment).
Over the last couple of years, it has matured significantly and now includes 100+ features, such as virtualization (column & rows), multi-column headers, rows drag and drop, grouping with load on demand and so many more!
Telerik UI for Blazor Grid Component—Then & Now
In the current 2.25.0 release we are adding several new features to make it shine even more:
With this new feature, you will have an easy option at hand to apply conditional Grid row command buttons depending on the properties of a row item. This will be achieved by adding context (current row item) to the current ChildContent parameter.
The feature enables keyboard navigation capabilities in grids with configured virtual columns. Users can easily navigate through virtual column ranges (subsets of the columns in a given row) and edit items without a touch of the mouse.
A new parameter TextAlign is introduced to the bound Grid columns that lets you align grid cells content. The parameter will be from type ColumnTextAlign enum and accepts “right”, “left” and “center” values, which in turn attaches text-alignt:right/left/center styles to the grid column.
Telerik UI for Blazor Grid Cell Alignment
All of the above-mentioned features for the Grid component have also been applied to the TreeList, namely:
The Telerik Blazor Scheduler UI component now provides built-in resource grouping functionality (for one or more resources), which can be enabled through the SchedulerGroupSettings tag. The Scheduler resource groups can have vertical or horizontal orientation.
Telerik UI for Blazor Scheduler Resource Grouping
In the previous release we added a virtualization feature to our drop-down components (AutoComplete, DropDownList, MultiSelect and ComboBox), and in this release we are expanding their functionality with grouping.
To enable grouping in drop-down components, set the GroupField parameter, and the component will render a sticky header with the group name and list all corresponding items in a container that can be scrolled.
Telerik UI for Blazor MultiSelect Grouping
Last but not least, we added FocusAsync method to multiple relevant components from the text inputs, data and time pickers, drop-down lists, buttons and checkbox categories (AutoComplete, Textbox, TextArea, Editor, ColorPalette, to name a few). The method is a feature developed in direct relation to a customer request in the Telerik Blazor Feedback Portal.
We encourage you try out the latest and greatest from Telerik UI for Blazor and let us know what you think!
– 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!