What’s New in Syncfusion Blazor Components

Common

Breaking Changes

NuGet changes

In previous versions, the name of the NuGet package of Syncfusion Blazor components had EJ2 in it. From version 18.1.0.36 on, EJ2 is no longer in the name of the NuGet package.

The old and new NuGet package names are provided in the following table.

Namespace changes

In a similar fashion, we have removed EJ2 from the namespaces as well. In previous versions, every component name was prefixed with Syncfusion.EJ2.Blazor to frame its namespace. From now on, it is just going to be Syncfusion.Blazor. The following table illustrates the changes in namespaces across different versions.

Component name changes

The names of the components that are prefixed with Ejs have been renamed with the prefix Sf. The following table shows the changes in the names of the Blazor components.

Resource changes

In previous versions, you would load scripts ej2.min.js and ejs-interop.min.js manually in the application, but that is not required for the 18.1.0.36 version.

The scripts will be loaded from NuGet via static web assets for the components used in the page. We have also provided styles as static web assets to use in applications.

DataManager changes

In the previous version, Query’s initialization was new ej.data.Query(). From version 18.0.1.36 on, it has been changed to new sf.data.Query(). Check the following table for examples.

• CDN Reference - Changed the CDN reference for script and style files as mentioned below.

For component-wise breaking changes you can check our release notes

Preview to production-ready components

The following are now marked as production-ready components for Blazor:

• File Upload
• TimePicker
• AutoComplete
• ComboBox
• Splitter
• Toast
• TreeView
• ListView
• Slider
• ListBox
• Accordion

Kanban (Preview)

The Kanban component is used to visually organize and prioritize your work, and also for workflow transparency. The component is widely used in real-time task scheduling such as for software and product development, project management, and task planning.

Key features

• Data binding from local and remote data sources.
• Expandable and collapsible swimlane rows.
• Templating for UI elements: cards, columns, swimlane headers, and tooltips.
• Stacked headers.
• Work-in-progress (WIP) validation.
• Single or multiple card selection.
• Expandable and collapsible columns.

Card (Preview)

A new card has been introduced which provides a flexible and extensible content container with multiple variants and options like header, footer, media, content, and actions.

Progress Bar (Preview)

A new progress bar control has been introduced. This is used to visualize the changing status of an extended operation such as a download, file transfer, or installation. It also represents the progress with text format as percent.

Key features

• Visualizes the progress in different shapes, such as rectangle and circle.
• Customizes the ranges with different colors.
• Customizes the progress and tracks thickness.
• Displays the custom content at the center of the circular progress bar.
• Visualizes the progress in segments.
• Customizes the angle of the circular progress bar.

Accordion

The following functionalities are introduced in the Blazor Accordion component:

• Add any Blazor component as accordion content dynamically.
• Enable and disable accordion items conditionally.
• Show or hide accordion items conditionally.
• Render template for better performance.

AutoComplete

The following functionalities enhance the Blazor AutoComplete component:

• Generic data type support for data sources and values.
• Template rendering for better performance.
• Initial component rendering with better performance.

Bullet Chart

Legend

Allows users to add a legend for targets, actual values, and ranges in bullet charts.

Chart

Highlight and patterns

Enables users to highlight data points and apply patterns to highlighted and selected points.

Circular Gauge

Print and export

The rendered circular gauge can be printed or exported to PNG, JPEG, SVG, and PDF formats.

Range drag

Change the range values of the circular gauge by dragging.

Start and end width support in needle pointer

Customize the start and end width of the needle pointer.

ComboBox

The following functionalities enhance the Blazor ComboBox component:

• Generic data type support for data sources and values.
• Template rendering for better performance.
• Initial component rendering with better performance.

DataManager

IQueryable

This feature provides IQueryable support to perform data operations and CRUD actions in server-side.

ExpandoObject and DynamicObject

This feature helps users perform data operations and CRUD actions in ExpandoObject and DynamicObject data types.

Diagram

Dot pattern support for gridlines

This feature allows users to set the diagram grid pattern to dots in addition to the existing straight-lines grid pattern.

Preview and drop size for symbol palette shapes

This feature allows users to set the preview size while dragging the symbol palette shape behind the diagram and the drop size while dragging the symbol palette shape over the diagram.

Word Library

Unlink fields

Word Library now allows replacing a field with its most recent result in the Word document by unlinking the field. When you unlink a field, its current result is converted to text or a graphic and can no longer be updated automatically.

Word-to-PDF enhancements

Word Library now provides the following features in Word-to-PDF conversions:

• Adjust table cell size automatically based on its content during PDF conversion.
• Keep-with-next functionality for paragraphs inside the content control.
• Position floating items (images, shapes) with horizontal origins relative to characters.
• Improvements in converting a Word document into a 508-compliant accessible PDF (tagged PDF) document.

Word Processor

Web layout

Enables users to view documents as they would appear in a browser.

Toolbar customization

Enables users to customize (add, show, hide, enable, and disable) the existing items in a toolbar.

File Upload

The following functionalities enhance the Blazor File Upload component:

• Users no longer need a server-side API endpoint to handle save and remove actions.
• Template rendering for better performance.
• Initial component rendering with better performance.

File Manager

IBM Cloud Object Storage

The IBM Cloud Object Storage service provider helps users manage files in the File Manager control.

Data Grid

Enhancement of row and column virtualization

The row and column virtualization feature has been improved to help users load templates and bind cell and row events without any performance degradation.

Enhancement of grouping with virtualization

The grouping action in virtualization has now been enhanced by the ability to render group items in collapsed mode. The group items can be viewed by clicking the expand icon in the group caption row. This helps users visualize a large number of grouped data better.

Enhancement of state maintenance

The state persistence feature allows data to persist in browser local storage. Users can get and set the grid state from any external source apart from browser local storage. Data Grid can also be reset to its initial state using the available public method.

HeatMap Chart

Multiple rows

Provided multiple rows support for x axis. Now, the excess text will not overlap the text in the next column.

Trim support

Provided trim support for both the axes (X and Y).

Print and export

Provided print and export support. HeatMap can be exported in PDF and image formats.

Linear Gauge

Print and export

The rendered linear gauge can be printed or exported to PNG, JPEG, SVG, and PDF formats.

ListView

The following functionalities are enhanced in the Blazor ListView component:

• Users can set the TValue for template rendering.
• The query property type “string” has been changed to “Data.Query”.

Maps

Export tile maps

Support to export the maps rendered from the providers such as OSM, Bing, and Google to the supported formats.

Toggle panning functionality

Provided an option to enable or disable the panning functionality in Maps.

Complex data source

Complex data in the data sources can now be parsed and utilized in the Maps control for bubbles, markers, color mapping, and more.

PDF Library

Substitute font in form fields

Substitute fonts in form fields in existing PDF documents to preserve text properly.

Import and export XFA form data

Import and export PDF XFA form data in XML format.

Find extended features in documents

Find out if an existing PDF document has extended features.

Pivot Table

UI enhancement

The design of the Pivot Table have been enhanced for a more compact view. The cells can also now be differentiated by their background colors. These enhancements have been done for all the themes: Material, Fabric, Bootstrap, Bootstrap v4, and high contrast.

“Distinct Count” - Aggregation support for string data type

Now the aggregation type “Distinct Count” has support for the string data type along with the existing aggregation type “Count”. The aggregation types can be switched dynamically with a drop-down available in the grouping bar and field list when the field is bound in the value axis.

Customize the button options in grouping bar and field list

In the grouping bar and field list, users can customize button options: show or hide icons (sort, filter, remove, aggregate), restrict drag of a particular field, restrict drop to a particular axis, etc.

Show desired aggregation types in the context menu

Instead of displaying all aggregation types, users can add selected aggregation types to the built-in context menu based on their application requirements.

Drill-through and editing support in pivot chart

Users can view raw items in a separate dialog by clicking on a chart series similar to a pivot table. In addition, users can also edit, add, and remove raw items and display the result in a pivot chart with the help of editing support.

Authentication option to access OLAP cube

Users can now set credentials in a report to access the OLAP cube connected to the Pivot Table.

Tooltip template

Users can design their own tooltip with a tooltip template. One can be used for both the Pivot Table and Pivot Chart or each can be set individually.

Format calculated fields

An option is included in the calculated field dialog to dynamically format the new field. You can also view and edit the format of the existing calculated fields with the option.

Multiple axes option set by UI

An option is included in the built-in toolbar to display a pivot chart either with a single axis or multiple axes.

Show desired chart types in its context menu

Instead of displaying all chart types, users can add selected chart types to the built-in context menu based on their application requirements.

Sort option in member editor

Sorting options such as default, ascending, and descending are included in the member editor to sort its members. It sorts out only the members inside the dialog and not the Pivot Table.

Edit option in calculated field button

An edit option is included in the button that represents the calculated field in the grouping bar and field list. It opens the calculated field dialog in edit mode so you can make changes.

PowerPoint Library

Headers and footers

PowerPoint Library now allows creating and editing headers and footers in PowerPoint slides.

Scheduler

The following functionalities are introduced for the Scheduler:

• Render more resource rows and choose to hide the whitespace between appointments.
• Use a public method to scroll to a specific resource when there are a large number of resources.
• Set a single appointment to occupy the entire height of a cell.

Slider

The following functionalities are enhanced in the Blazor Slider component:

• Modify ticks with the TicksRendering event.
• Change tooltip content with the OnTooltipChange event.

Tab

Included a few improvements in content rendering approach that will retain the current state of the Blazor Tab component.

• Init –> All the tab content loaded on Tab’s initial rendering.
• On Demand –> The Tab content is loaded when activated.

Also, provided options to show/hide and enable/disable a tab dynamically

TimePicker

The following functionalities enhance the Blazor TimePicker component:

• Generic data type support for values.
• Improved time zone handling.
• Initial component rendering with better performance.

TreeGrid

Clipboard

Copy the TreeGrid records with and without headers to the clipboard including four hierarchy copy mode options: parent, child, both, and none.

Batch editing

Bulk add, edit, and delete records in a single request.

TreeView

The following functionalities are enhanced in the Blazor TreeView component:

• Loading a wide range of nodes with optimal performance at initial rendering.
• Template rendering for better performance.

Visual Studio Extensions

Template Studio

The Syncfusion Blazor Template Studio provides an easy-to-use project wizard that helps you create Blazor apps using Syncfusion Blazor components.

Excel Library

Pivot table enhancements

Format and convert pivot table cells with background color, foreground color, borders, fonts, etc. Also create, edit, and convert the following pivot table layouts.

• Tabular layout

• Outline layout