Telerik UI for Blazor
Breakdown complex flows into smaller steps with the new Telerik UI for Blazor Stepper component. Create a sequence that visualizes progress and makes it easier to keep track of your advancement or use the Stepper for a navigation in your project. Easily implement custom icons, various fonts and colors, validation logic and benefit from the vertical and horizontal orientation settings.
The Wizard component enables you to create multi-step processes and guide users step-by-step in your application. You can easily integrate the Wizard with a Form component to break long processes into smaller steps and allow users to fill one form at a time. If you integrate it, each step of the Wizard will be a separate Form, and you will be able to use all of the input component functionalities, such as custom textboxes, labels and data validation.
The new Telerik UI for Blazor StackLayout component lets you to arrange UI elements horizontally or vertically in a stack. You can use it to organize content in your project both in a row or in a column, whichever fits your needs. Тhe component is similar to the StackLayout in WPF, so it will let developers with desktop background easily build web layouts in a familiar way.
With the GridLayout component for Telerik UI for Blazor you can easily organize UI elements in a grid-layout system with both rows and columns. It comes with various customization options, such as row and column spacing, vertical and horizontal alignment, row and column span and more. Тhe component is similar to of the GridLayout in WPF, so it will let developers with desktop background to easily build web layouts in a familiar way.
The newly added Telerik UI for Blazor PanelBar component serves as a hub for expandable panels. It is suitable for presenting users with large data in a manageable way as they choose when and what to expand depending on their needs.
Telerik UI for Blazor gained 3 new components dedicated to validation – the Validation Summary (gathers all errors at one place to display), Validation Message (shows where the error occurred, but next to each Form field) and Virtual Tooltip (show where the error occurred with a tooltip on the incorrect field).
The grid columns provide a way to specify alignment for the content with either Left, Right or Center column alignment to structure your data in the most convenient way for your needs.
Dragging and dropping is the quickest, most user-friendly way to reorder data rows and with the R2 2021 release, the Grid now supports that functionality. Get started with the new feature by enabling the RowDraggable attribute and let the control take care of the rest.
Now you can group related columns in the Telerik UI for Blazor Grid control under a parent column. Display contact information such as a physical address, email address and a telephone numbering subcolumns under a “Contact info” column.
The large amount of Grid customization features was just expanded to also include the ability to hide or show every row and column – all depending on the device the user is loading the app on.
Editing with a minimal number of keystrokes, like how MS Excel operates, is now available in Telerik UI for Blazor Grid – hit Enter to confirm the current value and automatically move onto the next cell in the column. The input content is highlighted by default so you can replace it without hunting for the mouse to select it.
Similar to the Microsoft Excel filter function, you can enable the newly added Multi-checkbox filter to help users quickly find Grid rows containing a specific value. Find all sales orders made in a given month or all times a certain patron visited the gym.
Keyboard navigation can now be used in virtualized scenarios in both the Grid component and the TreeList component. There are several differences in the shortcuts that which apply in virtualized and non-virtualized scenarios. For example, for a cell not in edit mode, the Home and End buttons would move focus to the first or last cell in the virtual column range, pressing Alt + Home/End button would result in moving focus to first/last cell in a row. The F2 button will put the row in edit mode, if inline edit mode is enabled and Tab will focus the next focusable element in the virtual column range.
The Telerik UI for Blazor Grid and TreeList components now allow you to have conditional command buttons depending on the properties of the row item. This is achieved by adding the current row item as a context (of type object) to the current ChildContent parameter.
With this release we are adding a built-in grouping feature to the Telerik UI for Blazor Scheduler component. This feature enables users to easily book required resources, such as meeting rooms in the office, equipment etc, as well as check the availability of such beforehand by grouping appointments by resources. It supports both Horizontal and Vertical group orientation.
We have added FocusAsync method to multiple relevant components as a direct response to a customer request in the Telerik UI for Blazor feedback portal. The list includes AutoComplete, Textbox, Button, Editor and many others from the text inputs, data and time pickers, dropdown lists, buttons and checkbox categories.
The Grouping functionality is now available for 4 of the Telerik UI for Blazor components: Multi-Select, Drop Down List, Auto Complete and Combo Box. The functionality helps users navigate easily through the options in the list and choose best what they want from each category. The category label on top of the list makes it easier to locate the particular item you are looking for by first navigating to the appropriate category.
Similarly to the Grid, the Telerik UI for Blazor TreeList now also supports dragging and dropping to reorder items within the component for a more user-centric experience.
We’ve expanded the capabilities of the Calendar component by adding two ways to modify how days get rendered:
Templates allow you to specify an HTML template that will be used for each cell. Templates may contain arbitrary Telerik UI for Blazor controls.
The OnCellRender event is fired whenever a cell is rendered and serves the same purpose with the caveat of being more code-driven as compared to the template option.
Users might have a hard time finding what they are looking for in a 300-element DropDownList. That’s why the component now supports a filter to help quickly find whatever’s needed. Customers can just type USD to immediately get to the bottom of a currency list.
Web basics like Alert, Confirm and Prompt can be tremendously helpful to quickly get information from the user but due their unruly nature are almost never used in commercial software.
Multiple Telerik UI for Blazor Window components can now be overlayed over each other. This lets you create windows from other windows if necessary while the user keeps the flexibility to rearrange them as they see fit.
The Editor components now supports copying and pasting images directly in the editing area to save even more time for the end user – they no longer have to worry if pasting a large piece of external content will preserve the media inside it.
While the Editor takes care to preserve the original content as much as possible, it will now clean any pasted content from information that other software has added – like the hidden tags MS Word or other web pages add when copying from a web page.
The latest Telerik UI for Blazor release brings new commands to the Editor component – users can now change the text’s color and background (i.e. highlight the text) thanks to the ColorPalette component.
All select-like components have been enhanced with the ability to virtualize their items. Virtualization significantly speeds up loading and displaying large lists within the component UI. Combined with the new DropDownList filtering feature, it results in a blazing fast experience.
Telerik UI for Blazor is the 1st Blazor UI component suite that let’s you build hybrid apps via the newly introduced Microsoft BlazorWebView controls for WPF, WinForms and MAUI apps! This enables you to embed Blazor functionality and any of the 75+ Telerik Blazor components into existing and new Windows desktop apps based on .NET 6. One of the many benefits to be native all the way!
Check our dedicated sample project which shows Telerik UI for Blazor web components running in this hybrid scenarios inside native WPF, WinForms and MAUI apps.
In the latest distribution package, you will find Telerik.Documents.Flow.FormatProviders.Doc NuGet that will allow you to import .DOC file format, and then manipulate, convert and export it to any of the other supported format providers.
The newly added ShouldRender property is designed to let you force re-rendering of a component from an event that normally wouldn’t support this behavior. Use it whenever you modify the component in some way and require an instant re-render. This is the full list of events to which this property has been added:
Grid: OnRowClick, OnRowContextMenu, OnRowDoubleClick, OnExpand, OnCollapse
TreeList: OnExpand, OnCollapse
Splitter: OnExpand, OnCollapse, OnResize
TreeView: OnExpand, OnItemClick
We added a new step-by-step demo showing how to integrate Telerik UI for Blazor and Telerik Reporting. It features an example of exporting the data stored in our most popular control, the Grid, to a report driven by Telerik Reporting.
Adding Telerik UI for Blazor in existing projects is now hassle-free thanks to the VS Code Converter. Simply follow run the converter and you’ll get access to the best Blazor UI suite in no time.
The Blazing Coffee demo application shows how a full-stack .NET application can be built with ASP.NET Core, Blazor WASM, and Telerik UI for Blazor. Within the demo you can see in action components like: Drawer, Grid, DropDownList, DateRangePicker, Chart, Upload, Tooltip and more! Also, the sample app showcases usage of globalization and localization, authentication, authorization as well as applying light and dark themes. Make sure to check it out on our Blazor demos hub page.