What’s New in 2021 Volume 4: Blazor

We are glad to inform you that our Essential Studio 2021 Volume 4 is available now! In this blog, I am going to walk you through the new features and components available in the Syncfusion Blazor platform for this 2021 Volume 4 release.

.NET 6 support

Now, you can enjoy .NET 6 support for all our Blazor components. We are shipping separate assemblies for .NET 6 support in our Blazor NuGet packages.

.NET 6 comes with a lot of improvements for Blazor, such as .NET MAUI Blazor, ahead-of-time (AOT) compilation for WebAssembly apps, hot reload, dynamic components, and error boundaries.

New Signature component (preview)

The new Blazor Signature component captures smooth and realistic signatures. It allows you to save signatures as images and integrate them into documents. You can use your finger, pen, or mouse on a tablet and other devices to draw your signature in this component. You can have a background color, stroke color, and background image.

Refer to the following image.

Note: Check the Example of Default Functionalities in Blazor Signature.

Preview-to-finished components

The following components are marked as production-ready:

• Breadcrumb
• Icon

Migration from Newtonsoft.Json to System.Text.Json

We’ve replaced the Newtonsoft.Json dependency with System.Text.Json in all our Syncfusion Blazor individual NuGet packages except for the Word Processor and Diagram (Classic) components.

Note: In our live site, currently, we are using the Newtonsoft.Json dependency for serialization at the app end. We have plans to replace that with the System.Text.Json in the upcoming 2022 Volume 1 release.

Chart

The Blazor Charts component grows with the following features in the 2021 Volume 4 release.

RTL

Users can set right-to-left (RTL) rendering for all chart elements like legends, tooltips, data labels, and titles.

Note: Check the Example of RTL in Blazor Charts.

Grouped column

Group data points in column, range column, and bar charts based on categories.

Note: Check the Example of Grouped Column in Blazor Charts.

Reversed legend

This feature allows users to reverse the rendering order of the legend items in a chart.

Note: Check the Example of Pie Chart with Various Radii in Blazor Charts.

Legend wrap

You can wrap the legend text that overflows the container into multiple rows.

Note: Check the Example of Pie Chart with Legend in Blazor Charts.

Other improvements

• Color for highlighted points. Check the Example of Selection in Blazor Charts.
• Fixed width support for the chart area.

Blazor Scheduler

The Blazor Scheduler component gains the following features in this 2021 Volume 4 release.

Custom month view

This feature provides a flexible month view that helps to customize the beginning of the week and the number of weeks in the current month view.

Note: Check the Example of Custom Month View in Blazor Scheduler.

Performance enhancements

The CRUD performance was improved up to 1.5X for the timeline day and month views in the Scheduler for WebAssembly apps.

Time zone display name

Customize the display names of the time zones in the editor window based on locale.

Excel export customization

Customize the header names while exporting the Scheduler to Excel format.

Note: Check the Example of Exporting to Excel in Blazor Scheduler.

Spanned events

Display spanned events (events longer than 24 hours) in the work cell area of the day, week, and workweek views.

Diagram

The Blazor Diagram component adds the following user-friendly features in the 2021 Volume 4 release.

Touch gestures

Perform interactions such as selecting, dragging, resizing, and rotating diagram objects, as well as zooming the diagram page, with touch gestures such as tap, double-tap, and pinch.

Tooltip

Display a tooltip to provide information about the size, position, and angle of diagram elements when dragging, resizing, and rotating them.

Print and export

Export the diagram content as an image file (JPEG, PNG, or SVG format) for further use. Print the diagram with options to change the orientation or size of the page and print the entire diagram on a single page or across multiple pages.

Word Processor (document editor)

Word 2013 justification

This feature improves the accuracy of text justification in the Blazor Word Processor to match the justified alignment of Microsoft Word.

Note: For more details, refer to the Example of Paragraph Formatting in Blazor Word Processor.

Other improvements

An alert window will appear when the specified rows and columns count exceeds 63 and 32,767, respectively, in the insert table dialog.

Breadcrumb

Overflow modes

The following list explains the new overflow modes in the Blazor Breadcrumb component:

• Menu: Shows the number of breadcrumb items that can be accommodated within the container space and creates a submenu with the remaining items.
• Wrap: Wraps the items on multiple lines when the Breadcrumb’s width exceeds the container space.
• Scroll: Shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space.
• None: Shows all the items on a single line.

Note: Check the Example of Overflow Modes in Blazor Breadcrumb.

Blazor DataGrid

You can enjoy the following features in our Blazor DataGrid component in the 2021 Volume 4 release.

Select multiple rows or cells by dragging

Select multiple rows or cells by mouse or touch dragging on the DataGrid.

Note: Check the Example of Drag Selection in Blazor DataGrid.

Other improvements

• Dynamically update the page size with the given height and refresh the virtualization-enabled DataGrid based on the updated page size.
• Scroll a specific row or column into view based on the row index and column index.

TreeGrid

Adaptive view

The Blazor TreeGrid component UI has been redesigned to provide a better viewing experience and usability on small screens. This interface adaptively renders the filter, pager, and edit dialogs.

Note: Check the Example of Adaptive View in Blazor TreeGrid.

Other improvements

• Use new ExpandByKeyAsync and CollapseByKeyAsync methods and improved ExpantAtLevelAync and CollapseAtLevelAsync methods to expand or collapse a record at a particular level, even though its ancestors are collapsed in the tree grid.
• Customize the hotkeys for IndentRow, OutdentRow, MoveRightCell, MoveLeftCell, MoveUpCell, and MoveDownCell actions with the desired key combinations.

Rich Text Editor

Enter key customization

In the Blazor Rich Text Editor, customize the tags appended when the Enter or Shift+Enter keys are pressed using the EnterKey and ShiftEnterKey properties, respectively.

Note: Check the Example of Enter Key Configuration in the Blazor Rich Text Editor.

Gantt Chart

The new feature updates in the Blazor Gantt Chart component are as follows.

Predecessor support for parent tasks

Now, we can establish task dependency between parent and child tasks or among multiple parent tasks in the Gantt Chart.

Note: Check the Example of Editing in Blazor Gantt Chart Component.

Other improvements

• Use ExpandbyKeyAsync and CollapseByKeyAsync methods.
• Expand or collapse a record at a particular level, even though its ancestors are collapsed, using the ExpandAtLevelAsync or CollapseAtLevelAsync methods.
• Customize the hotkeys for the IndentRow, OutdentRow, MoveRightCell, MoveLeftCell, MoveUpCell, and MoveDownCell actions with the desired key combinations.

File Manager

The Blazor File Manager component gains the following features in the 2021 Volume 4 release.

Sortable navigation pane

Sort the files in the navigation pane of the Blazor File Manager component. Users can display the files in ascending or descending order.

Sort by

Customize the default sort field of the File Manager component. Users can sort and display the files based on various fields like name, size, and date modified in both the detail and large icon views. Also, you can perform custom column sorting.

Dialog

Load on demand

Render the Blazor Dialog component dynamically while maintaining or removing the DOM elements when opening or closing the dialog.

TextBox

Validation on keypress

In the Blazor TextBox component, you can validate input on every keypress instead of on change.

Conclusion

Thanks for reading! In this blog post, we have seen the new features and enhancements included in our Blazor components in the 2021 Volume 4 release. You can check out the list of all our new features in the release notes and What’s New pages. Try these features and share your feedback in the comments section below.

For existing customers, the new version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial.

You can reach us through our support forums, support portal, or feedback portal. As always, we are happy to assist you!

Related blogs

• Syncfusion Essential Studio 2021 Volume 4 Is Here!
• Create an Org Chart to Elegantly Visualize Hierarchical Data in Blazor WebAssembly
• Build World-Class Blazor WebAssembly Apps with Globalization and Localization
• Simple Steps to Upload Files to Azure Blob Storage in Blazor App
• Syncfusion Controls Support .NET 6 and Visual Studio 2022