What’s New in Syncfusion Blazor: 2022 Volume 4
Tags: csharp, dotnet, webdev, blazor
Published: 2022-12-30 13:34:07

---
title: What’s New in Syncfusion Blazor: 2022 Volume 4
published: true
date: 2022-12-30 11:36:42 UTC
tags: csharp, dotnet, webdev, blazor
canonical_url: https://www.syncfusion.com/blogs/post/whats-new-in-syncfusion-blazor-2022-volume-4.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ek2k6qn8c4mi5k3pkfpn.png
---
[Syncfusion](https://www.syncfusion.com/ "Syncfusion Official Site") has released a new volume of updates for its [Blazor](https://www.syncfusion.com/blazor-components "Syncfusion Blazor Components") 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](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Syncfusion Essential Studio 2022 Volume 4 Main Release") 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](https://dotnet.microsoft.com/en-us/platform/support/policy/dotnet-core ".NET and .NET Core Support Policy"). 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](https://blazor.syncfusion.com/documentation/release-notes/20.3.47?type=all "Essential Studio for Blazor Release Notes") 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:

- [Media Query](#media-query)
- [Mention](#mention)
- [Rating](#rating)

Let’s look at them in more detail!

###<a name="media-query">Blazor Media Query component</a>

The new [Blazor Media Query component](https://www.syncfusion.com/blazor-components/blazor-media-query "Syncfusion 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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Responsive-Layouts-of-Blazor-Media-Query-Component.png" alt="Responsive Layouts of Blazor Media Query Component" style="width:100%">

  <figcaption>Responsive Layouts of Blazor Media Query Component</figcaption>

</figure>
**Note:** For more details, refer to the [Blazor Media Query demo](https://blazor.syncfusion.com/demos/media-query/default-functionalities?theme=fluent "Blazor Media Query demo") and [documentation.](https://blazor.syncfusion.com/documentation/media-query/getting-started "Getting started with Blazor Media Query documentation")

###<a name="mention">Blazor Mention component</a>

The new [Blazor Mention component](https://www.syncfusion.com/blazor-components/blazor-mention "Syncfusion 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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-mention-rte-integration.gif" alt="Blazor Mention Component" style="width:100%">

  <figcaption>Blazor Mention Component</figcaption>

</figure>
**Note:** For more details, refer to the [Blazor Mention component demo](https://blazor.syncfusion.com/demos/mention/default-functionalities "Syncfusion Blazor Mention component demo") and[documentation](https://blazor.syncfusion.com/documentation/mention/getting-started "Getting started with Blazor Mention component documentation").

###<a name="rating">Blazor Rating component</a>

The new [Blazor Rating](https://www.syncfusion.com/blazor-components/blazor-rating "Syncfusion Blazor Rating Component") 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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-rating.gif" alt="Blazor Rating Component" style="width:100%">

  <figcaption>Blazor Rating Component</figcaption>

</figure>
**Note:** For more details, refer to the [Blazor Rating component demo](https://blazor.syncfusion.com/demos/rating/default-functionalities "Syncfusion Blazor Rating component demo") and [documentation](https://blazor.syncfusion.com/documentation/rating/getting-started "Getting started with Blazor Rating component documentation").

## Preview to production-ready components

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

- [Blazor AppBar](https://www.syncfusion.com/blazor-components/blazor-appbar "Blazor AppBar component")
- [Blazor Floating Action Button (FAB)](https://www.syncfusion.com/blazor-components/blazor-fab "Blazor Floating Action Button")
- [Blazor Message](https://www.syncfusion.com/blazor-components/blazor-message "Blazor Message component")
- [Blazor Speed Dial](https://www.syncfusion.com/blazor-components/blazor-speeddial "Blazor Speed Dial component")

## 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

- The [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar "Blazor Calendar"), [DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker "Blazor DatePicker"), and [DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker "Blazor DateRangePicker") components now support the **DateOnly** struct in .NET 7.0 projects.
- The [Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker "Blazor TimePicker") now supports the **TimeOnly** struct in .NET 7.0 projects.

#### Masked date-time input

The [DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker "Blazor DatePicker"), [DateTime Picker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker "Blazor DateTime Picker"), and [TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker "Blazor TimePicker") components now support masked date-time input. Users can enter valid dates and times in the correct format, eliminating data input mistakes.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/masked-datetime-input.gif" alt="Masked Date-Time Input in Blazor DatePicker, TimePicker, and DateTime Picker" style="width:100%">

  <figcaption>Masked Date-Time Input in Blazor DatePicker, TimePicker, and DateTime Picker</figcaption>

</figure>
**Note:** For more details, refer to the [Blazor DatePicker](https://blazor.syncfusion.com/demos/datepicker/masksupport?theme=fluent "Example of Mask Support in Blazor DatePicker"), [TimePicker](https://blazor.syncfusion.com/demos/timepicker/masksupport?theme=fluent "Example of mask support in Blazor TimePicker"), and [DateTime Picker Mask Editing demos](https://blazor.syncfusion.com/demos/datetime-picker/masksupport?theme=fluent "Example of mask support in Blazor DateTime Picker").

### Charts

These new features were rolled out for the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts "Syncfusion 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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-chart-date-label-formatting.png" alt="Data Label Formatting Support in Blazor Charts" style="width:100%">

  <figcaption>Data Label Formatting Support in Blazor Charts</figcaption>

</figure>
#### New spline range area chart

The new [Blazor spline range area chart](https://blazor.syncfusion.com/documentation/chart/chart-types/spline-range-area "Blazor Spline Range Area Chart documentation") type can display the difference between the minimum and maximum values over a specific time period.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-spline-range-area-chart.png" alt="Blazor Spline Range Area Chart" style="width:100%">

  <figcaption>Blazor Spline Range Area Chart</figcaption>

</figure>
**Note:** For more details, refer to the [Blazor spline range area chart demo](https://blazor.syncfusion.com/demos/chart/spline-range-area?theme=fluent "Blazor Spline Range Area Chart demo").

#### Dashed legends

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

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-chart-with-dashed-legend-icon.png" alt="Blazor Chart with Dashed Legend Icon" style="width:100%">

  <figcaption>Blazor Chart with Dashed Legend Icon</figcaption>

</figure>
### Diagram

There are several new features in the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram "Blazor Diagram component") 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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Blazor-Diagram-Overview-Component-1.gif" alt="Blazor Diagram Overview Component" style="width:100%">

  <figcaption>Blazor Diagram Overview Component</figcaption>

</figure>
**Note:** For more details, refer to the [Blazor Diagram—overview component demo](https://blazor.syncfusion.com/demos/diagramcomponent/overview?theme=fluent "Blazor Diagram - Overview component demo").

#### Built-in support for BPMN shapes

[Business process model and notation (BPMN)](https://en.wikipedia.org/wiki/Business_Process_Model_and_Notation "Wikipedia page for Business Process Model and Notation") 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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/BPMN-Shapes-Support-in-Blazor-Diagram-Component-1.png" alt="BPMN Shapes Support in Blazor Diagram Component" style="width:100%">

  <figcaption>BPMN Shapes Support in Blazor Diagram Component</figcaption>

</figure>
**Note:** For more details, refer to the [Blazor Diagram—BPMN design demo](https://blazor.syncfusion.com/demos/diagramcomponent/bpmn-editor?theme=fluent "Blazor Diagram—BPMN design demo").

### Word Processor

#### Multicolumn layout

The [Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor "Blazor Word Processor") can now display text in a multiple-column layout, allowing users to format documents in multiple columns like in a newspaper.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-word-processor-multiple-column-layout.png" alt="Multiple Column Layout in Blazor Word Processor" style="width:100%">

  <figcaption>Multiple Column Layout in Blazor Word Processor</figcaption>

</figure>
**Note:** For more details, refer to the [Blazor Word Processor—multi-column layout demo](https://blazor.syncfusion.com/demos/document-editor/section-format?theme=fluent "Blazor Word Processor—multi-column layout demo").

### Gantt Chart

The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart "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](https://blazor.syncfusion.com/demos/gantt-chart/load-on-demand "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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-gantt-chart-create-taskbar-by-drag.gif" alt="Creating Tasks with Drag-and-Drop Support in Blazor Gantt Chart" style="width:100%">

  <figcaption>Creating Tasks with Drag-and-Drop Support in Blazor Gantt Chart</figcaption>

</figure>
#### 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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Right-to-Left-Rendering-in-Blazor-Gantt-Chart.png" alt="Right-to-Left Rendering in Blazor Gantt Chart" style="width:100%">

  <figcaption>Right-to-Left Rendering in Blazor Gantt Chart</figcaption>

</figure>
#### 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](https://blazor.syncfusion.com/demos/gantt-chart/clipboard "Blazor Gantt Chart—clipboard demo").

### DataGrid

#### Row drag and drop with virtualization

The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid "Blazor DataGrid") allows users to reorder rows easily by dragging and dropping them using the row and column virtualization features.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-datagrid-row-drag-and-drop.gif" alt="Row Drag and Drop Support in Blazor DataGrid" style="width:100%">

  <figcaption>Row Drag and Drop Support in Blazor DataGrid</figcaption>

</figure>
### PDF Viewer

#### Render digital signatures

From 2022 Volume 4, the [Blazor PDF Viewer](https://www.syncfusion.com/blazor-components/blazor-pdf-viewer "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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Rendering-Digital-Signatures-in-Blazor-PDF-Viewer.png" alt="Rendering Digital Signatures in Blazor PDF Viewer" style="width:100%">

  <figcaption>Rendering Digital Signatures in Blazor PDF Viewer</figcaption>

</figure>
### 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](https://www.syncfusion.com/blazor-components/blazor-pivot-table "Blazor Pivot Table").
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-pivot-subtotals-positions.png" alt="Blazor Pivot Subtotals Positions" style="width:100%">

  <figcaption>Blazor Pivot Subtotals Positions</figcaption>

</figure>
### Rich Text Editor

#### @Mention integration

Easily integrate the [@Mention component](https://www.syncfusion.com/blazor-components/blazor-mention "Blazor Mention component") into the Blazor [Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor "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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-mention-rte-integration-1.gif" alt="Integrating @Mention Component in Blazor Rich Text Editor" style="width:100%">

  <figcaption>Integrating @Mention Component in Blazor Rich Text Editor</figcaption>

</figure>
**Note:** For more details, refer to the [Integrating @Mention component with Blazor Rich Text Editor demo](https://blazor.syncfusion.com/demos/rich-text-editor/mention-integration "Integrating @Mention component with Blazor Rich Text Editor demo").

### Scheduler

#### Custom workdays

The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler "Blazor Scheduler") now supports customizing the workdays when the resources are grouped by date.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-schedule-custom-workdays.png" alt="Custom Workdays in Blazor Scheduler" style="width:100%">

  <figcaption>Custom Workdays in Blazor Scheduler</figcaption>

</figure>
**Note:** For more details, refer to the [Blazor Scheduler custom workdays demo](https://blazor.syncfusion.com/demos/scheduler/date-wise-grouping?theme=fluent "Blazor Scheduler custom workdays demo").

### TreeGrid

#### Shimmer loading placeholder

The [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid "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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-tree-grid-shimmer-as-loading-indicator.gif" alt="Blazor TreeGrid with Shimmer Loading Indicator" style="width:100%">

  <figcaption>Blazor TreeGrid with Shimmer Loading Indicator</figcaption>

</figure>
## Conclusion

Thanks for reading! In this blog, we have seen the new features and components rolled out in the [Syncfusion Blazor](https://www.syncfusion.com/blazor-components "Syncfusion Blazor UI components") suite for the [2022 Volume 4](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Essential Studio 2022 Volume 4 Main Release") release. Try out these user-friendly updates and give us feedback in the comments section below.

Check out our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v20.4.0.38 "Syncfusion Essential Studio Release Notes") and the [What’s New](https://www.syncfusion.com/products/whatsnew "Syncfusion 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](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out our available features.

You can also reach us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2022 Volume 4 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-4-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 4 Is Here!")
- [Boosting Performance of Blazor Gantt Chart Using Virtualization](https://www.syncfusion.com/blogs/post/boosting-performance-of-blazor-gantt-chart-using-virtualization.aspx "Blog: Boosting Performance of Blazor Gantt Chart Using Virtualization")
- [A Full-Stack Web App Using Blazor WebAssembly and GraphQL—Part 7](https://www.syncfusion.com/blogs/post/a-full-stack-web-app-using-blazor-webassembly-and-graphql-part-7.aspx "Blog: A Full-Stack Web App Using Blazor WebAssembly and GraphQL—Part 7")
- [A Simple To-Do App Using JS Interop with HTML5 Drag and Drop in Blazor WebAssembly](https://www.syncfusion.com/blogs/post/to-do-app-using-js-interop-with-html5-drag-and-drop-in-blazor-webassembly.aspx "Blog: A Simple To-Do App Using JS Interop with HTML5 Drag and Drop in Blazor WebAssembly")