What’s New in Syncfusion Blazor: 2024 Volume 1
Tags: blazor, development, ui, web
Published: 2024-03-25 16:18:56

---
title: What’s New in Syncfusion Blazor: 2024 Volume 1
published: true
date: 2024-03-20 12:41:09 UTC
tags: blazor, development, ui, web
canonical_url: https://www.syncfusion.com/blogs/post/whats-new-blazor-2024-vol-1.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pv7jb8sjbsrx2ya90c5w.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 "Syncfusion 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 "Essential Studio 2024 Volume 1").

## New component

### Blazor Timeline

The new [Blazor Timeline component](https://www.syncfusion.com/blazor-components/blazor-timeline "Syncfusion Blazor Timeline component") 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.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Blazor-Timeline-component.jpg" 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 "Blazor Timeline component demo").

## 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 "Blazor Data Form component")
- [Dropdown Tree](https://www.syncfusion.com/blazor-components/blazor-dropdowntree "Blazor Dropdown Tree component")
- [Stepper](https://www.syncfusion.com/blazor-components/blazor-stepper "Blazor Stepper component")

## WCAG 2.2

[Syncfusion Blazor components](https://www.syncfusion.com/blazor-components "Syncfusion Blazor components") comply with [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/ "Web Content Accessibility Guidelines (WCAG) 2.2") 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/441krb3k3hho7yv3ilw6.PNG)

### 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpockps8jekwmqckuk7o.PNG)
## 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 "Syncfusion 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.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Exporting-the-Blazor-Data-Grid-to-Excel-and-PDF-formats.gif" alt="Exporting the Blazor Data Grid to Excel and PDF formats" style="width:100%">

  <figcaption>Exporting the Blazor Data Grid to Excel and PDF formats</figcaption>

</figure>

**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 "Example of Detail Template Exporting in Blazor DataGrid Component").

#### 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.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Searching-and-filtering-with-new-operators-in-Blazor-Data-Grid.gif" alt="Searching and filtering with new operators in Blazor Data Grid" style="width:100%">

  <figcaption>Searching and filtering with new operators in Blazor Data Grid</figcaption>

</figure>

**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 "Example of Menu Filter in Blazor DataGrid").

#### 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.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Add-current-selection-to-filter-checkbox-option-in-Blazor-Data-Grid.gif" alt="Add current selection to filter checkbox option in Blazor Data Grid" style="width:100%">

  <figcaption>Add current selection to filter checkbox option in Blazor Data Grid</figcaption>

</figure>

**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 "Add current selection option to filter checkbox in the Blazor DataGrid demo").

#### 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.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Dragging-and-dropping-rows-using-the-drag-icon-in-Blazor-Data-Grid.gif" alt="Dragging and dropping rows using the drag icon in Blazor Data Grid" style="width:100%">

  <figcaption>Dragging and dropping rows using the drag icon in Blazor Data Grid</figcaption>

</figure>

**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 "Drag and drop rows using the drag icon in the Blazor DataGrid demo").

### Diagram

The new features added in the [Blazor Diagram](https://www.syncfusion.com/blazor-components/blazor-diagram "Syncfusion 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.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Create-swimlane-diagrams-using-the-Blazor-Diagram-component.gif" alt="Create swimlane diagrams using the Blazor Diagram component" style="width:100%">

  <figcaption>Create swimlane diagrams using the Blazor Diagram component</figcaption>

</figure>

**Note**: Refer to [the swimlane diagrams in the Blazor Diagram demo](https://blazor.syncfusion.com/demos/diagramcomponent/swimlane?theme=fluent "Swimlane diagrams in the Blazor Diagram demo") 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.

<figure>

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

  <figcaption>Line routing feature in Blazor Diagram</figcaption>

</figure>

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

### File Manager

The new features added to the [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager "Syncfusion 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 "Flat data objects rendering in the Blazor File Manager demo").

#### 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.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Custom-sorting-in-the-Blazor-File-Manager.gif" alt="Custom sorting in the Blazor File Manager" style="width:100%">

  <figcaption>Custom sorting in the Blazor File Manager</figcaption>

</figure>

### Gantt Chart

The new features added to the [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart "Syncfusion 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.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Splitting-tasks-in-resource-view-of-the-Blazor-Gantt-Chart.gif" alt="Splitting tasks in resource view of the Blazor Gantt Chart" style="width:100%">

  <figcaption>Splitting tasks in resource view of the Blazor Gantt Chart</figcaption>

</figure>

**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 "Task splitting in the resource view of the Blazor Gantt Chart demo").

### Query Builder

The new features added in the [Blazor Query Builder](https://www.syncfusion.com/blazor-components/blazor-query-builder "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 "Blazor Query Builder demo").

#### 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.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Lock-support-in-the-Blazor-Query-Builder.gif" alt="Lock support in the Blazor Query Builder" style="width:100%">

  <figcaption>Lock support in the Blazor Query Builder</figcaption>

</figure>

**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 "Lock support in the Blazor Query Builder demo").

#### 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.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Clone-support-in-the-Blazor-Query-Builder.gif" alt="Clone support in the Blazor Query Builder" style="width:100%">

  <figcaption>Clone support in the Blazor Query Builder</figcaption>

</figure>

**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 "Clone support in the Blazor Query Builder demo").

### PDF Viewer

The new features added to the [Blazor PDF Viewer](https://www.syncfusion.com/blazor-components/blazor-pdf-viewer "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.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Customizing-the-primary-toolbar-in-Blazor-PDF-Viewer.gif" alt="Customizing the primary toolbar in Blazor PDF Viewer" style="width:100%">

  <figcaption>Customizing the primary toolbar in Blazor PDF Viewer</figcaption>

</figure>

**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 "Customizing the primary toolbar in the Blazor PDF Viewer demo").

#### 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 "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 "Floating labels in the Blazor Data Form demo") 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 "DisplayAttribute Class") 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 "DataType Enum") 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 "StringLengthAttribute Class") 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 "BindableAttribute Class") 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 "ReadOnlyAttribute Class") 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 issue has been resolved.

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

### Toolbar

#### Spacer 

The new [Spacer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemType.html#Syncfusion_Blazor_Navigations_ItemType_Spacer "Spacer property in Blazor Toolbar") toolbar item type in the [Blazor Toolbar](https://www.syncfusion.com/blazor-components/blazor-toolbar "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 "Align property in Blazor Toolbar") 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 "Syncfusion Blazor suite") 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 "Essential Studio 2024 Volume 1")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 "Syncfusion Release Notes") and the [What’s New](https://www.syncfusion.com/products/whatsnew "Syncfusion What's New page") 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 "License and Downloads page") page. If you still need to become a Syncfusion customer, use our 30-day [free trial](https://www.syncfusion.com/downloads "Get the 30-day free evaluation of Essential Studio products") to explore our available features.

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