What’s New in Blazor: 2023 Volume 4
Tags: blazor, development, ui, web
Published: 2024-01-19 14:37:51

---
title: What’s New in Blazor: 2023 Volume 4
published: true
date: 2023-12-29 12:59:39 UTC
tags: blazor, development, ui, web
canonical_url: https://www.syncfusion.com/blogs/post/whats-new-blazor-2023-volume-4.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xqzznv1txf7tux7pd0v.png
---
We are happy to announce the release of Essential Studio [2023 Volume 4](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4"). This release brings a lot of exciting new components and features to our Syncfusion [Blazor](https://www.syncfusion.com/blazor-components/ "Blazor components library") platform.

This blog will highlight the major updates in our Blazor suite for this last release of the year.

## New Blazor components

In this release, keenly awaited new components arrived in our Blazor suite. The following new components were released in preview mode:

- [Data Form](#Data)
- [Dropdown Tree](#Dropdown)
- [Stepper](#Stepper)

### <a name="Data">Blazor Data Form (preview)</a>

The [Blazor Data Form](https://www.syncfusion.com/blazor-components/blazor-data-form "Blazor Data Form Component") component streamlines the process of entering and modifying data, providing an intuitive user experience. This tool allows for easy management and submission of information, thereby improving overall ease of use.

#### Key features

The key features of the Blazor Data Form component are:

- **Auto-generated items** : Generates appropriate editing fields corresponding to the property types specified within the model.
- **Form groups** : Organize editing fields into categorized sections with descriptive headings and a columnar structure.
- **Validators** : Apply various types of validators, including built-in and custom validators.
- **Validation display** : Display validation messages directly inline or as tooltips.
- **Templates** : Implement tailor-made editor designs to suit users’ unique requirements.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Blazor-Data-Form-Component.png" alt="Blazor Data Form Component" style="width:100%">

  <figcaption>Blazor Data Form Component</figcaption>

</figure>

**Note:** For more details, refer to the [Blazor Data Form demo](https://blazor.syncfusion.com/demos/data-form/default-functionalities?theme=fluent "Blazor Data Form Online demo") and [documentation](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app "Getting Started with Blazor DataForm Component in Web App").

### <a name="Dropdown">Blazor Dropdown Tree (Preview)</a>

The [Blazor Dropdown Tree](https://www.syncfusion.com/blazor-components/blazor-dropdowntree "Blazor Dropdown Tree Component") component allows you to select single or multiple values from hierarchical and self-referential data in a tree-like structure. It has many out-of-the-box features.

#### Key features

The key features of the Blazor Dropdown Tree are:

- **Data binding:** Bind and access a hierarchical and self-referential list of items from a local or server-side data source.
- **Checkboxes** : Select more than one item in the Dropdown Tree component without affecting the UI appearance.
- **Display modes** : Display selected values in box mode or delimiter mode. Box mode is the default on selecting values, and it changes to delimiter mode when out of focus.
- **Filtering** : Quickly filter tree items based on characters entered in the search box. This feature supports both local and remote data sources.
- **Sorting** : Display the Dropdown Tree items in ascending or descending order.
- **Templates** : Customize the Dropdown Tree items, header, footer, action failure content, and no records content.
- **Accessibility** : Provide access to all the Dropdown Tree component features through keyboard interaction, on-screen readers, and other assistive technology devices.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Blazor-Dropdown-Tree-Component-1.png" alt="Blazor Dropdown Tree Component" style="width:100%">

  <figcaption>Blazor Dropdown Tree Component</figcaption>

</figure>

**Note:** For more details, refer to the [Blazor Dropdown Tree demo](https://blazor.syncfusion.com/demos/dropdown-tree/default-functionalities?theme=fluent "Blazor Dropdown Tree demo") and [documentation](https://blazor.syncfusion.com/documentation/dropdown-tree/getting-started-with-web-app "Getting started with Blazor Dropdown Tree").

### <a name="Stepper">Blazor Stepper (preview)</a>

The [Blazor Stepper](https://www.syncfusion.com/blazor-components/blazor-stepper "Blazor Stepper Component") component enables users to navigate through a series of steps or stages in a process within a web app. Steppers display a list of steps, with the current step highlighted, and allow users to move between steps.

#### Key features

The key features of the Blazor Stepper component are:

- **Step types:** Display steps with indicators and labels, only indicators, or only labels.
- **Orientation** : Display steps horizontally or vertically.
- **Linear flow** : Enable a step-by-step progression, completing one step before moving on to the next.
- **Label positioning** : Show labels at the top, bottom, left, or right position.
- **Tooltip** : Show additional information, such as a label or customized text, when users hover over a step.
- **Templates** : Customize the default appearance and content of each step using templates.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Blazor-Stepper-Component-1.png" alt="Blazor Stepper Component" style="width:100%">

  <figcaption>Blazor Stepper Component</figcaption>

</figure>

**Note:** For more details, refer to the [Blazor Stepper demo](https://blazor.syncfusion.com/demos/stepper/default-functionalities?theme=fluent "Blazor Stepper demo") and [documentation](https://blazor.syncfusion.com/documentation/stepper/getting-started-webapp "Getting started with Blazor Stepper").

## Blazor Image Editor is now a production-ready component

The [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor "Blazor Image Editor Component") component has been developed to meet industry standards and is now marked production-ready.

Users can also take advantage of a new image straightening feature. It allows users to adjust an image by rotating it clockwise or counterclockwise. The rotated degree value should be within the range of -45 to +45 degrees for accurate straightening. Positive values indicate clockwise rotation, while negative values indicate counterclockwise rotation.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Blazor-Image-Editor-1.png" alt="Blazor Image Editor" style="width:100%">

  <figcaption>Blazor Image Editor</figcaption>

</figure>

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

## New Blazor showcase/dashboard samples

### Hotel Booking App

Introducing the new Blazor Hotel Booking App, a showcase web app that allows you to view hotel room details.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Blazor-Hotel-Booking-App-1.png" alt="Blazor Hotel Booking App" style="width:100%">

  <figcaption>Blazor Hotel Booking App</figcaption>

</figure>

**Note:** For more details, refer to the demos on the [website](https://blazor.syncfusion.com/showcase/hotel-booking "Hotel Booking App online demo") and [GitHub](https://github.com/syncfusion/blazor-showcase-hotel-booking "Blazor showcase hotel booking GitHub demo").

### Stock Market Dashboard App

Introducing the new Blazor Stock Market Dashboard App, a showcase web app that allows you to present dynamic prices for various stocks. This app provides comprehensive details, including key statistics, overall performance, and technical information.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Blazor-Stock-Market-Dashboard-App-1.png" alt="Blazor Stock Market Dashboard App" style="width:100%">

  <figcaption>Blazor Stock Market Dashboard App</figcaption>

</figure>

**Note:** For more details, refer to the Blazor Stock Market Dashboard app demos on the [website](https://blazor.syncfusion.com/showcase/stockmarket-dashboard "Blazor Stock Market Dashboard App online demo") and [GitHub](https://github.com/syncfusion/blazor-showcase-stockmarket-dashboard "Blazor showcase stockmarket dashboard GitHub demo").

## New web app sample browser

The Syncfusion Blazor components are fully supported in .NET version 8 from the [2023 Volume 3 Service pack release](https://www.syncfusion.com/forums/185501/essential-studio-2023-volume-3-service-pack-release-v23-2-4-is-available-for-download "Essential Studio 2023 Volume 3 Service pack release"). The Blazor web app sample browser has been shipped along with the existing .NET 6 sample browser. They are [live](https://blazor.syncfusion.com/demos/ "Blazor components demo").

Refer to the [.NET 6 server app](https://blazor.syncfusion.com/server/demos/ ".NET 6 server app demos") and [WASM app](https://blazor.syncfusion.com/wasm/demos/ ".NET 6 WASM app demo") for more details.

## Enhanced Playground app

The [Blazor Playground app](https://blazorplayground.syncfusion.com/ "Blazor Playground app") has enhanced flexibility with individual NuGet support for Syncfusion Blazor components. This allows you to include only the components you need.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Blazor-Playground-app-1.png" alt="Blazor Playground app" style="width:100%">

  <figcaption>Blazor Playground app</figcaption>

</figure>

We’ve added default code snippet support to make it easier to get started with Syncfusion Blazor components.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Template-for-Syncfusion-Blazor-components-in-Playground-app-1.png" alt="Template for Syncfusion Blazor components in Playground app" style="width:100%">

  <figcaption>Template for Syncfusion Blazor components in Playground app</figcaption>

</figure>

## DataGrid with advanced features

The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid "Blazor Data Grid") receives the following features in this release.

### Enhanced adaptive UI

Render an [adaptive UI layout](https://sfblazor.azurewebsites.net/development/net8/demos/datagrid/adaptive-rendering?theme=fluent "Adaptive UI layout in Blazor DataGrid demo") for the column chooser as well as context and column menus in the DataGrid.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Enhanced-adaptive-UI-in-Blazor-Data-Grid-1.png" alt="Enhanced adaptive UI in Blazor Data Grid" style="width:100%">

  <figcaption>Enhanced adaptive UI in Blazor Data Grid</figcaption>

</figure>

### Freeze as fixed

We have introduced a new column freezing mode known as **Fixed**, in addition to the existing **Left** and **Right** modes, within the column settings using the **freeze** property. This [Fixed mode](https://blazor.syncfusion.com/demos/datagrid/frozen-rows?theme=fluent "Frozen Rows and Columns in Blazor DataGrid demo") locks columns in place, ensuring their visibility during horizontal scrolling.

### Drag and drop between groups

We have added functionality to [drag and drop grid rows between different groups](https://blazor.syncfusion.com/demos/datagrid/draganddrop-within-grid?theme=fluent "Drag and drop feature in Blazor DataGrid demo") within the DataGrid.

### DataTable binding

This feature enables the binding of a [DataTable](https://blazor.syncfusion.com/demos/datagrid/datatable-binding?theme=fluent "DataTable binding in Blazor DataGrid demo") directly as a data source to the Blazor DataGrid. It also facilitates the execution of various data operations, including sorting, filtering, paging, aggregations, grouping, and searching, in addition to offering support for CRUD actions.

### Pager improvements

The [Pager dropdown](https://blazor.syncfusion.com/demos/pager/pager-dropdown?theme=fluent "Pager Dropdown in Blazor Pager demo") now has adaptive support, letting it dynamically render on mobile and tablet devices alongside the Pager component. The Pager message element now adjusts its rendering based on the screen size, ensuring a more responsive and user-friendly experience.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Adaptive-view-layout-for-page-size-dropdown.gif" alt="Adaptive view layout for page-size dropdown" style="width:100%">

  <figcaption>Adaptive view layout for page-size dropdown</figcaption>

</figure>

## Gantt Chart

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

### Virtualization using overscan count

Now, you can use the OverscanCount property to reduce the frequency of rendering while scrolling in the Gantt Chart. This property is used to render additional items in the DOM before and after the visible items (based on the page size) during [virtual scrolling](https://blazor.syncfusion.com/demos/gantt-chart/virtual-scroll?theme=fluent "Virtual scrolling in Blazor Gantt Chart demo") and initial rendering.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Virtualization-with-overscan-count-feature-in-Blazor-Gantt-Chart.gif" alt="Virtualization with overscan count feature in Blazor Gantt Chart" style="width:100%">

  <figcaption>Virtualization with overscan count feature in Blazor Gantt Chart</figcaption>

</figure>

### Action begin and complete events

New event support was introduced for actions performed within the Gantt Chart. These new events expand your ability to tailor and enhance your interactions within the Gantt Chart, providing you with more control and flexibility:

- **Sorting** : The event callback is invoked before a sorting action is performed, a column is removed from sorting in the Gantt Chart, or when the sort column direction changes from ascending to descending or vice versa.
- **Sorted** : The event callback is raised after the sorting action is performed in the Gantt Chart.

## PDF Viewer

The [Blazor PDF Viewer](https://www.syncfusion.com/blazor-components/blazor-pdf-viewer "Blazor PDF Viewer") supports new, user-friendly features.

### Mobile annotation toolbar

We’ve added support for an annotation toolbar on mobile devices. With this feature, users can perform various actions, such as adding, modifying, removing, and commenting on annotations within PDF documents directly from their mobile devices.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Mobile-annotation-toolbar-in-Blazor-PDF-Viewer-1.png" alt="Mobile annotation toolbar in Blazor PDF Viewer" style="width:100%">

  <figcaption>Mobile annotation toolbar in Blazor PDF Viewer</figcaption>

</figure>

**Note:** For more details, refer to the [Blazor PDF Viewer mobile annotation toolbar demo](https://blazor.syncfusion.com/demos/pdf-viewer-2/annotations-toolbar?theme=fluent "Blazor PDF Viewer mobile annotation toolbar demo") and [documentation](https://blazor.syncfusion.com/documentation/pdfviewer-2/annotation/annotations-in-mobile-view "Getting started with annotation toolbar in Blazor PDF Viewer").

### Keyboard support enhancements

We implemented [keyboard-based navigation options](https://blazor.syncfusion.com/documentation/pdfviewer-2/keyboard-accessibility "Keyboard interaction in Blazor PDF Viewer") to enhance the user experience, enabling individuals to navigate through the PDF Viewer more efficiently.

## TreeGrid

The [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid "Blazor TreeGrid") has the following updates.

### Virtualization with overscan count

Like the Blazor Gantt Chart, TreeGrid also supports the [OverscanCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_OverscanCount "OverscanCount property of Blazor TreeGrid") property to reduce the frequency of rendering during scrolling. This property is used to render additional items in the DOM before and after the visible items (based on the page size) during [virtual scrolling](https://sfblazor.azurewebsites.net/development/net8/demos/tree-grid/virtual-scrolling?theme=fluent "Virtual scrolling in Blazor Tree Grid demo") and initial rendering.

### Action begin and complete events

New events are supported for actions performed within the TreeGrid. These new events significantly expand your ability to tailor and enhance your interactions within the tree grid, providing you with more control and flexibility:

- **Sorting** : An event that is invoked before a sorting action is performed, a column is removed from sorting in the TreeGrid, or when the sort column direction changes from ascending to descending or vice versa for the same column.
- **Sorted** : An event callback that is raised after a sorting action is performed in the TreeGrid.

## Synchronizing charts

We’ve provided support for [synchronizing](https://blazor.syncfusion.com/documentation/chart/how-to/synchronized-chart "Synchronized Charts in Blazor") the tooltips, zooming and panning, crosshairs, highlights, and selection features across numerous charts.

Refer to the following code example. In it, we display a synchronized tooltip using the **ShowTooltip** and **HideTooltip** methods.

```csharp
@code
{
     public SfChart Chart;
     void ShowTooltip()
     {
         Chart.ShowTooltip("Gold", 40);
     }
     void HideTooltip()
     {
         Chart.HideTooltip();
     }
}
```

## Blazor radial tree diagram

The Blazor Diagram component now has [radial tree layout](https://blazor.syncfusion.com/documentation/diagram-classic/layout/radial-tree-layout "Radial Tree Layout in Blazor Diagram") support. A radial tree layout is a diagram that presents information in a hierarchical structure, with a central node at the core of the diagram. The central node represents the main concept or topic, and branches extend outward in a radial fashion, creating a tree-like structure.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/12/Blazor-Radial-Tree-Diagram.png" alt="Blazor Radial Tree Diagram" style="width:100%">

  <figcaption>Blazor Radial Tree Diagram</figcaption>

</figure>

**Note:** For more details, refer to the [Blazor Radial Tree Diagram demo](https://blazor.syncfusion.com/demos/diagramcomponent/radialtree?theme=fluent "Blazor Radial Tree Diagram demo") and [documentation](https://blazor.syncfusion.com/documentation/diagram/layout/radial-tree "Radial Tree Layout in Blazor Diagram documentation").

## Conclusion

Thanks for reading! In this blog, we have seen the new components and features added to the Syncfusion [Blazor](https://www.syncfusion.com/blazor-components/ "Blazor components library") suite for the Essential Studio [2023 Volume 4](https://www.syncfusion.com/forums/185916/essential-studio-2023-volume-4-main-release-v24-1-41-is-available-for-download "Essential Studio 2023 Volume 4") release. Details about these updates are available in our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v23.1.36 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New") pages. Try the new features out and leave your feedback in the comments section below!

The new version of Essential Studio is available for existing customers on the [License and Downloads](https://www.syncfusion.com/account/login "Essential Studio License and Downloads page") page. If you are not a Syncfusion customer, sign up for our [30-day free trial](https://www.syncfusion.com/downloads "Get free evaluation of Essential Studio products") to try out our features.

If you have any questions, you can 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 2023 Volume 4 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2023-volume-4.aspx "Blog: Syncfusion Essential Studio 2023 Volume 4 Is Here!")
- [Easily Integrate the Syncfusion Blazor PDF Viewer in Your .NET MAUI Apps](https://www.syncfusion.com/blogs/post/blazor-pdf-viewer-in-dotnet-maui.aspx "Blog: Easily Integrate the Syncfusion Blazor PDF Viewer in Your .NET MAUI Apps")
- [Exploring the Richness of Annotation Types in Blazor PDF Viewer](https://www.syncfusion.com/blogs/post/annotations-blazor-pdf-viewer.aspx "Blog: Exploring the Richness of Annotation Types in Blazor PDF Viewer")
- [Easily Explore Complex Geographical Structures with Layers and Sublayers in Blazor Maps](https://www.syncfusion.com/blogs/post/layers-sub-layers-blazor-maps.aspx "Blog: Easily Explore Complex Geographical Structures with Layers and Sublayers in Blazor Maps")