What’s New in 2021 Volume 3: Blazor | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (199)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (211)BoldSign  (13)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (132)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (892)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (50)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (127)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (618)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (497)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (42)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (379)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (17)Web  (582)What's new  (319)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
What’s New in 2021 Volume 3: Blazor

What’s New in 2021 Volume 3: Blazor

We are glad to inform you that our Essential Studio 2021 Volume 3 release is available now!

Syncfusion offers the largest selection of components for the Blazor platform, featuring popular components like Charts, DataGrid, Scheduler, Diagram, Word Processor, and Maps as well as unique file-format libraries for manipulating Excel, Word, PDF, and PowerPoint files.

In this blog, we’ll look at the new features, components, and performance enhancements in the Blazor platform for the 2021 Volume 3 release.

New theme-Bootstrap V5

You can enjoy the new Bootstrap v5 theme for all our Blazor UI components. This theme was developed based on the official Bootstrap v5 standard to handle styles, fonts, and icons. It comes with both light and dark variants.

Bootstrap V5 Theme
Bootstrap V5 Theme

Render the Blazor components with the Bootstrap 5 theme by referencing the corresponding CSS file.

For data visualization components like Charts and Maps, use the Theme property to choose the required theme.

Note: For more details, check out the Bootstrap V5 theme demo.

.NET 6 Release Candidate 1—compatibility

We have included .NET 6 RC1 compatibility support for our Blazor components along with its preview version releases. Also, you can start experimenting with our Blazor components in Visual Studio 2022 (Preview) and .NET 6 SDK.

.NET 6 Release Candidate 1 – Compatibility Support for Syncfusion Blazor Components

Breadcrumb (preview)

The new Blazor Breadcrumb component is a graphical user interface that identifies or highlights the current location within the hierarchical structure of a website. It includes all the required features, which work in real-time applications:

  • Breadcrumb with overflow
  • Bind to location
  • Active last Breadcrumb
  • Template and customization
Blazor Breadcrumb
Blazor Breadcrumb

Note: For more details, check out the Blazor Breadcrumb live demo.

Icon (preview)

The new Blazor Icon is a simple UI component that helps render an icon in a web application. The Syncfusion Blazor Icon library provides a set of base64-formatted icons in order of theme (Bootstrap V5, Tailwind CSS). The component comes with options to customize an icon’s title, size, and color, and it supports third-party icon integration such as OpenIconic. You can integrate this Icon component within existing Syncfusion Blazor components.

Blazor Icons Library
Blazor Icons Library

Note: For more detail, refer to the Blazor Icons library integrated as Toolbar item demo and documentation.

Ignore script isolation for PDF Viewer, Diagram, and Word Processor

In the 2021 Volume 2 release, we provided the option to load necessary scripts from the application end to improve initial loading performance. At that time, this option was not applicable to the Word Processor, PDF Viewer, or Diagram components.

Now, we are extending this support to these components based on customer requests.

You can use the same IgnoreScriptIsolation property by setting it to true to skip the JS Isolation and load the scripts from the application end itself.

Using CDN

ScriptsCDNComponents
syncfusion-blazor.min.js
<script src="https://cdn.syncfusion.com/documentation/19.3.43/syncfusion-blazor.min.js" type="text/javascript"></script>
This script contains all the Blazor components except PDF Viewer and Word Processor.
syncfusion-blazor-pdfviewer.min.js
<script src="https://cdn.syncfusion.com/documentation/19.3.43/syncfusion-blazor-pdfviewer.min.js" type="text/javascript"></script>
This script contains PDF Viewer and its dependency component scripts.
syncfusion-blazor-documenteditor.min.js
<script src="https://cdn.syncfusion.com/documentation/19.3.43/syncfusion-blazor-documenteditor.min.js" type="text/javascript"></script>
This script contains Word Processor and its dependency component scripts.

 Blazor CRG

You can select the PDF Viewer, Word Processor, and Diagram components in the Blazor custom resource generator (CRG).  You can generate the required component script and styles and reference them in your application.

Follow these steps to reference the scripts from the application end:

  1. First, ignore the script isolation using the global option in the Startup.cs or Program.cs file for the Blazor Server and Blazor WASM apps, respectively.
    Refer to the following code.

    services.AddSyncfusionBlazor(options => {
    options.IgnoreScriptIsolation = true;
    }
  2. Then, load the corresponding scripts from the application end in the _Host.cshtml page or index.html for the Blazor Server or WASM app.
    Refer to the following code example.

    @* For Syncfusion Blazor overall Package*@
    <script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
     @*PDF viewer package*@
    <script src="https://cdn.syncfusion.com/documentation/19.3.43/syncfusion-blazor-pdfviewer.min.js" type="text/javascript"></script>
     @*Document Editor Package*@
    <script src="https://cdn.syncfusion.com/documentation/19.3.43/syncfusion-blazor-documenteditor.min.js" type="text/javascript"></script>

Charts

The Blazor Charts component can render millions of data points in seconds without any performance degradation. Its performance has been enhanced to meet the following scenarios:

  • Easily load huge volumes of data.
  • Dynamic updates like chart-type changes, legend customization, axis range customization, and annotations. They are now faster since they’re element-specific.
  • Quick and smooth zooming and panning facilities.

Server-side performance metrics.

No. of Points10K50K100K1000K
Improvement2X3X3X4X

WebAssembly performance metrics.

No. of Points10K50K100K1000K
Improvement2X4X4X5X

Note: Take a look at our Blazor Charts demo to check out its performance enhancement.

Text boxes and pickers

Previously, we had some delay on initial loading and two-way binding while rendering multiple text boxes or picker components in a single page. Now, we’ve improved the performance of these components:

For more details, refer to the following table of performance metrics.

ComponentsVol-2, 2021
Release
Vol-3, 2021 Release
30 Textboxes and 960 Numeric TextBoxes12-15 sec8-10 sec
1000 Textboxes and 1000 Numeric TextBoxes25-27 sec17-20sec

DataGrid

In the 2021 Volume 3 release, the Blazor DataGrid has the following useful updates.

Adaptive UI

A major feature in this release is the adaptive support for the Blazor DataGrid component. We have redesigned the UI to provide an optimal and user-friendly viewing experience on small screens. This interface will render the filter, sort, and edit dialogs adaptively and have an option to render the grid row elements vertically. You can set the EnableAdaptiveUI property to true to use this feature.

Adaptive UI in Blazor DataGrid
Adaptive UI in Blazor DataGrid

Note: For more details, refer to the Adaptive Layout in Blazor DataGrid Component documentation and demo.

Column chooser template

You can use the content template support for a column chooser using the Template and FooterTemplate properties in the Blazor DataGrid.

Refer to the following code.

<SfGrid>    
   <GridColumnChooserSettings>
        <Template>
        </Template>
        <FooterTemplate>
        </FooterTemplate>
    </GridColumnChooserSettings>
</SfGrid>
Column Chooser Template in Blazor DataGrid
Column Chooser Template in Blazor DataGrid

Note: For more details, check out the Example of Column Chooser Template in Blazor DataGrid Component.

Custom sort comparer

This feature helps to customize the default sort action for specific columns in the Blazor DataGrid by defining the SortComparer property.

Note: For more details, refer to the Example of Custom Sorting in Blazor DataGrid Component and documentation.

Other enhancements

  • You can show or hide the clear icon in the search text box of the toolbar item.
  • Bind custom data sources to the checkbox or Excel filter lists.

Gantt Chart

The Blazor Gantt Chart delivers the following new features and enhancements in this 2021 Volume 3 release.

Performance

You can avoid unnecessary rerendering of the Blazor Gantt Chart using the PreventRender method. This will enhance the initial loading performance of the Gantt Chart in Blazor WebAssembly (WASM) applications.

Height and width in percentage values

Now, you can set the values of Blazor Gantt Chart’s width and height properties in percentages. The Gantt Chart performance is based on the client’s browser or the parent element’s width and height.

Other enhancements

There are a few more enhancements in the Blazor Gantt Chart:

  • Header template support to customize the header cell content.
  • Update the noncolumn fields with the add action.
  • Handle dependency validation on the client-side.
  • Use the OnCellSave event, which determines whether to save the edited cell value or not.
  • Use the EnableAutoLinkValidation property in OnActionBegin event arguments. Based on the AutoLinkValidate value, you can enable or disable validation on a predecessor drawing.

TreeGrid

Column virtualization

In the 2021 Volume 3 release, we added column virtualization support to enhance the performance of the Blazor TreeGrid.

Note: Refer to the Virtual Scrolling in Blazor TreeGrid demo and documentation.

Paste and AutoFill

Now, you can enjoy the Paste and AutoFill functionalities in our Blazor TreeGrid like in the Microsoft Office Excel.

Paste and AutoFill Features in Blazor TreeGrid
Paste and AutoFill Features in Blazor TreeGrid

Column chooser template

You can easily customize the content and footer of the column chooser in the Blazor TreeGrid. You can also group checkbox items, display them in tree view, and more.

Column Chooser Template in Blazor TreeGrid
Column Chooser Template in Blazor TreeGrid

Custom validation

The Blazor TreeGrid provides custom validation support during CRUD operations.

Custom Validation in Blazor TreeGrid
Custom Validation in Blazor TreeGrid

Scheduler

The Blazor Scheduler has the following features in the 2021 Volume 3 release.

Virtual mask

This feature displays a placeholder during virtualization. A loading placeholder will be shown on the schedule until the new data is populated.

Virtual Mask Feature in Blazor Scheduler
Virtual Mask Feature in Blazor Scheduler

Note: For more details, refer to the Example of Virtual Mask in Blazor Scheduler component.

Header indent template

Now, you can enjoy the template support for header indent cells using the HeaderIndentTemplate property.

Header Indent Template in Blazor Scheduler
Header Indent Template in Blazor Scheduler

Note: Refer to the Customizing header indent cells documentation.

Other enhancements

There are a few more enhancements to the Blazor Scheduler:

Reminders

We have published a demo about creating a schedule calendar with event reminders.

Word Processor

The Blazor Word Processor has these new features and enhancements in the 2021 Volume 3 release:

Observable and dynamic data binding

The Blazor Kanban and Scheduler components support Observable Collection, and dynamic data binding (ExpandoObjects and dynamic objects).

Note: Check out the live demos for Kanban Board and Scheduler components.

Conclusion

Thanks for reading! In this blog post, we have seen the new, useful features and enhancements in our Syncfusion Blazor suite in the 2021 Volume 3 release. You can check out the list of all the new features in our release notes and on the What’s New pages. Try out these user-friendly updates and leave your feedback in the comments below!

If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out these features.

You can reach us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed