--- title: "What’s New in Syncfusion Blazor: 2022 Volume 4" published_at: "2022-12-30T11:36:42+00:00" modified_at: "2025-04-22T12:23:42+00:00" url: "https://www.syncfusion.com/blogs/post/whats-new-in-syncfusion-blazor-2022-volume-4" excerpt: "This blog explains the new features and controls introduced in the Syncfusion Blazor platform in the 2022 Volume 4 release" taxonomy_category: - ".NET" - "Blazor" - "Web" - "What's new" taxonomy_post_tag: - "Blazor" - "Syncfusion" - "Web Development" - "WebAssembly" - "What's New" --- # What’s New in Syncfusion Blazor: 2022 Volume 4 [Sivakumar R](https://www.syncfusion.com/blogs/author/sivakumarr) ![What's New in Syncfusion Blazor 2022 Volume 4](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Whats-New-in-Syncfusion-Blazor-2022-Volume-4.png) [Syncfusion](https://www.syncfusion.com/) has released a new volume of updates for its [Blazor](https://www.syncfusion.com/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) 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) . 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) 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! ### Blazor Media Query component The new [Blazor Media Query component](https://www.syncfusion.com/blazor-components/blazor-media-query) 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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Responsive-Layouts-of-Blazor-Media-Query-Component.png) Responsive Layouts of Blazor Media Query Component **Note:** For more details, refer to the [Blazor Media Query demo](https://blazor.syncfusion.com/demos/media-query/default-functionalities?theme=fluent) and [documentation.](https://blazor.syncfusion.com/documentation/media-query/getting-started) ### Blazor Mention component The new [Blazor Mention component](https://www.syncfusion.com/blazor-components/blazor-mention) 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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-mention-rte-integration.gif) Blazor Mention Component **Note:** For more details, refer to the [Blazor Mention component demo](https://blazor.syncfusion.com/demos/mention/default-functionalities) and[documentation](https://blazor.syncfusion.com/documentation/mention/getting-started) . ### Blazor Rating component The new [Blazor Rating](https://www.syncfusion.com/blazor-components/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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-rating.gif) Blazor Rating Component **Note:** For more details, refer to the [Blazor Rating component demo](https://blazor.syncfusion.com/demos/rating/default-functionalities) and [documentation](https://blazor.syncfusion.com/documentation/rating/getting-started) . ## 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 Floating Action Button (FAB)](https://www.syncfusion.com/blazor-components/blazor-fab) - [Blazor Message](https://www.syncfusion.com/blazor-components/blazor-message) - [Blazor Speed Dial](https://www.syncfusion.com/blazor-components/blazor-speeddial) ## 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) , [DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) , and [DateRangePicker](https://www.syncfusion.com/blazor-components/blazor-daterangepicker) components now support the **DateOnly** struct in .NET 7.0 projects. - The [Blazor TimePicker](https://www.syncfusion.com/blazor-components/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) , [DateTime Picker](https://www.syncfusion.com/blazor-components/blazor-datetime-picker) , and [TimePicker](https://www.syncfusion.com/blazor-components/blazor-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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/masked-datetime-input.gif) Masked Date-Time Input in Blazor DatePicker, TimePicker, and DateTime Picker **Note:** For more details, refer to the [Blazor DatePicker](https://blazor.syncfusion.com/demos/datepicker/masksupport?theme=fluent) , [TimePicker](https://blazor.syncfusion.com/demos/timepicker/masksupport?theme=fluent) , and [DateTime Picker Mask Editing demos](https://blazor.syncfusion.com/demos/datetime-picker/masksupport?theme=fluent) . ### Charts These new features were rolled out for the [Blazor Charts](https://www.syncfusion.com/blazor-components/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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-chart-date-label-formatting.png) Data Label Formatting Support in Blazor Charts #### New spline range area chart The new [Blazor spline range area chart](https://blazor.syncfusion.com/documentation/chart/chart-types/spline-range-area) type can display the difference between the minimum and maximum values over a specific time period. ![Blazor Spline Range Area Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-spline-range-area-chart.png) Blazor Spline Range Area Chart **Note:** For more details, refer to the [Blazor spline range area chart demo](https://blazor.syncfusion.com/demos/chart/spline-range-area?theme=fluent) . #### Dashed legends Use dashed legend icons for the dashed line series in Blazor Charts. ![Blazor Chart with Dashed Legend Icon](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-chart-with-dashed-legend-icon.png) Blazor Chart with Dashed Legend Icon ### Diagram There are several new features in the [Blazor Diagram](https://www.syncfusion.com/blazor-components/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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Blazor-Diagram-Overview-Component-2.gif) Blazor Diagram Overview Component **Note:** For more details, refer to the [Blazor Diagram—overview component demo](https://blazor.syncfusion.com/demos/diagramcomponent/overview?theme=fluent) . #### Built-in support for BPMN shapes [Business process model and notation (BPMN)](https://en.wikipedia.org/wiki/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. ![BPMN Shapes Support in Blazor Diagram Component](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/BPMN-Shapes-Support-in-Blazor-Diagram-Component-1.png) BPMN Shapes Support in Blazor Diagram Component **Note:** For more details, refer to the [Blazor Diagram—BPMN design demo](https://blazor.syncfusion.com/demos/diagramcomponent/bpmn-editor?theme=fluent) . ### Word Processor #### Multicolumn layout The [Blazor Word Processor](https://www.syncfusion.com/blazor-components/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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-word-processor-multiple-column-layout.png) Multiple Column Layout in Blazor Word Processor **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) . ### Gantt Chart The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/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) . #### 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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-gantt-chart-create-taskbar-by-drag.gif) 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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Right-to-Left-Rendering-in-Blazor-Gantt-Chart.png) 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](https://blazor.syncfusion.com/demos/gantt-chart/clipboard) . ### DataGrid #### Row drag and drop with virtualization The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-datagrid-row-drag-and-drop.gif) Row Drag and Drop Support in Blazor DataGrid ### PDF Viewer #### Render digital signatures From 2022 Volume 4, the [Blazor PDF Viewer](https://www.syncfusion.com/blazor-components/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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Rendering-Digital-Signatures-in-Blazor-PDF-Viewer.png) 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](https://www.syncfusion.com/blazor-components/blazor-pivot-table) . ![Blazor Pivot Subtotals Positions](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-pivot-subtotals-positions.png) Blazor Pivot Subtotals Positions ### Rich Text Editor #### @Mention integration Easily integrate the [@Mention component](https://www.syncfusion.com/blazor-components/blazor-mention) into the Blazor [Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-mention-rte-integration-1.gif) Integrating @Mention Component in Blazor Rich Text Editor **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) . ### Scheduler #### Custom workdays The [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) now supports customizing the workdays when the resources are grouped by date. ![Custom Workdays in Blazor Scheduler](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-schedule-custom-workdays.png) Custom Workdays in Blazor Scheduler **Note:** For more details, refer to the [Blazor Scheduler custom workdays demo](https://blazor.syncfusion.com/demos/scheduler/date-wise-grouping?theme=fluent) . ### TreeGrid #### Shimmer loading placeholder The [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) 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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/blazor-tree-grid-shimmer-as-loading-indicator.gif) 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](https://www.syncfusion.com/blazor-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) 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) and the [What’s New](https://www.syncfusion.com/products/whatsnew) 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) page. If you are not a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our available features. You can also reach us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback/) . 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) - [Boosting Performance of Blazor Gantt Chart Using Virtualization](https://www.syncfusion.com/blogs/post/boosting-performance-of-blazor-gantt-chart-using-virtualization.aspx) - [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) - [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)