What’s New in Syncfusion^® Blazor Components

Common

.NET 10 support

Syncfusion Blazor components now support .NET 10, enabling development with the latest .NET 10 framework features and enhancements.

New component

The Block Editor component has been added to our Blazor UI suite.

Block Editor (preview)

The Block Editor is a modern, block-based content editing solution designed for web applications. This component delivers an intuitive and flexible interface for creating rich, structured documents using interactive content blocks. It is ideal for building document editors, note-taking apps, and content creation tools, offering a seamless and powerful editing experience.

Highlights

• Multiple block types: Create structured content with headings (levels 1–4), paragraphs, lists, checklists, quotes, callout, dividers, tables, images, toggle blocks, and more.

• Slash commands: Quickly insert or transform content blocks using interactive / commands.

• Rich text formatting: Apply styles such as bold, italic, underline, strikethrough, and uppercase.

• Action menu: Perform block-level operations like move, delete, and duplicate.

• Context menu: Access quick block actions via right-click context menus.

• Inline content: Insert inline elements such as links, labels, and mentions directly within blocks.

• Copy and paste with formatting: Copy and paste content from Microsoft Word, Outlook, or other editors while preserving styles, formatting, and structure.

• Undo/redo operations: Revert or repeat user actions for better control.

• Events for customization: The Block Editor includes a rich set of events that allow developers to customize and extend functionality: block addition, removal, update, selection change, command execution, paste, and mention selection.

• Accessibility and WCAG 2.0 compliance: Full accessibility support for assistive technologies and keyboard navigation.

• Localization: Built-in localization support to adapt the editor’s UI and messages to different languages and cultures.

• Cross-site scripting (XSS) prevention: Built-in security measures ensure safe content editing.

Check out the demo.

Production-ready component

The following component has been developed to meet industry standards and is now marked as production-ready for Blazor:

• Chat UI: Responsive chat interface with real-time messaging and customizable design.

AI AssistView

Footer toolbar for prompt composition

The AI AssistView component now supports a footer toolbar for composing prompts with single-line and multi-line input modes that extend dynamically while typing for long-form entries. The toolbar is fully declarative and extensible, offering built-in actions such as Send, Attach, and Clear, along with support for custom items. Developers can define item order, icons, tooltips, and handle actions to create a tailored user experience for AI-driven workflows. The toolbar also supports inline and bottom modes, providing flexibility in UI placement for different application layouts.

Find the demo link here.

Charts

Legend templates

The Charts component supports legend template customization. This feature enables developers to render custom content for legend items using the LegendItemTemplate property in ChartSeries. It improves readability and branding by allowing icons, formatted text, or combined indicators in the legend.

This enhancement is compatible with existing legend behavior and does not introduce breaking changes. The template is applied per series, enabling consistent legend visuals across multiple series.

Find the demo link here.

Linear and radial gradients

Use linear and radial gradients in chart rendering. Gradients can be applied to series, legend items, markers, tooltip markers, trendlines, and indicators to enhance visual distinction and aesthetics without custom drawing code. Gradient definitions can be configured per series for fine-grained styling.

Find the demo link here.

Stripline tooltip

This tooltip provides contextual information when hovering over or focusing on stripline regions, making threshold ranges and highlighted time windows easier to interpret. Tooltips inherit global tooltip formatting and can be customized for content and appearance.

Find the demo link here.

Accumulation charts

Legend template

The accumulation chart supports legend template customization. This enables users to render custom content for each legend item using the LegendItemTemplate property, improving readability for pie, doughnut, and other accumulation series.

Find the demo link here.

Linear and radial gradients

We added built-in support for linear and radial gradients in accumulation charts. Gradients can be applied to series, legend items, markers, tooltip markers, and individual points, enabling visually rich presentations without external styling.

Find the demo link here.

Stock Chart

Legend template

The Stock Chart supports legend template customization. This feature allows users to add custom legend item content using the LegendItemTemplate property, enabling icon-based legends and descriptive labels for indicators and series.

Linear and radial gradients

Use linear and radial gradients in the Stock Chart. Gradients can be applied to series, legend items, the range navigator, trendlines, and indicators to enhance contrast and highlight ranges without custom rendering logic.

Chat UI

File attachments in conversations

The Chat UI component now supports sending, receiving, previewing, and downloading file attachments within chat conversations. Common file types for images, documents, PDFs, and videos are displayed as message bubbles with thumbnails for quick identification. This feature streamlines workflows for scenarios like customer support, team communication, and field reporting.

Highlights:

• Compatible with major file formats including JPG, PNG, PDF, DOCX, and MP4.
• Inline previews for images.
• Secure download options for all attachments.

Find the demo link here.

DataGrid

Row and column spanning

Row spanning and column spanning provide greater flexibility in grid layouts. These options allow cells to span across multiple rows or columns, making it easier to present complex data structures and create visually appealing designs.

Check out the demo

Performance upgrades by module

The core processes have been refined to ensure quicker load times and improved response times.

Initial rendering The rendering process has been optimized to achieve quicker load times and seamless initialization, even with large datasets.

Grouping with virtualization The grouping mechanism in virtualized grids has been fine-tuned to handle extensive data more efficiently, delivering a faster and more responsive experience.

Diagram

Collaborative editing

This feature enables multiple users to edit the same diagram in real time while keeping all views synchronized. Each change is instantly reflected and applied across all users, ensuring a consistent state without requiring page refreshes.

Force-directed tree layout

This feature utilizes a physics-based algorithm to dynamically arrange nodes for improved visualization. It attracts and repulses connected nodes to reduce overlaps and edge crossings. The result is a clean, intuitive layout that clarifies complex relationships in network analysis.

Find the demo link here

Restrict node dragging outside the swimlane

This feature prevents nodes from being dragged outside their assigned swimlane. It helps preserve the logical structure and ensures clarity in workflow diagrams.

File Manager

Template for large icons view

The template enables customization of how files and folders render in the large icons view. It receives the item context (such as name, type, size, and modified date) so users can display thumbnails, badges, or additional metadata, and wire actions like quick menus or previews. This is useful for media libraries, document portals, and scenarios that benefit from rich visual presentation of items.

Find the demo link here.

Sequential upload

This feature ensures that files and folders are uploaded one at a time, rather than simultaneously. Sequential upload helps manage bandwidth efficiently and provides a predictable upload order, which is essential for workflows that require controlled file processing or server-side validation.

Find the demo link here.

Gantt Chart

Undo/redo

The Gantt Chart now supports undo and redo functionalities. Actions such as CRUD operations, zooming, drag-and-drop, indenting, filtering, searching, and sorting can be reversed or reapplied, enhancing flexibility and efficiency.

Find the demo link here.

Column validation

Column validation ensures the accuracy of task data in the Gantt Chart. Validation rules are applied during both Add and Edit operations for grid cells and dialog inputs, preventing invalid or incomplete entries from being saved.

Find the demo link here.

Rich Text Editor

Auto formatting for Markdown syntax

This feature lets users get and set Markdown content in the HTML editor for seamless format conversion. It introduces auto-formatting of Markdown syntax in the editor, instantly rendering elements like headings (#), bold (*), and italics () as formatted HTML.

View the Auto formatting for Markdown syntax demo

Line height

The line height feature lets users adjust the vertical spacing between lines of text, giving them control over how tightly or loosely the text is packed within paragraphs. This helps improve readability and visual balance in the content layout.

View the line height demo

Checklist

This feature allows users to create checklists (to-do lists) directly within the Rich Text Editor. Users can easily add interactive checkbox items to their content, enabling task tracking and management within documents.

View the Checklist demo

Drag and drop media files

This feature enhances media handling by allowing users to directly drag and drop video and audio files into the editor. It streamlines the content creation process, making it easier to insert multimedia without having to navigating through upload dialogs.

View the media drag & drop demo

Manage copy content

The feature streamlines content management by stripping unwanted styles when copying HTML, ensuring clean output while preserving text formatting such as font styles, colors, and alignments within the editor.

Enhance import/export security for Word and PDF

This feature enables the passing of authorization tokens during Word document imports and when exporting to PDF or Word formats. It ensures secure document access by validating user permissions during both import and export operations.

Scheduler

Custom toolbar

This feature allows users to customize the existing toolbar in the Scheduler. Users can add, remove, or reorder toolbar buttons to create a more personalized scheduling experience.

Find the demo link here.

Tree Grid

Row and column spanning

This feature automatically merges adjacent cells that contain the same value. Identical values are displayed as a single, unified cell across both rows and columns, improving readability and reducing redundancy in hierarchical data.

Blazor demo for Tree Grid with row and column spanning

Column chooser template

A customizable column chooser template has been introduced, enabling the creation of a personalized layout in place of the default column chooser. This enhancement allows flexible adjustments to the chooser’s design and efficient management of column visibility.

Blazor demo for Tree Grid with column chooser template

Custom sorting

The custom sorting logic overrides the default sorting behavior. This enhancement enables specialized ordering rules, ensuring that data is arranged according to specific application requirements rather than the standard ascending or descending options.

Blazor demo for Tree Grid with custom sorting

Custom aggregate

This enhancement introduces the ability to define specific logic for calculating aggregate values. This ensures precise summaries under specified conditions and provides flexibility that extends beyond the built‑in aggregate options, allowing tailored calculations when required.

Blazor demo for Tree Grid with custom aggregate

GraphQL API integration

The Tree Grid component now supports direct data binding from GraphQL APIs, allowing queries and updates through GraphQL’s declarative model. This makes it easier to work with complex, hierarchical datasets and ensures efficient data retrieval tailored to the Tree Grid’s structure.

Blazor Tree Grid with GraphQL

Lazy loading with virtualization

Tree Grid introduces lazy loading with virtualization to optimize performance when handling large local datasets. Child records are initially rendered in a collapsed state and are dynamically loaded only when expanded, resulting in faster initial rendering and smoother interaction with extensive local data collections.

Blazor Tree Grid with Lazy loading and virtualization