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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
What’s New in Syncfusion Blazor Components

ESSENTIAL STUDIO 2020 VOLUME 1

What’s New in Syncfusion Blazor Components

2020 Volume 1 brings new Kanban, Progress Bar, and Card controls to our comprehensive Blazor suite, plus enhancements for the Word Processor control.

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.

Before 18.1.0.36 version From 18.1.0.36 version
Syncfusion.EJ2.Blazor Syncfusion.Blazor
Syncfusion.EJ2.WordEditor.Blazor Syncfusion.WordEditor.Blazor
Syncfusion.EJ2.Blazor.PdfViewerServer.Linux Syncfusion.Blazor.PdfViewerServer.Linux
Syncfusion.EJ2.Blazor.PdfViewerServer.OSX Syncfusion.Blazor.PdfViewerServer.OSX

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.

Before 18.1.0.36 version From 18.1.0.36 version
Syncfusion.EJ2.Blazor Syncfusion.Blazor
Syncfusion.EJ2.Blazor.Buttons Syncfusion.Blazor.Buttons
Syncfusion.EJ2.Blazor.Charts Syncfusion.Blazor.Charts
Syncfusion.EJ2.Blazor.Grids Syncfusion.Blazor.Grids

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.

Before 18.1.0.36 version From 18.1.0.36 version
<EjsButton>Button</EjsButton> <SfButton>Button</SfButton>
<EjsCalendar TValue="DateTime"></EjsCalendar> <SfCalendar TValue="DateTime"></SfCalendar>

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.

Before 18.1.0.36 version From 18.1.0.36 version
@using Syncfusion.EJ2.Blazor.Data
@{ var chartQuery = $"new ej.data.Query().where('EmployeeID', 'equal', {employee.EmployeeID}, false)"; }
<EjsChart Height="390px" Title="Sales Report" DataSource="@OrderData">
....
....
<ChartSeriesCollection>
<ChartSeries XName="ShipCity" YName="Freight" Type="ChartSeriesType.Column" Query="@chartQuery">
</ChartSeries>
</ChartSeriesCollection>
....
....
</EjsChart>
@using Syncfusion.Blazor.Data
@{ var chartQuery = $"new sf.data.Query().where('EmployeeID', 'equal', {employee.EmployeeID}, false)"; }
<SfChart Height="390px" Title="Sales Report" DataSource="@OrderData">
....
....
<ChartSeriesCollection>
<ChartSeries XName="ShipCity" YName="Freight" Type="ChartSeriesType.Column" Query="@chartQuery">
</ChartSeries>
</ChartSeriesCollection>
....
....
</SfChart>
  • CDN Reference - Changed the CDN reference for script and style files as mentioned below.
Before v18.1.0.36 From v18.1.0.36
https://cdn.syncfusion.com/ej2/18.1.36-beta/bootstrap4.css https://cdn.syncfusion.com/blazor/18.1.36-beta/styles/bootstrap4.css
https://cdn.syncfusion.com/ej2/18.1.36-beta/dist/ej2.min.js https://cdn.syncfusion.com/ej2/18.1.36-beta/dist/ejs.interop.min.js https://cdn.syncfusion.com/blazor/18.1.36-beta/syncfusion-blazor.min.js

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.

Kanban component.

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.

Blazor Card component

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.

Blazor ProgressBar component

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.

Legend

Chart

Highlight and patterns

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

Highlight

Circular Gauge

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

Circular gauge with print and export functionality

Range drag

Change the range values of the circular gauge by dragging.

Circular Gauge with range drag

Start and end width support in needle pointer

Customize the start and end width of the needle pointer.

Circular Gauge with needle customization

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.

Diagram Dot pattern support for gridlines

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.

Preview and Drag Size

Word Library

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.

Unlink a field in Word document

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.

Web layout.

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.

File Manager Support for IBM Cloud Object Storage file provider

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.

Data Grid row and column virtualization.

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.

Data Grid grouping with virtualization.

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.

HeatMap Multiple Row Support

Trim support

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

HeatMap Trim Support

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

HeatMap Print and Export Support

Linear Gauge

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

Linear gauge with print and export functionality

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.

OSM map in Maps component with print and export functionality

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.

Pivot Table with new appearance

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

Distinct Count to string fields

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.

Button options

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.

Aggregation context menu

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.

Chart drill through

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.

Tooltip template

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.

Formatting in calculated field dialog

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.

Multiple axes option

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.

Chart types dialog

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.

Member editor

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.

Edit icon in buttons

PowerPoint Library

Headers and footers

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

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.

Blazor Scheduler events without whitespace.

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.

TreeGrid with clipboard feature.

Batch editing

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

TreeGrid with batch editing feature.

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.
What's New | Blazor | VSExtensions | Syncfusion

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.

Template Studio

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 Pivot table - tabular layout.

  • Outline layout Pivot table - outline layout.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon