We are glad to inform you that our Essential Studio® 2022 Volume 2 release is available now!
This blog will summarize the new features and components available in the Syncfusion Blazor platform for this 2022 Volume 2 release.
The new Blazor Pager component can be used to split a data set into multiple pages for a great user experience. Navigation can be achieved with built-in numeric elements, a dropdown, and buttons that can be customized with the help of rich APIs. The following are the key features of the new Pager component:
Note: For more details, refer to the Blazor Pager component live demo and documentation.
The following Blazor components were developed to meet industry standards and are now marked as production-ready.
| Blazor component | Demo | Documentation |
| Blazor Diagram | Blazor Diagram demo | Blazor Diagram documentation |
| Blazor Carousel | Blazor Carousel demo | Blazor Carousel documentation |
Syncfusion’s Blazor components no longer support .NET 5 since Microsoft ended .NET 5 support in May of 2022. We will continue to support .NET 3.1 and .NET 6. We recommend that you upgrade to .NET 6 to take advantage of the new features and components in the latest release.
If you are unable to update to .NET 6, you may continue to use version 20.1 in your .NET 5 projects.
Each component has only one script reference. There is no need to reference its dependent component scripts in an app as they are handled internally, and their dependency scripts are loaded automatically. Blazor component scripts are available in CDN with this release.
Note: Refer to individual control script reference documentation.
You can add a component script reference in several ways. Following is an example with the TextBox component script.
From Syncfusion.Blazor NuGet package.
<script src="_content/Syncfusion.Blazor/scripts/sf-textbox.min.js" type="text/javascript"></script>
From individual NuGet packages.
<script src="_content/Syncfusion.Blazor.Inputs/scripts/sf-textbox.min.js" type="text/javascript"></script>
Reference scripts from CDN.
<script src="https://cdn.syncfusion.com/blazor/20.2.36/sf-textbox.min.js" type="text/javascript"></script>
You can now enable or disable animation globally by using the Animation property. By default, the animation works based on the individual component’s animation property value:
services.AddSyncfusionBlazor(options => { options.Animation = GlobalAnimationMode.Disable; }); The asynchronous methods have Async as their suffix, which was introduced in the 2020 Volume 4 release based on Microsoft’s suggested naming conventions. To avoid confusion with method naming, we removed the duplicated methods from our components.
For example, both methods ShowColumnsAsync and ShowColumns have the same functionality. So, we deprecated the ShowColumns method.
The most anticipated feature, sticky headers, is now available in the Blazor DataGrid component.
Feedback: Need to provide sticky header support to Grid.
A sticky header maintains the header in a fixed position when scrolling the content. You can enable sticky headers with the EnableStickyHeader property.
Note: For more details, refer to the Example of Sticky Header in Blazor DataGrid Component.
Perform CRUD operations directly on rows in the current viewport when the row and column virtualization features are enabled.
Note: For more details, refer to the Example of Virtual Scrolling in Blazor DataGrid Component.
The Blazor Diagram component is now production-ready. The following features have been added to the Diagram component.
This feature allows users to easily access frequently used operations. By default, cut, copy, paste, undo, redo, group, ungroup, and select all menu items are displayed on right-click. The menu items can be customized.
Note: For more details, refer to Flow Chart using Blazor Diagram Component Example.
A complex hierarchical tree layout arranges nodes in a tree-like structure, where the child node can have more than one parent. This layout is an extended version of the hierarchical tree layout.
Note: For more details, refer to Complex Hierarchical Tree Example using Blazor Diagram Component.
This feature allows users to control the stacking order (z-order) of the diagram elements such as nodes, connectors, and groups. Users can arrange the selected objects on the diagram page with z-order values by using the following features:
Note: For more details, refer to Example of Z-Order Commands in Blazor Diagram Component.
This feature allows users to show and hide child nodes in the parent-child relationship diagram either by user interaction on the nodes or programmatically.
Note: For more details, refer to Example of Expand And Collapse Nodes in Blazor Diagram Component.
This feature allows users to reset the current zoom value of the diagram page to 100% when the diagram is in zoom-in or zoom out state.
Take a look at the breaking changes for the Diagram component before upgrading to the newer version.
Also, check out the breaking changes in Blazor Diagram component in the 2022 Volume 2 release.
The Blazor Word Processor component gains the following major features with the 2022 Volume 2 release.
This feature keeps users from accepting or rejecting the tracked changes while editing a Word document. All reviewers can view the document and do their corrections, but they cannot accept or reject any tracked changes in the document. Only the author can accept or reject the changes.
Note: For more details, refer to Example of Track Changes in Blazor Word Processor Component.
Add borders to the paragraphs in a Word document. Using borders, you can decorate paragraphs to set them apart from other paragraphs in the document.
Note: For more details, refer to Example of Paragraph Formatting in Blazor Word Processor Component.
The Syncfusion Word Processor includes the following enhancements to preserve RTL text in a Word document:
This gives users a Microsoft Word-like experience when working with RTL languages.
The new features included in the Blazor Gantt Chart are as follows.
Render only the columns in the current viewport, while other column elements render dynamically on horizontal scrolling.
Note: Refer to Example of Virtual Scroll in Blazor Gantt Chart Component.
Move or resize taskbars and map taskbar dependencies with touch interactions in predecessor and taskbar editing in the Gantt Chart component.
Note: Refer to Example of Editing in Blazor Gantt Chart Component.
Show the tooltip with current date values when dragging or moving the taskbar in a Gantt chart. Users can easily identify the new date values while dragging.
Note: Refer to Example of Tooltip Template in Blazor Gantt Chart Component.
Bind ObservableCollection-type data to the Gantt Chart component. INotifyPropertyChanged support was added to all Gantt Chart operations.
Note: Refer to Example of Observable Collection in Blazor Gantt Chart Component.
Following are the new features included in the Blazor TreeGrid component.
Perform CRUD operations on rows in the current viewport directly when row and column virtualization features are enabled.
When row and column virtualization features are enabled, you can freeze specific columns while scrolling through other columns.
The Blazor Maps component now supports rendering GeoJSON files with MultiLineString, MultiPoint, and GeometryCollection geometry types:
Legend support is provided for markers rendered over online map providers such as OSM, Bing, and Mapbox. Additionally, a legend for layers and markers on sublayers over online map providers is supported.
The Blazor Pivot Table supports the following features in this 2022 Volume 2 release.
A built-in option in the toolbar UI lets users show grand totals (summarized totals) either at the first or last position in the Pivot Table component’s row and column axes.
Note: Refer to Example of Toolbar in Blazor Pivot Table Component.
UI actions in the Pivot Table’s toolbar options can now be identified using the action begin and action complete events. The action failure event is triggered when a UI action does not achieve the desired result. Overall, these events help the app interact with users on a regular basis.
The Blazor Carousel component was developed to meet industrial standards and is production-ready. You can enjoy the following features in the Blazor Carousel component in this 2022 Volume 2 release:
Play or pause the slides when hovering the mouse pointer over a carousel element.
Define custom animations on the app end.
This feature allows users to create subfields for columns in the Blazor Query Builder by specifying either a complex data source or nested columns.
Note: Refer to the Example of Complex DataBinding in Blazor Query Builder Component.
Insert text programmatically in the Markdown editor at the current cursor position using the ExecuteCommandAsync public method of the Blazor Rich Text Editor.
The public method GetElementInfoAsync of the Blazor Scheduler gets the mouse target element information. This helps you display the context menu based on the current target.
The Blazor Charts component delivers the following features.
Template support for a shared tooltip in charts.
MouseMove, MouseClick, MouseUp, MouseDown events identify the mouse actions in the chart.
The Blazor Input Mask component now provides the option to obtain a value with literal characters.
Note: Refer to the Example of Literals and Prompt in Blazor Input Mask Component.
The Blazor Dialog component allows you to render and show confirm, alert, and prompt dialogs on demand by calling the public utility methods.
Note: Refer to the Example of Predefined Dialogs in Blazor Dialog Component.
Thanks for reading! In this blog post, we have seen the new, valuable features and enhancements included in our Blazor components for the 2022 Volume 2 release. You can check out the list of all the features in our release notes and What’s New pages. Try out these stunning new features and leave your feedback in the comments section below!
If you are not yet a Syncfusion customer, try our 30-day free trial to check out these features.
If you have questions, you can reach us through our support forums, support portal, or feedback portal. As always, we are happy to assist you!