---
title: "What’s New in Syncfusion Blazor: 2024 Volume 1"
published_at: "2024-03-20T12:41:09+00:00"
modified_at: "2025-11-07T11:21:50+00:00"
url: "https://www.syncfusion.com/blogs/post/whats-new-blazor-2024-vol-1"
excerpt: "Let’s see the exciting new features and controls added to the Syncfusion Blazor platform for the 2024 Volume 1 release."
taxonomy_category:
  - "Blazor"
  - "Development"
  - "UI"
  - "Web"
  - "What's new"
taxonomy_post_tag:
  - "Blazor"
  - "development"
  - "Syncfusion"
  - "Web"
  - "What's New"
---

# What’s New in Syncfusion Blazor: 2024 Volume 1

[Gayathri Ramalingam](https://www.syncfusion.com/blogs/author/gayathri-ramalingam)

![What’s New in Syncfusion Blazor: 2024 Volume 1](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Whats-New-in-Syncfusion-Blazor-2024-Volume-1.png)


**TLDR:** Showcasing the new features and controls introduced in Syncfusion’s Blazor platform for the 2024 Volume 1 release with vivid, picturesque illustrations.

The Syncfusion [Blazor](https://www.syncfusion.com/blazor-components)
 component library offers responsive and lightweight components for building modern web apps.

This blog will highlight some of the most notable updates in the Syncfusion Blazor suite for the [Essential Studio® 2024 Volume 1 release](https://www.syncfusion.com/forums/187257/essential-studio-2024-volume-1-main-release-v25-1-35-is-available-for-download)
.

## New component

### Blazor Timeline

The new [Blazor Timeline component](https://www.syncfusion.com/blazor-components/blazor-timeline)
 enables users to display a series of data chronologically, providing a visually compelling and user-friendly experience. This showcases user activities, tracking progress, narrating historical timelines, and more.

#### Key features

- **Orientation:** Display items in a horizontal or vertical orientation.
- **Opposite content:** Display additional information opposite to the item content.
- **Items alignment:** Items’ content and opposite content can be aligned in before, after, alternate, or alternate reverse order.
- **Reverse timeline:** Shows the timeline items in the reverse order.
- **Templates:** Customize the default appearance, including styling the dot item, templated content, and more.

Refer to the following image.

![Blazor Timeline component](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Blazor-Timeline-component.jpg)

Blazor Timeline component

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

## Preview to production-ready components

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

- [Data Form](https://www.syncfusion.com/blazor-components/blazor-data-form)
- [Dropdown Tree](https://www.syncfusion.com/blazor-components/blazor-dropdowntree)
- [Stepper](https://www.syncfusion.com/blazor-components/blazor-stepper)

## WCAG 2.2

[Syncfusion Blazor components](https://www.syncfusion.com/blazor-components)
 comply with [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/)
 standards.

## Showcase samples

### Floor Planner

Introducing the new Blazor Server and WASM Floor Planner, a showcase web app. It allows you to create a floor planner to visually design and plan the layout of a floor or building, including the placement of walls, doors, windows, furniture, and other objects.

| Samples | GitHub | Server Demo | WASM Demo |
| --- | --- | --- | --- |
| Floor Planner | https://github.com/syncfusion/blazor-showcase-floor-planner | https://blazor.syncfusion.com/showcase/floor-planner/ | https://blazor.syncfusion.com/showcase/wasm/floor-planner/ |

### Logic Circuit Designer

Introducing the new Blazor Server and WASM Logic Circuit Designer, a showcase web app. It allows you to create a logic circuit designer to visually design and simulate digital logic circuits using a wide range of logic gates and input and output components to visualize better, understand how it works, and share your design with others.

| Samples | GitHub | Server Demo | WASM Demo |
| --- | --- | --- | --- |
| Logic Circuit Designer | https://github.com/syncfusion/blazor-showcase-logic-circuit-designer | https://blazor.syncfusion.com/showcase/logic-circuit-designer | https://blazor.syncfusion.com/showcase/wasm/logic-circuit-designer |

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

### DataGrid

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

#### Export the grid with column, caption, and detail templates

You can export the grid with columns containing images, hyperlinks, and customized text to Excel and PDF files. Users can also export the grid with a detail template and caption template containing customized text in the group caption row to Excel and PDF files.

![Exporting the Blazor Data Grid to Excel and PDF formats](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Exporting-the-Blazor-Data-Grid-to-Excel-and-PDF-formats.gif)

Exporting the Blazor DataGrid to Excel and PDF formats

**Note:** For more details, refer to the [Detail Template Exporting in the Blazor DataGrid demo](https://blazor.syncfusion.com/demos/datagrid/detail-template-exporting?theme=fluent)
.

#### Search and filter with new operators

The new operators in the search and filter feature allow users to perform precise and targeted searches on the Blazor Data Grid. The following new operators provide greater flexibility and control over how users can search and filter data.

- **Does not contain:** Allows users to search for items that do not include certain keywords or phrases.
- **Is null and is not null:** Allows users to search for items that contain null and non-null values.
- **Is like and is not like:** Allows users to search for items that match or do not match a specific pattern using wildcards.
- **Does not start with and does not end with:** Allows users to search for items that do not begin or end with a specific string of characters.

![Searching and filtering with new operators in Blazor Data Grid](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Searching-and-filtering-with-new-operators-in-Blazor-Data-Grid.gif)

Searching and filtering with new operators in Blazor DataGrid

**Note:** For more details, refer to the [search and filter with new operators in the Blazor DataGrid demo](https://blazor.syncfusion.com/demos/datagrid/filter-menu?theme=fluent)
.

#### Add current selection option to filter checkbox

This feature keeps the previously selected checkbox filters when making additional changes. It can be achieved by showing **Add current selection to filter** as one of the checkbox options in the Excel-like or checkbox filter.

![Add current selection to filter checkbox option in Blazor Data Grid](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Add-current-selection-to-filter-checkbox-option-in-Blazor-Data-Grid.gif)

Add current selection to filter checkbox option in Blazor Data Grid

**Note:** For more details, refer to [add current selection option to filter checkbox in the Blazor DataGrid demo](https://blazor.syncfusion.com/demos/datagrid/excel-like-filter?theme=fluent)
.

#### Row drag and drop using the drag icon

This functionality enables users to move multiple rows seamlessly within and between grids using drag icons. This intuitive feature allows users to rearrange data effortlessly, enhancing overall user experience and productivity.

![Dragging and dropping rows using the drag icon in Blazor Data Grid](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Dragging-and-dropping-rows-using-the-drag-icon-in-Blazor-Data-Grid.gif)

Dragging and dropping rows using the drag icon in Blazor Data Grid

**Note:** For more details, refer to [drag and drop rows using the drag icon in the Blazor DataGrid demo](https://blazor.syncfusion.com/demos/datagrid/row-drag-and-drop?theme=fluent)
.

### Diagram

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

#### Create swimlane diagrams

This feature lets you create swimlane diagrams programmatically or interactively. A swimlane is a visual element used to group and categorize activities or tasks based on the role or department responsible for their execution. It effectively shows complex processes involving multiple participants or departments in an organization.

![Create swimlane diagrams using the Blazor Diagram component](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Create-swimlane-diagrams-using-the-Blazor-Diagram-component.gif)

Create swimlane diagrams using the Blazor Diagram component

**Note:** Refer to [the swimlane diagrams in the Blazor Diagram demo](https://blazor.syncfusion.com/demos/diagramcomponent/swimlane?theme=fluent)
 for more details.

#### Line routing

This feature ensures that connectors in the diagrams no longer overlap with neighboring nodes when in contact, offering a more streamlined and organized visual representation. Line routing dynamically updates the connector’s geometry. This process eliminates confusion about the path flow of connectors, resulting in a cleaner and more understandable diagram.

![Line routing feature in Blazor Diagram](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Line-routing-feature-in-Blazor-Diagram.gif)

Line routing feature in Blazor Diagram

**Note:** For more details, refer to the [line routing in the Blazor Diagram demo](https://blazor.syncfusion.com/demos/diagramcomponent/linerouting?theme=fluent)
.

### File Manager

The new features added to the [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager)
 are as follows:

#### Flat data

The Blazor File Manager now introduces support for rendering flat data objects, removing the need for HTTP client requests and backend URL configuration. This enhancement also eliminates the requirement to define **FileManagerAjaxSettings** while rendering the component.

**Note:** For more details, refer to [flat data objects rendering in the Blazor File Manager demo](https://blazor.syncfusion.com/demos/file-manager/flat-data?theme=fluent)
.

#### Custom sorting

We’ve now provided custom sorting support in the Blazor File Manager. This feature allows users to override the standard sorting mechanism, tailoring it to suit specific app requirements.

![Custom sorting in the Blazor File Manager](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Custom-sorting-in-the-Blazor-File-Manager.gif)

Custom sorting in the Blazor File Manager

### Gantt Chart

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

#### Split tasks in the resource view

Users can split tasks in the resource view of the Blazor Gantt Chart. This functionality allows users to temporarily stop working on a task due to unforeseen circumstances or task reprioritization while indicating that the rest of the work will restart later in the schedule.

![Splitting tasks in resource view of the Blazor Gantt Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Splitting-tasks-in-resource-view-of-the-Blazor-Gantt-Chart.gif)

Splitting tasks in resource view of the Blazor Gantt Chart

**Note:** For more details, refer to [task splitting in the resource view of the Blazor Gantt Chart demo](https://blazor.syncfusion.com/demos/gantt-chart/split-tasks?theme=fluent)
.

### Query Builder

The new features added in the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder)
 are as follows:

#### New Query types

To improve the query functionality, the Blazor Query Builder has been expanded to accommodate query types, including Mongo, parameterized SQL, and named parameter SQL. Users can also seamlessly import these queries into the Query Builder for enhanced versatility.

**Note:** For more details, refer to the [Blazor Query Builder demo](https://blazor.syncfusion.com/demos/query-builder/mongo-query?theme=fluent)
.

#### Lock support

The lock option is available for rules as well as groups. When a rule is locked, the field, operator, and value will be disabled. When a group is locked, all the elements within the group will be disabled.

![Lock support in the Blazor Query Builder](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Lock-support-in-the-Blazor-Query-Builder.gif)

Lock support in the Blazor Query Builder

**Note:** For more details, refer to the [lock support in the Blazor Query Builder demo](https://blazor.syncfusion.com/demos/query-builder/lock-group?theme=fluent)
.

#### Clone support

The clone option is available for rules and groups. It will create a replica of a rule or group next to the original.

![Clone support in the Blazor Query Builder](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Clone-support-in-the-Blazor-Query-Builder.gif)

Clone support in the Blazor Query Builder

**Note:** For more details, refer to the [clone support in the Blazor Query Builder demo](https://blazor.syncfusion.com/demos/query-builder/clone-group?theme=fluent)
.

### PDF Viewer

The new features added to the [Blazor PDF Viewer](https://www.syncfusion.com/blazor-components/blazor-pdf-viewer)
 are as follows:

#### Customize primary toolbar

The customizable primary toolbar allows users to tailor it to their needs. You can add new items, hide existing ones, and reposition items for optimal workflow efficiency on desktop and mobile PDF Viewers.

- Integrate custom actions, such as annotation tools, view ratio, or document navigation shortcuts, directly into your primary toolbar for quick and convenient access.
- Customize your PDF Viewer experience by removing unnecessary clutter and focusing only on the tools you use most frequently.
- Organize your toolbar intuitively, placing frequently used tools at the front and center for easy access and improved productivity.

![Customizing the primary toolbar in Blazor PDF Viewer](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Customizing-the-primary-toolbar-in-Blazor-PDF-Viewer.gif)

Customizing the primary toolbar in Blazor PDF Viewer

**Note:** For more details, refer to [customizing the primary toolbar in the Blazor PDF Viewer demo](https://blazor.syncfusion.com/demos/pdf-viewer-2/primary-toolbar-customization?theme=fluent)
.

#### Shortcut keys

The Blazor PDF Viewer now provides shortcut key support for page navigation, downloading, and panel visibility for comments, bookmarks, and thumbnails.

### Data Form

The new features added in the [Blazor Data Form](https://www.syncfusion.com/blazor-components/blazor-data-form)
 are as follows:

#### Floating label

Now, you can enable floating label functionality in the Blazor Data Form by setting the **EnableFloatingLabel** property to ** true**. This will dynamically move the label above the input field when the user interacts with the form.

**Note:** Refer to the [floating labels in the Blazor Data Form demo](https://blazor.syncfusion.com/demos/data-form/floating-label?theme=fluent)
 for more details.

#### Additional data annotations

The Data Form component supports the following data annotation attributes for the model properties.

- [DisplayAttribute:](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute?view=net-8.0) To specify the display name for the model property. Now, the **ShortName**, ** AutoGenerateField**, ** Name**, ** Prompt**, and ** GroupName** properties will also be supported.
- [DataType:](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.datatype?view=net-8.0) Determines which editor component should be rendered based on the data type.
- [StringLength:](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.stringlengthattribute?view=net-8.0) Specifies the maximum and minimum length of characters that can be typed.
- [Bindable:](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.bindableattribute?view=net-8.0) Specifies whether the field should be auto-generated or not. If **Bindable** is set to ** false**, the field will not be auto-generated.
- [ReadOnly:](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.readonlyattribute?view=net-8.0) Specifies whether the field should be read-only or not. If **ReadOnly** is set to ** true**, the field will be read-only.

### Dropdowns

#### Virtualization

Previously, the Blazor dropdown components (DropDownList, ComboBox, and AutoComplete) had a limitation where virtualization didn’t function properly while grouping the data. Now, the limitations have been overcome, ensuring seamless virtualization alongside grouped data.

**Note:** For more details, refer to [virtualization in the Blazor Dropdown List demo](https://blazor.syncfusion.com/demos/dropdown-list/virtualization?theme=fluent)
.

### Toolbar

#### Spacer

The new [Spacer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemType.html#Syncfusion_Blazor_Navigations_ItemType_Spacer)
 toolbar item type in the [Blazor Toolbar](https://www.syncfusion.com/blazor-components/blazor-toolbar)
 addresses the flickering issue that occurs when toolbar items are aligned using the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Align)
 property. The **Spacer** ensures a smoother user experience during initial loading. By aligning items using CSS flex, the ** Spacer** resolves these glitches and enhances the overall loading performance.

## Conclusion

Thanks for reading! This blog explores the new features and components rolled out in the [Syncfusion Blazor](https://www.syncfusion.com/blazor-components)
 suite for the [2024 Volume 1](https://www.syncfusion.com/forums/187257/essential-studio-2024-volume-1-main-release-v25-1-35-is-available-for-download)
release. Try out these user-friendly updates and provide us feedback in the comments section below.

Remember to visit 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 discover the other available features in the 2024 Volume 1 release.

The latest version is available for existing customers on the [License and Downloads](https://www.syncfusion.com/account/downloads)
 page. If you still need to become a Syncfusion customer, use our 30-day [free trial](https://www.syncfusion.com/downloads)
 to explore our available features.

Feel free to contact 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® 2024 Volume 1 Is Here!](https://www.syncfusion.com/blogs/post/essential-studio-2024-vol-1.aspx)
- [Create Responsive Web Designs Like a Pro with Blazor Media Query](https://www.syncfusion.com/blogs/post/responsive-web-blazor-mediaquery.aspx)
- [Perform Effortless CRUD Actions in Blazor DataGrid with Fluxor](https://www.syncfusion.com/blogs/post/crud-blazor-datagrid-fluxor.aspx)
- [Mastering State Maintenance in Blazor Tabs](https://www.syncfusion.com/blogs/post/state-maintenance-blazor-tabs.aspx)