DEV Community

Cover image for What’s New in Syncfusion Blazor: 2022 Volume 4
Jollen Moyani for Syncfusion, Inc.

Posted on • Originally published at syncfusion.com on

What’s New in Syncfusion Blazor: 2022 Volume 4

Syncfusion has released a new volume of updates for its Blazor components, adding several new features and enhancements for our beloved users.

This blog will highlight some of the most notable updates in the Syncfusion Blazor suite for the 2022 Volume 4 release.

.NET 7 support

First and foremost, Syncfusion has added .NET 7 support to all its Blazor components. This means that developers can now use the latest version of .NET with Syncfusion’s Blazor components, taking advantage of all the new features and improvements in .NET 7.

.NET 3.1: End of support reached

However, it’s important to note that Syncfusion will no longer support .NET 3.1, as it has reached the end of its support cycle. If you are currently using .NET 3.1, it is recommended that you upgrade to .NET 6 to continue receiving updates and support. If you can’t upgrade to .NET 6, you can continue using version 20.3 of Syncfusion’s Blazor components in your .NET 3.1 projects.

New components

In addition to the .NET 7 support, Syncfusion has added the following new components to its Blazor platform in this 2022 Volume 4 release:

Let’s look at them in more detail!

Blazor Media Query component

The new Blazor Media Query component helps you build responsive, adaptable layouts for your web apps. It detects changes in the browser’s size and adjusts your layouts accordingly, ensuring that your apps look great and function well on various devices and screen sizes. It provides an optimal user experience no matter the type of device used.

Responsive Layouts of Blazor Media Query Component

Responsive Layouts of Blazor Media Query Component

Note: For more details, refer to the Blazor Media Query demo and documentation.

Blazor Mention component

The new Blazor Mention component displays a pop-up suggestion list whenever a designated mention character is entered into a text box or rich text editor. It includes the following key features:

  • Data binding : Binds the list of items from local and remote data sources, such as IEnumerable data, OData, WCF, and RESTful web services.
  • Grouping : Groups logically related items under a single or specific category.
  • Filtering : Filters the list of items based on the character typed in the component.
  • Sorting : Sort the list items in alphabetical order (ascending or descending).
  • Highlight search : Highlights the typed text in the suggestion list.
  • Templates : Customize the list items, display values, no records, and spinner loading content.
  • Accessibility : Includes built-in accessibility support to access all features using keyboards, on-screen readers, and other assistive technology devices.

Blazor Mention Component

Blazor Mention Component


Note: For more details, refer to the Blazor Mention component demo anddocumentation.

Blazor Rating component

The new Blazor Rating is a highly customizable component that uses built-in precision modes to rate products or services with precise and accurate values. The customization supported in the component makes ratings more expressive instead of just showing numeric values.

Blazor Rating Component

Blazor Rating Component

Note: For more details, refer to the Blazor Rating component demo and documentation.

Preview to production-ready components

The following Blazor components have been developed to meet industry standards and are now marked production-ready:

What’s new in our existing Blazor components?

Many new, user-friendly features were added to our existing Blazor components for 2022 Volume 4.

Calendar and pickers

DateOnly and TimeOnly support

Masked date-time input

The DatePicker, DateTime Picker, and TimePicker components now support masked date-time input. Users can enter valid dates and times in the correct format, eliminating data input mistakes.

Masked Date-Time Input in Blazor DatePicker, TimePicker, and DateTime Picker

Masked Date-Time Input in Blazor DatePicker, TimePicker, and DateTime Picker

Note: For more details, refer to the Blazor DatePicker, TimePicker, and DateTime Picker Mask Editing demos.

Charts

These new features were rolled out for the Blazor Charts component.

Formatting data labels

The Blazor Charts component now supports formatting data labels with all global formats.

Refer to the following image. In it, the pie chart labels are formatted with currency formatting.

Data Label Formatting Support in Blazor Charts

Data Label Formatting Support in Blazor Charts

New spline range area chart

The new Blazor spline range area chart type can display the difference between the minimum and maximum values over a specific time period.

Blazor Spline Range Area Chart

Blazor Spline Range Area Chart

Note: For more details, refer to the Blazor spline range area chart demo.

Dashed legends

Use dashed legend icons for the dashed line series in Blazor Charts.

Blazor Chart with Dashed Legend Icon

Blazor Chart with Dashed Legend Icon

Diagram

There are several new features in the Blazor Diagram component.

New overview component

The new overview component allows users to see a preview or an overall view of the diagrams. Users can also navigate, pan, and zoom a particular area of the diagram.

Refer to the following GIF image.

Blazor Diagram Overview Component

Blazor Diagram Overview Component

Note: For more details, refer to the Blazor Diagram—overview component demo.

Built-in support for BPMN shapes

Business process model and notation (BPMN) is a standard way to represent business processes graphically. Now, you can create a BPMN diagram programmatically or using the visual interface with built-in BPMN shapes described by the BPMN 2.0 specification.

BPMN Shapes Support in Blazor Diagram Component

BPMN Shapes Support in Blazor Diagram Component

Note: For more details, refer to the Blazor Diagram—BPMN design demo.

Word Processor

Multicolumn layout

The Blazor Word Processor can now display text in a multiple-column layout, allowing users to format documents in multiple columns like in a newspaper.

Multiple Column Layout in Blazor Word Processor

Multiple Column Layout in Blazor Word Processor

Note: For more details, refer to the Blazor Word Processor—multi-column layout demo.

Gantt Chart

The Blazor Gantt Chart offers new features in this 2022 Volume 4 release.

On-demand data loading or lazy loading

With this feature, you can retrieve data from remote services for just the current viewport in the Gantt Chart and retrieve the remaining data on demand while scrolling.

Note: For more details, refer to the Blazor Gantt Chart—load on-demand demo.

Create tasks with drag-and-drop support

For tasks without start and end dates, users can schedule them with a simple drag-and-drop action into the Gantt Chart’s specific timeline area.

Creating Tasks with Drag-and-Drop Support in Blazor Gantt Chart

Creating Tasks with Drag-and-Drop Support in Blazor Gantt Chart

Right-to-left (RTL) rendering

Improve the user experience and accessibility for those who work with RTL languages like Hebrew and Arabic by switching the text direction and layout of the Gantt Chart to right-to-left.

Right-to-Left Rendering in Blazor Gantt Chart

Right-to-Left Rendering in Blazor Gantt Chart

Clipboard

Now, you can copy selected rows or cells to the clipboard. The copied data can be pasted to external mediums like a Microsoft Excel sheet.

Note: For more details, refer to the Blazor Gantt Chart—clipboard demo.

DataGrid

Row drag and drop with virtualization

The Blazor DataGrid allows users to reorder rows easily by dragging and dropping them using the row and column virtualization features.

Row Drag and Drop Support in Blazor DataGrid

Row Drag and Drop Support in Blazor DataGrid

PDF Viewer

Render digital signatures

From 2022 Volume 4, the Blazor PDF Viewer can render digital signatures in existing PDF documents in a non-interactive way to avoid data loss while viewing. Document integrity is preserved if no editing operation is performed.

Rendering Digital Signatures in Blazor PDF Viewer

Rendering Digital Signatures in Blazor PDF Viewer

Pivot Table

Display subtotals at the top or bottom of the group

Display subtotals in the row and column axes at their group’s top or bottom position in the Blazor Pivot Table.

Blazor Pivot Subtotals Positions

Blazor Pivot Subtotals Positions

Rich Text Editor

@Mention integration

Easily integrate the @Mention component into the Blazor Rich Text Editor to display a list of suggestions from which users can select and tag people. Once the user types the @ character in the editor, the suggestion list will be shown, and the user can choose or order a value from it.

Integrating @Mention Component in Blazor Rich Text Editor

Integrating @Mention Component in Blazor Rich Text Editor

Note: For more details, refer to the Integrating @Mention component with Blazor Rich Text Editor demo.

Scheduler

Custom workdays

The Blazor Scheduler now supports customizing the workdays when the resources are grouped by date.

Custom Workdays in Blazor Scheduler

Custom Workdays in Blazor Scheduler

Note: For more details, refer to the Blazor Scheduler custom workdays demo.

TreeGrid

Shimmer loading placeholder

The Blazor TreeGrid now provides a shimmer effect while loading data using the virtual scrolling feature. It shows a placeholder in each tree grid cell until the scrolling operation completes.

Blazor TreeGrid with Shimmer Loading Indicator

Blazor TreeGrid with Shimmer Loading Indicator

Conclusion

Thanks for reading! In this blog, we have seen the new features and components rolled out in the Syncfusion Blazor suite for the 2022 Volume 4 release. Try out these user-friendly updates and give us feedback in the comments section below.

Check out our Release Notes and the What’s New pages to see the other available features in the 2022 Volume 4 release.

The new version is available for existing customers on the License and Downloads page. If you are not a Syncfusion customer, you can try our 30-day free trial to check out our available features.

You can also reach us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Top comments (0)