Telerik UI for Blazor 2.24 release brings new PanelBar and Card components, Grid and TreeList updates, Blazor Reporting demo integration, Calendar templates, a new Visual Studio Code Converter Wizard and much more!
Hey developer folks, it’s Telerik R2 2021 release time and we’re excited to announce that the Telerik UI for Blazor component suite reached a new milestone of 75+ truly native components.
While we have continuously shipped new components and features in the period of January to May 2021, we are happy to share that there are even more native Blazor goodies coming your way with the current Telerik UI for Blazor 2.24 release. New PanelBar and Card components are here, along with Grid and TreeList Rows Reorder and Multi-column headers, Virtualization in multiple DropDown components, Blazor Reporting demo integration, Calendar templates, new Visual Studio Code Converter and more.
Below is a summary of the R2 2021 Telerik UI for Blazor release content shipped between January and May (Telerik UI for Blazor 2.22, 2.23 and 2.24 releases):
And if you are eager to learn more about the latest additions in Telerik UI for Blazor 2.24.0 release, read ahead and see in detail all the new components, features and tooling that will help you speed up development of Blazor Server and WebAssembly apps.
The new Telerik Blazor PanelBar is a data-bound component that renders expandable hierarchical panels consisting of title and content. The PanelBar supports single and multiple expand modes, templates for rendering custom content, flat and hierarchical data, as well as many configuration options for its item and data binding. Like the rest of the Telerik UI for Blazor component, it comes with built-in keyboard navigation support and accessibility.
Telerik UI for Blazor PanelBar UI Component
You can bind the PanelBar to either flat data (the entire collection of panel bar items is available at one level) or hierarchical data (the collection of child items is provided in a field of its parent’s model).
Telerik UI for Blazor PanelBar Hierarchical Data
Defining the PanelBar item content is done via templates—you have the flexibility to set HeaderTemplate and ContentTemplate for all the items or for items of a certain level.
The PanelBar expand mode (ExpandMode property) can be configured to single or multiple, allowing many panels to be expanded. Additionally, you can set a panel as disabled and prevent interaction with it.
Telerik UI for Blazor PanelBar Multiple Expanded Items
The PanelBar exposes several events that allow you to respond to user actions and implement custom logic:
The new Card component is a great companion for building attractive Blazor apps with its multiple built-in features. You can easily organize card content in different orientations, take advantage of the theme color variations and define custom card layout such as group, list or deck.
Telerik UI for Blazor Card UI Component
While the Card itself can be considered a building block when arranging your layout, it has multiple building blocks itself, which make it really easy and fun to use and customize each part of it: CardHeader, CardImage, CardBody, CardActions, CardFooter, CardSeparator, CardTitle and CardSubtitle.
The Telerik Blazor Card lets you easily rearrange its building blocks by switching between the two built-in orientation options for your layout—horizontal and vertical.
Telerik UI for Blazor Card Orientation Modes
The Telerik Blazor Card provides an attractive way of presenting content through its theme color variations. Pick the right one for you—primary, secondary, success, error, light, dark and more.
The Card actions buttons can be organized horizontally or vertically and laid out in four ways: at start, center or end, or stretched buttons that will fill the whole container with equal size.
Using data collections, you can dynamically render Telerik Blazor Cards and create beautiful layouts as shown in the image below.
Telerik UI for Blazor Data Cards
The Telerik Blazor Card component can be transformed into a collapsible/expandable card by placing the card body and actions within the TelerikAnimationContainer UI component. This allows for showing a larger number of cards and flexibility to expand only needed cards.
Telerik UI for Blazor Expand & Collapse Card Example
As the product and our demos start and end with you in mind, we listened to your feedback and added a demo showcasing the integration between Telerik UI for Blazor and Telerik Reporting.
The Blazor reporting demo showcases the integration between the Grid and Report Viewer. Switch from Grid tab to Reporting and see how your grid data transforms into a report with many built-in features, such as interactivity of grouped items and ability to export to various file formats such as Word, Excel, PPT and more. The report also comes with handy user features such as search, zoom in and out, full-screen mode, printing and more!
Telerik UI for Blazor Grid & Blazor ReportViewer Integration
Our fellows at Telerik Reporting Team expanded the Blazor reporting capabilities and in addition to the Report Viewer, they just shipped a new version enabling you to integrate Web Report Designer functionality in your Blazor apps. Read the complete story in the dedicated release blog post.
The new Grid multi-column headers feature allows you to visually group relevant columns under a common header through the nested Columns RenderFragment under the GridColumn.
Telerik UI for Blazor Grid Multi-Column Headers
The Telerik Blazor Grid now shines with a row drag-and-drop feature that renders a column with a drag handle. Using RowDraggable parameter, you can instantly enable reordering rows within a grid or drag and drop between grids.
Telerik UI for Blazor Grid Rows Drag & Drop
Just like the Grid, the Telerik Blazor TreeList got expanded with two power features—drag-and-drop rows and multi-column headers.
The built-in feature for defining multi-column headers in the TreeList can be achieved through the nested Columns RenderFragment of the TreeListColumn.
Just like the Grid, the Telerik Blazor TreeList got the shiny row drag-and-drop feature. You can reorder one or multiple rows between different parents in the same TreeList or between different Telerik TreeList instances.
Telerik UI for Blazor TreeList Rows Drag & Drop
The Telerik Blazor Select components—namely the AutoComplete, ComboBox, DropDownList and MultiSelect—received a major boost with the new virtualization feature enabling loading items on demand based on current scroll position.
To take advantage of selects virtualization, you need to set the ScrollMode property, plus provide specific values for the PopupHeight, ItemHeight and the PageSize properties, which configure the size of the “page” to be rendered/loaded on each scroll.
You can virtualize a large set of local data for blazing fast UI performance, and even fetch each page of data from a remote service to optimize the data queries and loading.
Telerik UI for Blazor DropDownList Virtualization
With the current release, the Telerik Blazor DropDownList is enhanced with a filtering capability. Using an input shown at the top of the dropdown popup, users can type in a subset of a searched value and filter the underlying datasource. The supported string filtering operators include: Contains, DoesNotContain, EndsWith, IsContainedIn and StartsWith.
Telerik UI for Blazor DropDownList Filter
The Telerik Calendar for Blazor now supports custom rendering via templates for the Month, Year, Decade and Century views of the component. In the screenshot below you can see custom rendering of the days in the Month view based on certain conditions.
Telerik UI for Blazor Calendar Template
To apply further conditional styling to the calendar cells, you can now use the CellRender event and apply additional logic.
Telerik UI for Blazor CellRender Event
The ShouldRender property allows you to make the component re-render after async callback is attached to certain events. We have exposed the feature to multiple relevant events in the following components:
Recognizing the growing demand and interest for Visual Studio Code, we added another Telerik time and effort saver to it. In addition to the existing Telerik Blazor Convert Wizard for Visual Studio, with this release we added new Visual Studio Code Converter, which allows seamless setup and configuration of Telerik UI for Blazor components in existing Blazor projects from within your favorite IDE.
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.
Telerik and Kendo UI Forums Hub
Head over to the Telerik UI for Blazor page, download a free trial of Telerik UI for Blazor 2.24.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.24.0. directly in your Blazor solutions.
Be sure to sign up for the Telerik R2 2021 release webinar and live Twitch sessions to see the newly released components and features in action:
- 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!