Check out everything that's new in the latest Telerik UI for Blazor release. From the new Form component to improved validation and more, we aim to help you develop amazing Blazor apps!
Hey Blazor and Telerik UI for Blazor Folks, the native Blazor Form component is here and we are super excited to share with you the new updates that are part of Telerik UI for Blazor 2.22.0 release! Three Validation components, Grid Excel-like editing and navigation, TreeList enhancements, Window draggable, additional features in our input-based controls and more!
Read ahead to find out more about the full Telerik UI for Blazor 2.22.0 release components and features which you can plug and play in your Blazor Server and WebAssembly apps.
With the new Telerik Form component for Blazor, the generation and management of forms is simple thanks to the multiple built-in features, various parameters and exposed events. You can easily use the automatic generation of fields or achieve your own Blazor app-specific layout. Use custom editors, organize them into groups and columns, apply validation, set the Form orientation and more!
Telerik UI for Blazor Form Component
To use the Form component with a model, simply add the <TelerikForm> tag and provide an object to the Model parameter of the component. To enable form validation, you need to add <FormValidation> tag in it and provide a validator—for example the DataAnnotationsValidator that comes with the Blazor framework. The Form also works with any validator (including third-party) that is compatible with the EditForm and EditContext such as ObjectGraphDataAnnotationsValidator and FluentValidation.
To use the Form component with an EditContext, you need to add the <TelerikForm> tag and provide an object of type EditContext to the EditContext parameter of the Form. To apply validation, you can use either the <FormValidation> tag or the extensions methods of the EditContext. This lets you employ more complex business logic that uses the EditContext features.
The Telerik Blazor Form can generate editors based on the model fields (from both a Model and EditContext).
Telerik UI for Blazor Form Autogenerated Fields
The following data types are supported out-of-the box and they use the following default editors:
In addition to the default editors in the Form component, you can also use custom editors defined through the FormItem tag. To use custom editors, you specify their collection in the FormItems tag (a child of the TelerikForm tag).
The simplicity of the editors customization is provided by the multiple parameters exposed by the FormItem tag: LabelText, Id, Hint, Field, Field Type, Class, Template and more!
Telerik UI for Blazor Form Custom Editors
Forms often need to have their fields organized either logically or for a better user experience. You can easily arrange the fields in a Telerik Form component into groups using the FormGroup tag, which exposes the following parameters:
Telerik UI for Blazor Form Grouping
The Form component can take vertical (default) and horizontal orientation. Setting the Form orientation to horizonal will place the labels to the left hand-side of the editors.
Telerik UI for Blazor Form Orientation
The Telerik Form component exposes three events that allow you to respond to user actions and implement custom logic.
To enable easy styling and customization of validation messages in your Blazor app we shipped three options: TelerikValidationMessage, TelerikValidationTooltip and TelerikValidationSummary.
These components add customization and localization options on top of the standard ValidationSummary and ValidationMessage which the Blazor framework provides. The three Telerik Validation Components can be used together with the Telerik Form or with any form that provides an EditContext.
Let’s review the Telerik validation components, features and use cases for each of them.
The Telerik Validation Message for Blazor is applicable per form field and expands the standard ValidationMessage provided by the framework. The TelerikValidationMessage includes built-in features for:
Telerik UI for Blazor Validation Message Template
Another way to point to an invalid input is using the Telerik Validation Tooltip component. It renders the validation message as tooltip when users hover the editor and shows up as popup rather than an inline element.
The TelerikValidationTooltip comes with options to adapt it any way you need by setting its:
Telerik UI for Blazor Validation Tooltip Position
The Telerik Validation Summary for Blazor is built on top of the standard ValidationSummary provided by the framework and lets you customize the summary of all validation errors through Templates and Class Parameter.
Telerik UI for Blazor Validation Summary Template
We enhanced the Blazor Grid InCell edit mode to allow smooth navigation and editing through the keyboard resembling the experience of managing data in Excel spreadsheets.
By using the Tab key users can go from one grid editor to the next one on the same row—respectively, with Shift+Tab, they can navigate to previous cell. Using Enter will activate “Edit mode” for a focused cell or will commit the changes and open the next row in the same column for editing. When a cell is opened for editing, it will focus all of its content (both with the keyboard, and with a mouse click) so you can start typing immediately.
Telerik UI for Blazor Grid Excel-Like Editing
Grid cell edits can be committed in three ways:
You can make the Grid rows selection exclusive only to the case when users have checked a dedicated checkbox column. This can easily be achieved by setting to true the new parameter CheckBoxOnlySelection of the GridCheckboxColumn. When this property is set to true, clicking elsewhere on the row with the mouse will not have a selection effect, thus you can reserve it for edit or other user actions.
Telerik UI for Blazor Grid Checkbox-only Selection
Telerik UI for Blazor Grid Custom Column Menu
The TelerikCheckbox will replace the default boolean editor in the Telerik Grid component. Changing the previous <input type="checkbox"> to <TelerikCheckbox> will enable consistent styling when switching into edit mode.
With this release we are enabling the integration of two popular Grid features—frozen/locked columns and column virtualization. This will allow users to keep important columns visible while scrolling seamlessly through large volumes of Grid data that utilizes column virtualization.
The Telerik Blazor Window component is now enhanced with draggable functionality. You can move the window around through its title bar, allowing you to easily rearrange the screen in a way it best fits your needs. Moving the Window is enabled by default and you can stop it by setting the Draggable parameter of the Window component to false.
In case you are using the “Left” and “Top” values to provide an initial position for a draggable window, you now need to make sure to @bind- them, so that they can update.
Telerik UI for Blazor Window Draggable
The TreeList component is another heavily used data component in Blazor applications, so we try to give it a little love with almost every release.
Users working with hierarchical data in the TreeList can now benefit from Excel-like editing and navigation. Keeping the same logic as in the Telerik Grid users can navigate through data in InCell edit mode with Tab (or Shift+Tab) and go into edit mode with the Enter key.
It is now possible to configure your TreeList for row selection only though a dedicated treelist checkbox column. This can easily be achieved by setting to true the new parameter CheckBoxOnlySelection of the TreeListCheckboxColumn.
With the current release the TelerikCheckbox component will replace the default boolean editor in the Telerik Grid component, allowing consistent styles when editing data.
Telerik UI for Blazor TreeList Checkbox-only Selection
With the current Telerik UI for Blazor release, a large number of input-based components got their own OnBlur event. The OnBlur event fires when the component loses focus and is now exposed in the following list of components: AutoComplete, ComboBox, DateInput, Date and Time Pickers, DropDownList, MaskedTextBox, MultiSelect NumericTextBox,TextArea and TextBox.
We are complementing the list of components that already support TabIndex property such as ComboBox, DateInput, Date and Time Pickers, NumericTextBox, MultiSelect and more!
We encourage you try out the latest and greatest from Telerik UI for Blazor and let us know what you think!
As always, thank you from the Telerik UI for Blazor Team at Progress. Please be sure to leave us your feedback at our dedicated Blazor feedback portal or in the comment section below!
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!