We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Syncfusion Feedback
What’s New in Syncfusion Blazor Components

ESSENTIAL STUDIO 2024 VOLUME 2

What’s New in Syncfusion Blazor Components

2024 Volume 2 delivers three new components for Blazor, plus a vibrant Fluent 2 theme and a production-ready Timeline component.

What’s New seaprator What’s New in Syncfusion Blazor Components

Common

.NET 9 preview compatibility

Syncfusion Blazor components offer full compatibility with the newest .NET 9 previews.

.NET 9 preview compatibility

Fluent 2 Theme support

All of our Syncfusion Blazor components now support Fluent 2 design. This lets you create UIs with a complete set of customization options readily available through the Syncfusion Blazor Theme Studio.

Fluent 2 theme in Blazor components

Preview to production-ready component

The Blazor Timeline component has been developed to meet industry standards. It is now marked as a production-ready component for Blazor.

3D Chart (preview)

We are excited to introduce the Blazor 3D Chart component. It visualizes data in three dimensions, showcasing relationships and trends among variables. Unlike traditional 2D charts, 3D charts add depth to the visualization, supporting better comprehension of data patterns.

Key features

  • Series: The 3D Chart can plot six chart types: column, bar, stacked column, stacked bar, 100% stacked column, and 100% stacked bar.
  • Data binding: Bind the 3D Chart component with an array of JSON objects or a data manager. In addition to chart series, data labels and tooltips can also be bound to the data.
  • Data labels: Annotate points with labels to improve the readability of the chart.
  • Axis types: Plot different data types, such as numeric, date-time, logarithmic, and string.
  • Legends: Provide additional information about series in a customizable legend.
  • User interaction: Add interactive features such as tooltips and data point selection.
  • Export: Print a 3D chart directly from the browser and export the chart in JPEG and PNG formats.
  • RTL: The right-to-left mode renders axes, tooltips, legends, and data in the 3D Chart component from right to left.

Blazor 3D Chart

OTP Input (preview)

Introducing the Blazor OTP Input, a form component used to input one-time passwords (OTP) during multi-factor authentication processes. It provides extensive customization options, allowing users to change input types, placeholders, separators, and more.

Key features

  • Input types: Specify the input type as text, number, or password for the OTP input.
  • Styling modes: Use built-in styles such as underline, outline, or fill.
  • Placeholders: Set hint characters for each input field, indicating the expected value.
  • Separators: Specify a character to be placed between input fields.
  • Customization: Customize the default appearance, including input field styling, input length, and more.

Blazor OTP Input

TextArea (preview)

Introducing the Blazor TextArea, a fundamental input element in web development. It allows users to input multiple lines of text within a designated area, such as comments, messages, or other lengthy content. This control is an extended version of the HTML text area element and features a floating label, various sizing options, validation states, clear icon, and more.

Blazor TextArea

DataGrid

ODataV4 routing convention

Enhances the DataManager ODataV4 Adaptor to support users’ custom action methods alongside the default GET, PUT, POST, and DELETE methods. This feature facilitates performing CRUD operations by invoking custom action methods when binding the ODataV4 service to the Grid.

Show add new row

The grid content always presents an empty “Add New Row” edit form during initialization, simplifying the process of adding a new record. Additionally, users can display the “Add New Row” at the top or bottom of the grid. After completing the form, press enter to add the record, facilitating a seamless process to add successive records. Find the demo link here.

Show add new row in Blazor DataGrid.

Diagram

Ruler

This feature provides horizontal and vertical guides for measuring in the Diagram control. The ruler helps ensure precision and accuracy when placing, sizing, and aligning shapes and objects within a diagram.

Blazor diagram canvas with horizontal and vertical ruler

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.

Searching and dropping shapes from symbol palette to blazor diagram canvas

Disable individual items

This feature allows individual items to be disabled or enabled based on specific scenarios. Users cannot interact with the disabled items or select them as values within the dropdown components (such as Dropdown list, ComboBox, AutoComplete, and Multiselect).

Blazor Dropdown components disable individual items

Excel Library

Chart to image enhancement

When converting to PDF or images, error bars are preserved exactly as they appear in the input Excel file, as well as when converting charts to images.

Chart to image in Blazor

Pivot table enhancement

The show values row option is provided in pivot table creation and Excel to PDF conversion. This feature allows users to add “Values” row to the pivot table when two or more data fields exist.

Pivot table layout in Blazor

Gradient fill

Support for gradient fill style in conditional formatting is provided in Excel document creation and Excel to PDF conversion. This feature improves the appearance of the conditional formatting and easily highlights the data in the reports containing large data.

Gradient fill in Blazor

Gantt Chart

Hover effect on rows

Use a hover effect on Gantt rows to enhance the visual experience and make it easier to identify the row currently under the cursor.

Row hover effect in Blazor Gantt Chart.

Improvements in error handling

The OnActionFailure event notifies developers when the Gantt configurations are handled incorrectly on the application end. We have enhanced this event to cover more cases, providing developers with better feedback and diagnostics when issues occur. This improvement will help ensure that any configuration errors are quickly identified and resolved.

Image Editor

Annotation enhancement

The latest update to our Image Editor significantly improves the annotation feature. Users can now draw multiple annotations simultaneously, 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.

Z-order support

This feature allows users to adjust the positioning of annotations. It is particularly useful for designing personalized templates like greeting cards or posters, where managing the layering of multiple annotations is crucial for a polished final product.

Types of z-order adjustments

  • Send Backward: Switch the selected annotation with the annotation one layer behind.
  • Send to Back: Move the selected annotation to behind all other annotations.
  • Bring to Front: Move the selected annotation to ahead of all other annotations.
  • Bring Forward: Switch the selected annotation with the annotation one layer ahead.

Blazor Image Editor z-order.

Save support enhancement

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

Blazor Image Editor save as.

PDF Library

Merge PDFs without compromising accessibility

This functionality allows users to merge PDF documents without compromising their accessibility. Accessibility is crucial for users relying on screen readers and other assistive technologies.

Merge PDFs without compromising accessibility tags

Pop-up icon appearance

This feature enables users to add various pop-up icons to a PDF document, including custom icons with unique appearances, by using appearance streams. The appearance stream ensures that each pop-up icon is displayed uniformly when the PDF document is viewed in any standard PDF viewers.

Pop-up icon appearance

Duplicate page support

This feature allows users to duplicate pages within the same PDF document, facilitating easier content replication and organization. This support is useful for quickly creating templates, maintaining consistency across multiple sections, and streamlining document editing processes.

Duplicate page

PDF Viewer

Improved PDF Viewer performance

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

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

Enhanced custom stamps

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

Enhanced custom stamps in Blazor PDF Viewer.

Customizable date and time format

Customize the date and time format in the comment panel. You can tailor the display to suit your preferred style and regional settings.

Customizable date and time format in Blazor PDF Viewer.

Multiline comments

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

Multiline comments in Blazor PDF Viewer.

Pivot Table

Value sorting (OLAP)

Enables users to sort individual measures and their aggregated values in the OLAP cube linked pivot table in ascending and descending order. It can be performed through code-behind or UI action by directly clicking the value header present on the pivot table’s row or column axis.

Value sorting for OLAP cube in Blazor Pivot Table.

PowerPoint Library

End paragraph mark

The .NET PowerPoint Library includes an API to access the font properties of the end paragraph in PowerPoint Presentations.

PowerPoint-to-PDF and image conversion enhancements

The Syncfusion PowerPoint Library includes the following enhancements when converting any PowerPoint Presentation to a PDF file or image:

  • Note rendering: Use a notes-publishing option to improve the rendering of slides with notes that exceed a page when converting to PDF.

  • Highlight preservation: Highlights within the original presentation will be maintained with their exact colors during the conversion process, ensuring a precise representation in the resulting PDF or image file.

Highlight color in Blazor

  • Chart error bars: Error bars are preserved exactly as they appear in the input presentation when converted to PDF or images, as well as when converting charts to images.

Chart error bars in Blazor

Query Builder

Drag-and-drop support

The Query Builder component now includes a drag-and-drop feature, allowing users to reposition rules or groups effortlessly within the Query Builder. This enhancement provides a more intuitive and flexible way to construct and modify queries.

Blazor Query Builder drag and drop.

Separate connector support

The separate connector feature in the Query Builder component enables users to integrate standalone connectors between rules or groups within the same group. This allows for greater flexibility, as users can connect rules or groups using different connectors, enhancing the complexity and precision of query construction.

Blazor Query Builder separate connectors.

Rich Text Editor

Quick format toolbar

The 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 more formats directly from the quick toolbar near the selected text.

Quick format toolbar.

TreeGrid

Performance enhancements in single root node data

We are excited to announce significant performance improvements for TreeGrids with single root node data configurations. This enhancement is specifically targeted at scenarios where there is only one root parent row with thousands of child rows. Following are the performance metrics comparing the old release with the current 2024 Volume 2 release for 10,000 records:

Action Old release Current 2024 Volume 2 release
Initial Render 1.7 seconds 1.1 seconds
Expand row 31 seconds 1.4 seconds
Collapse row 560 milliseconds 150 milliseconds

These improvements mean faster initial rendering and significantly quicker row expand and collapse operations, providing a smoother and more responsive user experience.

Improvements in error handling

The OnActionFailure event notifies developers when the TreeGrid configurations are handled incorrectly on the application end. We have enhanced this event to cover more cases, providing developers with better feedback and diagnostics when issues occur. This improvement will help ensure that any configuration errors are quickly identified and resolved.

TreeView

UI virtualization

This feature optimizes performance when dealing with large data sets. Nodes are rendered based on TreeView height and swapped when users scroll, avoiding rendering off-screen items. You can explore a demo of this feature here.

Blazor TreeView Virtualization.

Word Library

Mathematical equation to LaTeX

The .NET Word Library (DocIO) now includes an API to extract LaTeX code from mathematical equation in Word documents. Additionally, users can modify existing equations using the LaTeX code.

With this feature, users can convert mathematical equations from Word documents to LaTeX, and integrate them into LaTeX-based equation editors.

Math to LaTeX in Blazor

Word-to-PDF and image conversion enhancements

The Syncfusion Word Library includes the following enhancements when converting any Word document to a PDF file:

  • Right-to-left text: Enhanced rendering of columns and table of contents to preserve the right-to-left direction as the original Word document.
  • Mathematical equations: Improved preservation of mathematical equations and their alignments during PDF and image conversion.
  • Chart error bars: Error bars are preserved exactly as they appear in the input Word document when converted to PDF or images, and when converting charts to images.

Chart error bars in Blazor

Up arrow icon
Live Chat Icon For mobile
Live Chat Icon