What’s New in Blazor: 2024 Volume 2
Tags: blazor, development, web, ui
Published: 2024-07-08 14:25:10

---
title: What’s New in Blazor: 2024 Volume 2
published: true
date: 2024-06-25 17:31:25 UTC
tags: blazor, development, web, ui
canonical_url: https://www.syncfusion.com/blogs/post/whats-new-blazor-2024-volume-2
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hv1pwbz3tui7rc9mmlh.png
---
**TL;DR:** Showcasing the new features and components introduced in the Syncfusion Blazor platform for the 2024 Volume 2 release with vivid, picturesque illustrations.

We are happy to announce the release of [2024 Volume 2](https://www.syncfusion.com/forums/188642/essential-studio-2024-volume-2-main-release-v26-1-35-is-available-for-download "2024 Volume 2 release"). The release brings many exciting new components, features, themes, and accessibility improvements to our [Syncfusion Blazor components](https://www.syncfusion.com/blazor-components "Blazor components").

This blog will share the most highlighted updates in the Syncfusion Blazor suite for the 2024 Volume 2 release.

## Common updates

### .NET 9 previews compatibility

Syncfusion Blazor components offer full compatibility with .NET 9, including the latest preview versions.

### Introducing Fluent 2.0: A modern theme for your Blazor apps

Introducing a new Fluent 2.0 theme for Syncfusion Blazor components! This theme elevates your apps’ visual appeal with a clean look and feel.

- **Light and dark variants:** Choose a light theme for a bright and airy feel or a dark theme for a sophisticated look.
- **Customization:** With the intuitive [Syncfusion Blazor Theme Studio](https://blazor.syncfusion.com/themestudio "Blazor Theme Studio"), we can easily customize the theme’s appearance. You can also easily adjust colors, fonts, and other visual elements.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Fluent-2.0-theme-support-in-Syncfusion-Blazor-components.png" alt="Fluent 2.0 theme support in Syncfusion Blazor components" style="width:100%">

  <figcaption>Fluent 2.0 theme support in Syncfusion Blazor components</figcaption>

</figure>

**Note:** Refer to the [Fluent 2.0 theme in the Blazor components demo](https://blazor.syncfusion.com/demos/datagrid/overview?theme=fluent2 "Fluent 2.0 theme in the Blazor components demo") for more details.

## New Blazor components

In this release, the following most awaited new Blazor components arrived in preview mode:

### Blazor 3D Charts (Preview)

The [Blazor 3D Charts](https://www.syncfusion.com/blazor-components/blazor-3d-charts "Blazor 3D Charts") component visually represents data in three dimensions, showcasing relationships and trends among variables. Unlike traditional 2D charts, 3D charts add depth to the visualization, allowing for a better understanding of data patterns.

The component’s key features include:

- **Data binding:** Bind the 3D Charts component to a collection of objects or a DataManager. In addition to chart series, data labels and tooltips can also be bound to your data.
- **Data labels:** Annotate data points with labels to improve the readability of data.
- **Axis types:** Plot different data types such as numbers, datetime, logarithmic, and string.
- **Axis features:** It supports multiple axes, inverted axes, multiple panes, opposed positions, and smart labels.
- **Legend:** Provide additional information about a series with customization options.
- **Animation** – Animates the Chart series when the chart is rendered and refreshed.
- **User interaction:** Supports interactive features such as tooltips and data point selection.
- **Export:** Print the Chart directly from the browser and export it in JPEG and PNG formats.
- **RTL** – Provides a full-fledged right-to-left mode that aligns the axis, tooltip, legend, and data in the 3D Charts component from right to left direction.
- **Appearance:** The built-in theme picks the colors for the 3D Charts, but each element can be customized with simple configuration options.
- **Accessibility** —The 3D Charts component is designed to be accessible to users with disabilities. Its features, such as WAI-ARIA standard compliance and keyboard navigation, ensure that it can be effectively used with assistive technologies such as screen readers.

The Blazor 3D Charts component offers six versatile chart types; all are easily configurable and have built-in support for visually stunning effects.

- **Column:** Represents data with vertical bars for easy value comparison.
- **Bar:** Utilizes horizontal bars to display data and facilitate value comparison.
- **Stacked Column:** Plots data points on top of each other using vertical bars for comprehensive visualization.
- **Stacked Bar:** Achieves the same effect as the Stacked Column but with horizontal bars.
- **100% Stacked Column:** This column illustrates the percentage distribution of multiple datasets within a total, with each column adding up to 100%.
- **100% Stacked Bar:** This bar resembles the Stacked Column but uses horizontal bars to showcase the percentage distribution of datasets within a total.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Blazor-3D-Charts-1.gif" alt="Blazor 3D Charts" style="width:100%">

  <figcaption>Blazor 3D Charts</figcaption>

</figure>

**Note:** For more details, refer to the Blazor 3D Charts [documentation](https://blazor.syncfusion.com/documentation/3d-chart/getting-started "Getting started with Blazor 3D Charts") and [demos](https://blazor.syncfusion.com/demos/chart-3d/column?theme=fluent2 "Blazor 3D Charts demo").

### Blazor OTP Input (Preview)

The [Blazor OTP Input](https://www.syncfusion.com/blazor-components/blazor-otp-input "Blazor OTP Input") is a form component used to input one-time passwords (OTP) during multi-factor authentication. It provides extensive customization options, allowing users to change input types, placeholders, separators, and more to suit their needs.

Its key features include:

- **Input types:** Allowed input types are text, number, or password.
- **Styling modes:** Offer built-in styling options such as underline, outline, or fill.
- **Placeholders:** Set a hint character for each input field, indicating the expected value.
- **Separators:** Specify a character between the input fields.
- **Customization:** Customize the default appearance, including input field styling, input length, and more.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Blazor-OTP-Input-component.jpg" alt="Blazor OTP Input component" style="width:100%">

  <figcaption>Blazor OTP Input component</figcaption>

</figure>

**Note:** For more details, refer to the Blazor OTP Input component [documentation](https://blazor.syncfusion.com/documentation/otp-input/getting-started-webapp "Getting started with Blazor OTP Input") and [demos](https://blazor.syncfusion.com/demos/otp-input/default-functionalities "Blazor OTP Input demo").

### Blazor TextArea (Preview)

The [Blazor TextArea](https://www.syncfusion.com/blazor-components/blazor-textarea "Blazor TextArea") allows users to input multiple lines of text within a specific area, such as comments, messages, composing detailed notes, or other content.

Its key features include:

- **Resizable:** The Blazor TextArea component can be resized vertically, horizontally, or in both directions by selecting the corresponding **ResizeMode** option.
- **Row-column configurations:** You can configure the size and appearance of the TextArea element in terms of **RowCount** and **ColumnCount** to suit specific design and functionality requirements.
- **Floating label:** The Blazor TextArea intelligently floats the placeholder text based on the specified **FloatLabelType** option, providing users with clear guidance and enhancing usability.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Blazor-TextArea-component.gif" alt="Blazor TextArea component" style="width:100%">

  <figcaption>Blazor TextArea component</figcaption>

</figure>

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

## Preview to production-ready component

The [Blazor Timeline](https://www.syncfusion.com/blazor-components/blazor-timeline "Blazor Timeline component") component, introduced in the 2024 Volume 1 release, is now production-ready and meets the industry standards for stability and performance.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Blazor-Timeline-component.png" alt="Blazor Timeline component" style="width:100%">

  <figcaption>Blazor Timeline component</figcaption>

</figure>

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

## What’s new in our existing Blazor components?

### Blazor Diagram

The new features added to the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram "Blazor Diagram") component are as follows:

#### Rulers

Streamline your diagram creation process using rulers in the Blazor Diagram component! This powerful new feature empowers you to:

- **Ensure accuracy:** Achieve precise placement, sizing, and alignment of shapes and objects within your diagrams.
- **Horizontal and vertical measurements:** Utilize horizontal and vertical rulers for comprehensive measurement capabilities.

The [RulerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RulerSettings "RulerSettings property of Blazor Diagram") property is used to customize ruler behavior and appearance.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Rulers-in-Blazor-Diagram-component.gif" alt="Rulers in Blazor Diagram component" style="width:100%">

  <figcaption>Rulers in Blazor Diagram component</figcaption>

</figure>

**Note:** For more details, refer to the [rulers in the Blazor Diagram component demos](https://blazor.syncfusion.com/demos/diagramcomponent/rulers?theme=fluent2 "Example of rulers in Blazor Diagram component").

#### Handle complex diagrams with chunking support

We have added support for rendering large diagrams with annotations, paths, text, images, and SVG shapes without exceeding the maximum size limit for a single incoming hub message (MaximumReceiveMessageSize of 32KB). You can achieve it by setting the [EnableChunkMessages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_EnableChunkMessages "EnableChunkMessages property of Blazor Diagram component") property to **true**.

#### Advanced routing

We have enhanced the dynamic updating of connector routes based on the placement or movement of nearby shapes. You can enable this feature by setting the [RoutingType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.RoutingTypes.html#Syncfusion_Blazor_Diagram_RoutingTypes_Advanced "RoutingType property of Blazor Diagram component") property to **Advanced**.  It provides an optimized path with fewer bends and the shortest possible connector length.

#### Search symbols in the symbol palette

This feature allows users to search for symbols in the symbol palette by entering a symbol’s ID or search keywords into a text box and clicking Search. The search results are retrieved by matching the ID or  **SearchTags**  property with the string entered in the Search text box. The  **ShowSearchTextBox**  property of the symbol palette is used to show or hide the search text box in the symbol palette.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Searching-symbols-in-the-symbol-palette-of-the-Blazor-Diagram-component.gif" alt="Searching symbols in the symbol palette of the Blazor Diagram component" style="width:100%">

  <figcaption>Searching symbols in the symbol palette of the Blazor Diagram component</figcaption>

</figure>

### PDF Viewer

The [Blazor PDF Viewer](https://www.syncfusion.com/blazor-components/blazor-pdf-viewer "Blazor PDF Viewer") delivers the following new features:

#### Improved PDF Viewer performance

The PDF Viewer now loads large-sized documents quickly, boosting the loading speed and efficiency of large PDF files.

Experience faster document viewing with the optimized PDF Viewer, designed to handle large files quickly.

#### Enhanced custom stamp

The Blazor PDF Viewer now supports adding PNG images as custom stamps. Also, it displays any graphical object as a custom stamp in an existing PDF document. You can rotate custom stamps to better fit your documents.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Custom-stamps-in-Blazor-PDF-Viewer.png" alt="Custom stamps in Blazor PDF Viewer" style="width:100%">

  <figcaption>Custom stamps in Blazor PDF Viewer</figcaption>

</figure>

#### Customizable date and time format

In the comment panel, you can customize the date and time format. The display can also be tailored to suit your preferred style and regional settings.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Customizable-date-and-time-format-support-in-Blazor-PDF-Viewer.png" alt="Customizable date and time format support in Blazor PDF Viewer" style="width:100%">

  <figcaption>Customizable date and time format support in Blazor PDF Viewer</figcaption>

</figure>

### Multiline comments

Multiline comments can now be added to the annotations. This allows better organization and clarity in the PDF documents.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Adding-multiple-comments-to-annotation-in-PDF.png" alt="Adding multiple comments to an annotation in PDF" style="width:100%">

  <figcaption>Adding multiple comments to an annotation in PDF</figcaption>

</figure>

### Image Editor

The [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor "Blazor Image Editor") is rolled out with the following advanced features:

#### Continuous drawing mode for seamless image editing

Users can now draw multiple annotations simultaneously in the Image Editor, enhancing creative flexibility. Furthermore, every action, including customizations, will be tracked in the undo/redo collection, ensuring a seamless user experience and making it easier to experiment with different designs. This feature can be achieved through the UI and built-in public methods, namely [EnableActiveAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_EnableActiveAnnotationAsync_Syncfusion_Blazor_ImageEditor_ShapeType_ "EnableActiveAnnotationAsync method of Blazor Image Editor") and [DisableActiveAnnotationAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_DisableActiveAnnotationAsync "DisableActiveAnnotationAsync method of Blazor Image Editor").

**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").

#### Save support enhancement

Users can save an image with a specified file name, type, and image with quality. This enhancement provides more control over the output, ensuring users can save their work exactly as needed.

The feature can be achieved through UI and [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ExportAsync_System_String_Syncfusion_Blazor_ImageEditor_ImageEditorFileType_System_Double_ "ExportAsync method of Blazor Image Editor") public method.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Enhanced-save-support-in-Blazor-Image-Editor.png" alt="Enhanced save support in Blazor Image Editor" style="width:100%">

  <figcaption>Enhanced save support in Blazor Image Editor</figcaption>

</figure>

#### Z-order support for layered editing

This feature allows users to adjust the positioning of annotations. It is handy for designing personalized templates like greeting cards or posters, where managing the layering of multiple annotations is crucial for a polished final product. This feature can be implemented through UI and the public methods [BringForwardAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_BringForwardAsync_System_String_ "BringForwardAsync method of Blazor Image Editor"), [BringToFrontAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_BringToFrontAsync_System_String_ "BringToFrontAsync method of Blazor Image Editor"), [SendBackwardAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SendBackwardAsync_System_String_ "SendBackwardAsync method of Blazor Image Editor"), and [SendToBackAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_SendToBackAsync_System_String_ "SendToBackAsync method of Blazor Image Editor").

Types of z-order adjustments include:

- **Sent Backward:** Switch the selected annotation with the annotation one layer behind it.
- **Send to Back:** Move the selected annotation to behind all other annotations.
- **Bring to Front:** Move the selected annotation ahead of all others.
- **Bring forward:** Switch the selected annotation with the annotation one layer ahead of it.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Z-order-annotation-rendering-options-in-Blazor-Image-Editor.png" alt="Z-order annotation rendering options in Blazor Image Editor" style="width:100%">

  <figcaption>Z-order annotation rendering options in Blazor Image Editor</figcaption>

</figure>

### Gantt Chart

The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart "Blazor Gantt Chart") delivers the following new user-friendly updates:

#### Revamped resource binding for more efficient project management

The [resource allocation](https://blazor.syncfusion.com/documentation/gantt-chart/resources "Resources in Blazor Gantt Chart") feature in the Blazor Gantt Chart has been enhanced with simplified data binding support and improved resource assignment management.

#### Row hover support for interactive viewing

We’ve introduced the new row hover selection support in the Gantt Chart. The [EnableRowHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRowHover "EnableRowHover property of Blazor Gantt Chart") property enhances the visual experience and makes it easier to identify the row currently under the cursor.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Row-hovering-feature-in-the-Blazor-Gantt-Chart.gif" alt="Row hovering feature in the Blazor Gantt Chart" style="width:100%">

  <figcaption>Row hovering feature in the Blazor Gantt Chart</figcaption>

</figure>

**Note:** For more details, refer to the [row hovering in the Blazor Gantt Chart demo](https://blazor.syncfusion.com/demos/gantt-chart/selection?theme=fluent "Row hovering in the Blazor Gantt Chart demo").

### Query Builder

The [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder "Blazor Query Builder") supports the following new features in this 2024 volume 2 release:

#### Drag and drop support for intuitive query building

Users can reposition rules or groups within the component effortlessly. This enhancement provides a more intuitive and flexible way to construct and modify queries.

**Note:** For more details, refer to the [example of drag and drop in Blazor Query Builder](https://blazor.syncfusion.com/demos/query-builder/drag-and-drop?theme=fluent2 "Example of drag and drop in Blazor Query Builder").

#### Separate connectors for clear visualization

Users can integrate standalone connectors between rules or groups within the same group. This feature allows for greater flexibility, as users can connect rules or groups using different connectors, enhancing the complexity and precision of query construction.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Separate-connectors-feature-in-Blazor-Query-Builder.png" alt="Separate connectors feature in Blazor Query Builder" style="width:100%">

  <figcaption>Separate connectors feature in Blazor Query Builder</figcaption>

</figure>

**Note:** For more details, refer to the [example of separate connectors in Blazor Query Builder](https://blazor.syncfusion.com/demos/query-builder/separate-connector?theme=fluent2 "Example of separate connectors in Blazor Query Builder").

### DataGrid

#### Add new row option for easier data entry

The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid "Blazor DataGrid") now includes an **add new row** feature during inline editing. This feature ensures that a blank row is constantly visible within the grid content, facilitating the easy insertion of new records.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Add-new-row-feature-in-Blazor-DataGrid.gif" alt="Add new row feature in Blazor DataGrid" style="width:100%">

  <figcaption>Add new row feature in Blazor DataGrid</figcaption>

</figure>

**Note:** For more details, refer to the [example of inline editing in Blazor DataGrid](https://blazor.syncfusion.com/demos/datagrid/inline-editing?theme=fluent "Example of inline editing in Blazor DataGrid").

### Dropdown components

#### Disable specific items

The dropdown components ([AutoComplete](https://www.syncfusion.com/blazor-components/blazor-autocomplete "Blazor AutoComplete"), [ListBox](https://www.syncfusion.com/blazor-components/blazor-listbox "Blazor ListBox"), [ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox "Blazor ComboBox"), [Dropdown List](https://www.syncfusion.com/blazor-components/blazor-dropdown-list "Blazor Dropdown List"), [Dropdown Tree](https://www.syncfusion.com/blazor-components/blazor-dropdowntree "Blazor Dropdown Tree"), [MultiSelect Dropdown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown "Blazor MultiSelect Dropdown"), and [Mention](https://www.syncfusion.com/blazor-components/blazor-mention "Blazor Mention")) can now enable or [disable individual items](https://blazor.syncfusion.com/demos/dropdown-list/disableditems?theme=fluent "Example of disabled items in Blazor Dropdown List") for specific scenarios. Once an item is disabled, it cannot be selected as a value for the component. This is particularly useful for disabling options such as out-of-stock products or inactive account types. To configure the disabled item columns, use the [DropDownListFieldSettings.Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListFieldSettings.html#Syncfusion_Blazor_DropDowns_DropDownListFieldSettings_Disabled "DropDownListFieldSettings.Disabled property") property.

### MultiSelect Dropdown

#### Virtual scrolling

The [Blazor MultiSelect Dropdown](https://www.syncfusion.com/blazor-components/blazor-multiselect-dropdown "Blazor MultiSelect Dropdown") component’s virtualization support allows users to navigate large lists of options efficiently by loading the items on demand. Virtualization can be used with filtering, grouping, custom values, and checkbox mode features. This feature can be enabled by setting the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMultiSelect-2.html#Syncfusion_Blazor_DropDowns_SfMultiSelect_2_EnableVirtualization "EnableVirtualization property of Blazor MultiSelect Dropdown") property to **true**.

**Note:** For more details, refer to the [example of virtualization in the Blazor MultiSelect Dropdown component](https://blazor.syncfusion.com/demos/multiselect-dropdown/virtualization?theme=fluent "Example of virtualization in Blazor MultiSelect Dropdown").

### Tree Grid

#### Performance improvements in expand and collapse features

We are excited to announce significant performance improvements for [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid "Blazor TreeGrid") with single root node data configurations. This enhancement targets scenarios with only one root parent row and thousands of child rows.

Following are the performance metrics comparing the old release with the current 2024 volume 2 release for 10,000 records:

<table>
<tbody>
<tr>
<td width="208">
<p><strong>Actions</strong></p>
</td>
<td width="208">
<p><strong>Old release</strong></p>
</td>
<td width="208">
<p><strong>2024 Volume 2 release</strong></p>
</td>
</tr>
<tr>
<td width="208">
<p>Initial rendering</p>
</td>
<td width="208">
<p>1.7 seconds</p>
</td>
<td width="208">
<p>1.1 seconds</p>
</td>
</tr>
<tr>
<td width="208">
<p>Expand row</p>
</td>
<td width="208">
<p>31 seconds</p>
</td>
<td width="208">
<p>1.4 seconds</p>
</td>
</tr>
<tr>
<td width="208">
<p>Collapse row</p>
</td>
<td width="208">
<p>560 milliseconds</p>
</td>
<td width="208">
<p>150 milliseconds</p>
</td>
</tr>
</tbody>
</table>

### Rich Text Editor

#### Quick format toolbar for easy text formatting

The [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-wysiwyg-rich-text-editor "Blazor Rich Text Editor") features a quick toolbar that appears upon text selection, offering convenient access to text formatting options. This floating toolbar allows users to easily apply bold, italic, underline, strikethrough, and other formats directly from the quick toolbar near the selected text.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Add-new-row-feature-in-Blazor-DataGrid.gif" alt="Quick format toolbar in Blazor Rich Text Editor" style="width:100%">

  <figcaption>Quick format toolbar in Blazor Rich Text Editor</figcaption>

</figure>

**Note:** For more details, refer to the [example of quick format toolbar in Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/quick-format-toolbar?theme=fluent2 "Example of quick format toolbar in Blazor Rich Text Editor").

### TreeView

#### Virtualization for smoother performance

The [Blazor TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview "Blazor TreeView") component now supports [virtualization](https://blazor.syncfusion.com/demos/treeview/ui-virtualization?theme=fluent2 "Example of virtualization in Blazor TreeView") to optimize performance while handling a huge volume of data. This will render only nodes based on the TreeView height and swap the nodes when the user scrolls, avoiding rendering off-screen items. To enable this feature, set the required [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_Height "Height property of Blazor TreeView") property for TreeView and the value of [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#Syncfusion_Blazor_Navigations_SfTreeView_1_EnableVirtualization "EnableVirtualization Property for Blazor TreeView") to **true**.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Virtualization-in-Blazor-TreeView.gif" alt="Virtualization in Blazor TreeView" style="width:100%">

  <figcaption>Virtualization in Blazor TreeView</figcaption>

</figure>

## Conclusion

Thanks for reading! In this blog, we have explored the new components and features added to the [Syncfusion Blazor](https://www.syncfusion.com/blazor-components "Blazor components") suite for the [2024 Volume 2](https://www.syncfusion.com/forums/188642/essential-studio-2024-volume-2-main-release-v26-1-35-is-available-for-download "Essential Studio 2024 Volume 2") release. To discover more about the features available in this release, please visit our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v26.1.35 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew/blazor-components "What’s New in Syncfusion Blazor components") pages. Try them out and leave your feedback in the comments section below!

For current Syncfusion users, you can access the most recent version of Essential Studio on the [License and Downloads](https://www.syncfusion.com/account/downloads "License and downloads page of Essential Studio") page. If you’re new to Syncfusion, we offer a 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to test these exciting new features.

Try out these features and share your feedback as comments on this blog. You can also reach us through our [support forums](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")

## Related blogs

- [Syncfusion Essential Studio 2024 Volume 2 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2024-vol2 "Blog: Syncfusion Essential Studio 2024 Volume 2 Is Here!")
- [Introducing the New Blazor 3D Charts Component](https://www.syncfusion.com/blogs/post/blazor-3d-charts-component "Blog: Introducing the New Blazor 3D Charts Component")
- [How to Maintain State in the Blazor ListBox Using Fluxor?](https://www.syncfusion.com/blogs/post/maintain-state-blazor-listbox-fluxor "Blog: How to Maintain State in the Blazor ListBox Using Fluxor?")
- [What’s New in C# 13 for Developers?](https://www.syncfusion.com/blogs/post/whats-new-csharp-13-for-developers "Blog: What’s New in C# 13 for Developers?")