What’s New in Blazor: 2022 Volume 3
Tags: blazor, csharp, dotnet, webdev
Published: 2022-10-18 13:37:49

---
title: What’s New in Blazor: 2022 Volume 3
published: true
date: 2022-10-17 13:36:51 UTC
tags: blazor, csharp, dotnet, webdev
canonical_url: https://www.syncfusion.com/blogs/post/whats-new-in-blazor-2022-volume-3.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbalcuczbugroofpdnpg.png
---

We are glad to inform you that our [Essential Studio 2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "Essential Studio 2022 Volume 3") release is available now with many exciting new components and features.

This blog summarizes the new updates in the [Syncfusion Blazor platform](https://www.syncfusion.com/blazor-components "Syncfusion Blazor UI components") from this 2022 Volume 3 release.

## New components

In the 2022 Volume 3 release, we introduced the following new Blazor components in preview mode:

- [Floating Action Button](#floating-action-button)
- [Speed Dial](#speed-dial)
- [AppBar](#appbar)
- [Skeleton](#skeleton)
- [Message](#message)

### <a name="floating-action-button">Floating Action Button (preview)</a>

The new [Blazor Floating Action Button (FAB)](https://www.syncfusion.com/blazor-components/blazor-fab "Blazor Floating Action Button") appears in front of all the contents of a page and performs a primary action.

#### Key features

- **Positioning** : Place the FAB in various built-in positions on the target element, such as top left, top right, bottom right, and bottom left.
- **Appearance** : Customize the FAB using several predefined styles such as primary, secondary, and outline.

![Blazor Floating Action Button component](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Blazor-Floating-Action-Button-Component.png)

**Note:** For more details, refer to the [Blazor Floating Action Button component demo](https://blazor.syncfusion.com/demos/fab/overview?theme=fluent "Blazor Floating Action Button component demo").

### <a name="speed-dial">Speed Dial (preview)</a>

The [Blazor Speed Dial](https://www.syncfusion.com/blazor-components/blazor-speeddial "Blazor Speed Dial Component") component is an extension of the Floating Action Button that displays a list of action buttons when clicked. It is useful when there is more than one primary action for an app page.

#### Key features

- **Display mode** : You can display the action buttons in linear and radial directions.
- **Positioning** : Place the Speed Dial button in various built-in positions on the target element.
- **Modal** : Show a modal overlay behind the Speed Dial.
- **Template** : Use the templates to customize the action items and Speed Dial pop-up container.

![Blazor Speed Dial component](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Blazor-Speed-Dial-Component.png)

**Note:** For more details, refer to the [Blazor Speed Dial component demo](https://blazor.syncfusion.com/demos/speeddial/defaultfunctionalities?theme=fluent "Blazor Speed Dial component demo").

### <a name="appbar">AppBar (preview)</a>

The new [Blazor AppBar](https://www.syncfusion.com/blazor-components/blazor-appbar "Blazor AppBar") displays information and actions related to the current app screen. We can use this component to show branding, screen titles, navigation, and actions.

#### Key features

- **Modes** : Regular, prominent, and dense modes define the AppBar height.
- **Content arrangement** : Use the spacer and separator options to align the content with minimal effort.
- **Color** : Use the primary, light, dark, and inherit color modes to customize the AppBar’s color.

![Blazor AppBar component](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Blazor-AppBar-Component-Demo.png)

- **Position** : Place the AppBar at the top or bottom of the screen.
- **Sticky** : The AppBar can also be made sticky while scrolling a page.

**Note:** For more details, refer to the [Blazor AppBar component demo](https://blazor.syncfusion.com/demos/appbar/default-functionalities?theme=fluent "Blazor AppBar component demo").

### <a name="skeleton">Skeleton (preview)</a>

The new [Blazor Skeleton](https://www.syncfusion.com/blazor-components/blazor-skeleton "Blazor Skeleton component") component is a placeholder that animates a shimmer effect to let users know that the page’s content is currently loading. It simulates the layout of the page content while loading the actual content. It supports wave, fade, and pulse animation effects.

#### Key features

- **Shapes** : Circle, square, and rectangle shapes.
- **Shimmer effect** : Fade and pulse shimmer effects.

![Blazor Skeleton component](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Blazor-Skeleton-Component.png)

**Note:** For more details, refer to the [Blazor Skeleton component demo](https://blazor.syncfusion.com/demos/skeleton/defaultfunctionalities?theme=fluent "Blazor Skeleton component demo").

### <a name="message">Message (preview)</a>

The new [Blazor Message](https://www.syncfusion.com/blazor-components/blazor-message "Blazor Message component") component lets users convey messages’ urgency with differentiating icons and colors to denote the importance and context of the messages to the end user. It supports several built-in, customizable, SASS-based themes: Fluent, Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, and high contrast.

#### Key features

- **Types** : Predefined normal, success, info, warning, and error severity types.
- **Appearance** : Predefined text, outlined, and filled appearance variants.

![Blazor Message component](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Blazor-Message-Component.png)

**Note:** For more details, refer to the [Blazor Message component demo](https://blazor.syncfusion.com/demos/message/default-functionalities?theme=fluent "Blazor Message component demo").

## Preview to production-ready component

The [Blazor Pager](https://www.syncfusion.com/blazor-components/blazor-pager "Blazor Pager") component has been developed to meet industry standards and is now marked as production-ready.

## .NET 7 compatibility

All Syncfusion Blazor components are compatible with .NET 7. So, the Blazor apps built with .NET 6 or .NET 3.1 and Syncfusion Blazor components are now compatible with .NET 7, as well.

## Gantt Chart

The new features of the [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart "Blazor Gantt Chart") are:

- **Inline editing with virtualization** : Perform CRUD operations such as adding, editing, and deleting directly on the rows in the current viewport by enabling the [row and column virtualization.](https://blazor.syncfusion.com/demos/gantt-chart/virtual-scroll "Virtual scrolling in Blazor Gantt Chart component demo") ![Inline editing with virtualization in Blazor Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Inline-editing-with-virtualization-in-Blazor-Gantt-Chart-1.gif)

- **Timeline virtualization** : You can load project tasks with longer timelines in the Gantt Chart. Also, render only the timeline cells in the current viewport, and dynamically render other timeline cells on [horizontal scrolling](https://blazor.syncfusion.com/demos/gantt-chart/virtual-scroll "Virtual scrolling in Blazor Gantt Chart Component demo"). ![Timeline virtualization in Blazor Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Timeline-virtualization-in-Blazor-Gantt-Chart-1.gif)

- **GUID and alphanumeric support for task field ID** : The [TaskField ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id "TaskField ID in Blazor Gantt Chart") is used to map the tasks from the data source to display them in the hierarchical structure. Now, it supports GUID and alphanumeric values. It also accepts integers, strings, and GUID-type values.
- **State persistence** : Retain the [state of the Blazor Gantt Chart](https://blazor.syncfusion.com/demos/gantt-chart/persistence "Persist state in Blazor Gantt Chart component demo") using the local storage on browser reload. The Gantt Chart state can also be saved and restored manually.

- **Spinner:** Render a [spinner](https://blazor.syncfusion.com/demos/gantt-chart/editing "Editing in Blazor Gantt Chart component demo") for every Gantt action, like CRUD operations, filtering, and sorting.
- **Skip initial validation** : Avoid load time date validation using [AutoCalculateDateScheduling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AutoCalculateDateScheduling "AutoCalculateDateScheduling property in Blazor Gantt Chart").
- **Bind native events** : Handle [external key events](https://blazor.syncfusion.com/documentation/gantt-chart/how-to/bind-native-events "Bind native events in Blazor Gantt Chart documentation").

## Diagram

We’ve rolled out the following features for the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram "Blazor Diagram") component in this 2022 Volume 3 release:

- **Flip support for nodes** : This feature allows users to flip a node. Flipping provides a mirrored version of the original node. The supported flip types are:
  - **Vertical** : Flips the element vertically.
  - **Horizontal** : Flips the element horizontally.
  - **Both** : Flips the element both vertically and horizontally.  
Refer to the following GIF image. ![Flip support for nodes in Blazor Diagram component](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Flip-support-for-nodes-in-Blazor-Diagram-component.gif)
- **Show and hide user handles** : Users can control the visibility of user handles for any specific diagram element. You can [show or hide user handles](https://blazor.syncfusion.com/demos/diagramcomponent/userhandles?theme=fluent "User handles in Blazor Diagram component demo") for nodes, connectors, or both.  
 ![Show and hide user handles support in Blazor Diagram component](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Show-and-hide-user-handles-support-in-Blazor-Diagram-component.gif)

- **Tooltip** : This feature allows users to control the visibility of tooltips for specific nodes and connectors when the pointer hovers on diagram elements.  
 ![Support to control tooltip visibility in Blazor Diagram component](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Support-to-control-tooltip-visibility-in-Blazor-Diagram-component.jpg)

- **Dynamic and Expando objects** : Provided Dynamic and Expando objects support for the data source in layout. You can also bind data to the diagram as a list of **ExpandoObject**.
- **Upgrade classic diagram to native diagram** : Provided support to load a classic diagram JSON data to a native diagram. So, you can now export JSON data from a [classic diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagrams.SfDiagram.html#Syncfusion_Blazor_Diagrams_SfDiagram_SaveDiagram "SaveDiagram method in Blazor Diagram component") and import it into a [native diagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_LoadDiagram_System_String_System_Boolean_ "LoadDiagram method in Blazor Diagram component").

## Charts

The [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts "Blazor Charts") control provides support for the following data visualization features:

- **Data label**  **wrap** : Wrap the [data labels](https://blazor.syncfusion.com/demos/chart/semi-pie?theme=fluent "Blazor Semi Pie Chart example") in the accumulation chart based on its size or when it overflows the container.  
 ![Blazor Chart data label - Wrap](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Blazor-Chart-Data-Label-Wrap.png)

- **Print multiple charts** : Print multiple charts on the same page at the same time.

## Scheduler

The new features in the [Blazor Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler "Blazor Scheduler") component are:

- **Virtual scrolling in vertical views** : This feature allows users to load only the visible items in the viewport and load the remaining items on [virtual scrolling](https://blazor.syncfusion.com/demos/scheduler/virtual-scrolling?theme=fluent "Virtual scrolling in Blazor Scheduler component demo"). This improves the Scheduler component’s performance while loading a large number of resources and appointments in the vertical day, week, and month views.  
 ![Virtual scrolling in Blazor Scheduler's vertical views](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Virtual-scrolling-in-Blazor-Schedulers-vertical-views.gif)

- **Template support in year view** : Users can customize all the cells in the [year view](https://blazor.syncfusion.com/demos/scheduler/cell-template?theme=fluent "Example of cell template in Blazor Scheduler component"). ![Template support in Blazor Scheduler's year view](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Template-support-in-Blazor-Schedulers-year-view.png)

## TreeGrid

The [Blazor TreeGrid’s](https://www.syncfusion.com/blazor-components/blazor-tree-grid "Blazor TreeGrid") new features are:

- **Freeze columns by dragging frozen line** : By dragging and dropping the [frozen line](https://blazor.syncfusion.com/demos/tree-grid/frozen-column "Frozen columns in Blazor Tree Grid component") separators between the columns, users can include or exclude columns from being frozen.  
 ![Freeze columns by dragging frozen line in Blazor TreeGrid](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Freeze-columns-by-dragging-frozen-line-in-Blazor-TreeGrid.gif)

- **State persistence** : Retain the [state of the TreeGrid](https://blazor.syncfusion.com/documentation/treegrid/state-management "State management in Blazor TreeGrid") using local storage on browser reload. The TreeGrid state can also be saved and restored manually.

## DataGrid

The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid "Blazor DataGrid") gains the following new features in this 2022 Volume 3 release:

- **Improvements in lazy-load grouping with virtualization** : The performance of the [lazy-load grouping with virtualization](https://blazor.syncfusion.com/documentation/datagrid/lazy-load-grouping#lazy-load-grouping-with-row-virtualization "Lazy-load grouping with virtualization in Blazor DataGrid") is enhanced while expanding the caption row when it has a huge number of grouped items. The corresponding grouped items will be loaded on demand while scrolling down or up.
- **Enhanced keyboard navigation** : The [keyboard navigation](https://blazor.syncfusion.com/demos/datagrid/keyboard-navigation?theme=fluent "Keyboard Navigation in Blazor DataGrid") was enhanced in DataGrid. There’s also keyboard navigation support in the FilterBar while pressing the **Tab** and **Shift + Tab** keys.

## Partial view in Blazor Carousel

The [Blazor Carousel](https://www.syncfusion.com/blazor-components/blazor-carousel "Blazor Carousel component") can now show one complete slide and a [partial view of adjacent slides](https://blazor.syncfusion.com/demos/carousel/partial-visible "Example of partial visibility in Blazor Carousel Component") at the same time.  
 ![Blazor Partial view carousel](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Blazor-Partial-view-carousel.png)

## Full-screen Calendar for mobile devices

The [Blazor Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar "Blazor Calendar component") component can now display in a full-screen pop-up on mobile devices and supports both landscape and portrait orientations. You can enable this feature by adding **e-popup-expand** to the **CssClass** property.  
 ![Blazor full screen Calendar](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Blazor-Full-Screen-Calendar.png)

## Show paragraphs and hidden marks in Word Processor

Show or hide paragraph marks and other hidden formatting symbols in the [Blazor Word Processor](https://www.syncfusion.com/blazor-components/blazor-word-processor "Blazor Word Processor"). These marks help identify the start and end of a paragraph and all the [hidden formatting symbols](https://blazor.syncfusion.com/demos/document-editor/paragraph-format?theme=fluent "Paragraph Formatting in Blazor Word Processor Component") in a text document.  
 ![Blazor document editor - Word processor - Show paragraph](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Blazor-document-editor-Word-processor-Show-paragraph.png)

## Insert audio and video in Rich Text Editor

[Insert audio and video files](https://blazor.syncfusion.com/demos/rich-text-editor/insert-media?theme=fluent "Insert Media in Blazor Rich Text Editor") from a local folder or web URL. Or embed a URL from sources such as YouTube and Vimeo in the [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor "Blazor Rich Text Editor"). Preview a video, resize it, and customize it using the quick toolbar.

## Legend support in Stock Chart

The [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart "Blazor Stock Chart") now has legend support. This helps us add additional information about the series in the chart. You can also toggle the visibility of the series using the legend support.  
 ![Blazor Stock Chart legend](https://www.syncfusion.com/blogs/wp-content/uploads/2022/10/Blazor-Stock-Chart-Legend.png)

## Azure Maps

Now, you can load and view [Azure Maps](https://blazor.syncfusion.com/documentation/maps/providers/azure-maps "Azure Maps support in Blazor Maps component") through our [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map "Blazor Maps") component.

## Unique ID in Tabs

We have provided unique ID support for [Blazor Tabs](https://www.syncfusion.com/blazor-components/blazor-tabs "Blazor Tabs") items. Now, you can get a tab item based on its specified ID using the **GetTabItemById** public method. You can also get the tab item based on the specified index using the **GetTabItemByIndex** public method.

## Conclusion

Thanks for reading! In this blog, we have seen the new components and features rolled out in the Syncfusion Blazor suite for the [2022 Volume 3](https://www.syncfusion.com/forums/177858/essential-studio-2022-volume-3-main-release-v20-3-0-47-is-available-for-download "2022 Volume 3") release. Information on these updates is also available in our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v20.3.0.47 "Syncfusion Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Syncfusion What’s New") pages. Try out them and leave your feedback in the comments section below!

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

## Related blogs

- [Syncfusion Essential Studio 2022 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2022-volume-3-is-here.aspx "Blog: Syncfusion Essential Studio 2022 Volume 3 Is Here!")
- [Deploying a Blazor Server-Side Application to Azure App Service Using GitHub Actions](https://www.syncfusion.com/blogs/post/deploying-blazor-server-application-to-azure-app-service-using-github-actions.aspx "Blog: Deploying a Blazor Server-Side Application to Azure App Service Using GitHub Actions")
- [Simple Steps to Integrate a Blazor WebAssembly Project with an Existing ASP.NET Core Application](https://www.syncfusion.com/blogs/post/integrate-blazor-webassembly-in-asp-net-core-application.aspx "Blog: Simple Steps to Integrate a Blazor WebAssembly Project with an Existing ASP.NET Core Application")
- [Blazor Routing: An Overview](https://www.syncfusion.com/blogs/post/blazor-routing-an-overview.aspx "Blog: Blazor Routing: An Overview")