What’s New in Blazor: 2023 Volume 2

In this article, we’ll see the new components and features added in the Syncfusion Essential Studio 2023 Volume 2 release for the Blazor platform.

New Blazor components

In this 2023 Volume 2 release, we have introduced the following new components:

• Image Editor
• Next-generation PDF Viewer

Image Editor (preview)

The new Blazor Image Editor was the most requested component in our feedback portal. It is a UI component for editing and enhancing images. With built-in support for cropping, rotating, flipping, zooming, and applying filters, this component makes it easy to fine-tune your edits to achieve the desired results. It also allows users to annotate images with shapes such as rectangles, ellipses, lines, text, and freehand drawings.

Blazor Image Editor

Note: For more details, refer to the Blazor Image Editor demo and documentation.

Next-generation PDF Viewer

The new Blazor PDF Viewer component allows users to view, edit, print, and download PDF files without the web service dependency in Blazor apps. It is designed to be fast and responsive and has the same feature set as the previous PDF Viewer. It is easy to use and can be integrated into Blazor Server and WASM apps with minimal effort.

Next-generation Blazor PDF Viewer

Preview to production-ready components

The following Blazor components have been developed to meet industry standards and are now marked as production-ready:

• Media Query
• Skeleton

Material 3 theme support

The Material 3 theme has been added to all Syncfusion Blazor UI components with light and dark variants to provide modern and visually appealing user interfaces.

Material 3 theme support for Blazor components

Syncfusion Blazor Playground App

Introducing the Syncfusion Blazor Playground, an online code editor that enables real-time writing, editing, compiling, and sharing of the Blazor code. Explore the full capabilities of Syncfusion Blazor components directly in your browser without the need for complex setups or installations.

Blazor Playground app

Showcase samples

We have provided showcase samples for the following apps in the 2023 Volume 2 release:

• Loan Calculator
• Fitness Tracker

We’ll take a closer look at them.

Loan Calculator

Introducing the new Blazor WASM Loan Calculator, a showcase web app that calculates loan payments, interest rates, and amortization schedules.

For more details, check out the Blazor Loan Calculator demo on our website and GitHub.

Blazor Loan Calculator

Fitness Tracker

The new Blazor Fitness Tracker is a showcase web app that tracks a user’s daily activities, diet plan, and fasting details.

For more details, check out the Blazor Fitness Tracker demo on our website and GitHub.

Blazor Fitness Tracker

Signed assemblies

All Syncfusion Blazor component packages have been strongly signed for enhanced security and integrity.

WASM standalone sample browser

Check out the enhanced Blazor standalone WebAssembly sample browser to explore the functionality of our Syncfusion Blazor components directly.

What’s new in existing Syncfusion Blazor components

Let’s look at the new features added to the existing Blazor UI components.

DataGrid

Performance improvements

In the Blazor DataGrid, we significantly improved the component’s interaction in Server and WebAssembly environments. Specifically, enhancements have been made in the paging, filtering, sorting, and grouping features.

Row drag and drop with a detailed template

Users can easily rearrange rows and the detail template row using the drag-and-drop functionality in Blazor DataGrid.

Note: For more details, refer to the Blazor DataGrid component demo.

Accessibility improvements

We have Improved the accessibility support for the DataGrid component to meet web accessibility standards.

Data annotation improvements

We’ve provided support for the following data annotation properties in their listed classes.

Data annotation class names	Added properties	Description
DisplayFormat	NullDisplayText	Gets the text to be displayed when the property's value is null.
	ConvertEmptyStringToNull	Gets the value indicating whether empty string values should be converted to null in the UI.
	HtmlEncode	If DisableHtmlEncode is set to false, it disables the encodes of the HTML of the header and content cells.
	ApplyFormatInEditMode	Gets the value indicating whether the column format should be applied in edit mode.
Display	Description	Gets the text to be displayed for the tooltip.
	AutoGenerateFilter	If AllowFiltering is set to false, it disables a particular column's filtering option and filter bar element.

Note: For more details, refer to the Blazor DataGrid data annotation demo.

Charts

In the Blazor Charts component, we rolled out the following features.

Range step area chart

We have added a new chart type called range step area to the Blazor Charts component. It is used to display the difference between minimum and maximum values over a certain time period.

Blazor Range Step Area Chart

Note: For more details, check the Blazor range step area chart’s demo.

Zooming and panning performance improvements

We improved the Charts zooming and panning performance both to handle more significant amounts of data and for when live updates are enabled in both server and WASM apps.

Note: See the Blazor Charts zooming and panning demos for more details.

Zoom toolbar

Display a zoom toolbar with zoom-in and zoom-out options for the Charts on initial loading.

Zoom toolbar in Blazor Charts

Note: See the Blazor Zoom toolbar demo for more details.

Cross marker

Use a cross-shaped marker for data points in a chart.

Cross marker in Blazor Charts

Scheduler

Spanned events in timeline year view

Render spanned events as a single event instead of separate events in the timeline year view of the Scheduler component.

Spanned events in Blazor Scheduler’s timeline year view

Note: See the Blazor Scheduler spanned events live demo here for more information.

Recurrence editor END type customization

Now, you can set end dates (until ends on or never) for the recurrence events in the Scheduler. You can see how to customize the end type option in the editor in this documentation.

Stock Chart with date-time category axis

The new date-time category axis in the Blazor Stock Chart displays business days. Render and configure the Stock Chart using the DateTimeCategory axis type to visualize stock data. To render a line series, use a Line series type.

Blazor Stock Chart with date-time category axis

Note: See the Blazor Stock Chart with the date-time category axis’s live demo here.

TreeGrid

Row drag and drop with a detailed template

The Blazor TreeGrid now allows users to rearrange rows along with the detail template row using the drag-and-drop functionality.

DateOnly and TimeOnly values

These features allow users to bind and manage date and time-only values quickly. Users can perform various data operations such as sorting, filtering, searching, and CRUD (create, read, update, delete). To simplify things, built-in DatePicker and TimePicker editor components are rendered for editing and filtering purposes.

Date- and time-pickers in Blazor TreeGrid

Note: For more details, check out the Blazor TreeGrid inline editing demo and column-type documentation.

Dropdown components with virtual scrolling using the keyboard

The Blazor Dropdown List, ComboBox, and AutoComplete components support virtual scrolling through the keyboard keys. This provides an improved user experience when these components are rendered with large data sets. This feature allows users to navigate the list using their keyboard, making finding and selecting items faster and more efficient.

Keyboard key	Action
Down arrow	Loads the next virtual list item if the last item of the current page is selected.
Up arrow	Loads the previous virtual list item if the first item of the current page is selected.
Page Down	Loads the next page and selects the last item in it.
Page Up	Loads the previous page and selects the first item in it.
Home	Loads the initial set of items and selects the first item in it.
End	Loads the last set of items and selects the last item in it.

Virtual scrolling in Blazor Dropdown List

Note: For more details, check out the Blazor Dropdown List virtualization demo.

Carousel

The new features added in the Blazor Carousel component are as follows.

Swipe and drag gestures

This feature allows users to change the slides in the Carousel using swipe or drag gestures, improving the usability and accessibility of the component on phones and tablets.

Note: For more details, go through this getting started documentation.

Indicator customization

Users can choose any of the following indicators using the IndicatorsType property.

• Default : The Carousel displays indicators with a bullet design.
• Dynamic : The Carousel applies dynamic animation to the indicators.
• Progress : The Carousel displays slides numerically as indicators.
• Fraction : The Carousel displays indicators like a progress bar.

Indicator customization in Blazor Carousel component

Note: For more info, check out the live Blazor indicator-type demo here.

Blazor Diagram

We rolled out the following user-friendly features in the Blazor Diagram component .

Freehand drawing

Use freehand drawing to create freeform curves (splines) directly on the diagram page. With this feature, users can unleash their creativity by drawing anything from simple sketches to intricate works of art.

Freehand drawing feature in Blazor Diagram component

Note: For more details, check out the drawing tools in the Blazor Diagram component demo.

Additional auto-scroll support

This feature automatically scrolls a diagram whenever a connector or its endpoints are dragged beyond the boundary. This helps users create large dimensional drawings. The feature can be enabled or disabled using the EnableAutoScroll property in the ScrollSettings of the Blazor Diagram component.

Note: Check out the Blazor Diagram component scroll settings demo for more details.

Tooltip for symbols

There’s new tooltip support for symbols in the symbol palette. Now, users can conveniently provide additional information or descriptions for each symbol, improving the overall usability and clarity of the symbol palette.

Word Processor (document editor)

From the 2023 Volume 2 release onward, you can enjoy the following features in the Blazor Word Processor.

Alternate text for images

You can now add alternative text (alt text) for images in a text document. Alt text is important for accessibility because it enables all users to understand the content of a document. When someone who uses a screen reader or other assistive technology comes across an image in a document, they will hear the alt text describing the image. Without alt text, they will only know they’ve reached an image without knowing what the image shows.

Alternative text for images in a Word document

Note: For more details , check out the Blazor Word Processor demo.

Link to previous header or footer

This feature allows users to link or unlink the header and footer of the previous section to the current section in a Word document. This can be useful if you want to create a consistent look across your document or if you want to create different headers and footers for each section in the document.

Link to previous header and footer sections in a Word document

Note: For more details, check out the Blazor Word Processor headers and footers demo.

Character spacing and scaling

Character spacing and scaling are two different ways to customize the appearance of text in a Word document. Character spacing refers to the space between individual characters, while scaling refers to the characters’ size. You can increase the character spacing between the letters of a word to make it stand out. You can scale it up to make it easier to read or scale it down to save space.

Custom character spacing and scaling features in Blazor Word Processor

Note: For more details, check out the Blazor Word Processor character format demo.

File Manager

The new features added to the Blazor File Manager are as follows.

Virtual scrolling

The virtual scrolling feature supports UI virtualization for detailed, large-icon views in the Blazor File Manager control. This feature improves performance on the view port’s initial loading of files and folders. The remaining files and folders will be loaded dynamically when the user scrolls through them. Users can load a huge volume of files and folders without any performance issues. Scrolling can also be done with the keyboard.

You can enable this feature by setting the EnableVirtualization property to true.

Virtual scrolling in Blazor File Manager

Note: For more details, check out the virtual scrolling in the Blazor File Manager demo.

Toolbar customization

The File Manager allows users to customize the toolbar items directly with icons, text, and a tooltip. The ToolbarItems property and provided template support facilitate the customization of the items in the File Manager. You can now directly add custom toolbar items using the FileManagerCustomToolbarItems tag.

Customizing the toolbar items in Blazor File Manager

WASM performance enhancement

The PreventRender method in WASM avoids unnecessary re-rendering of the File Manager component. This method internally overrides the ShouldRender method of the File Manager to prevent unnecessary re-rendering.

Gantt Chart

Resource view

The new resource view in the Blazor Gantt Chart is used to display the tasks that are hierarchically assigned to each resource. Resources are displayed as parents, and all the tasks assigned to each resource are displayed as its child records. This feature can be enabled by setting the ViewType to ResourceView.

Resource view in Blazor Gantt Chart

Note: For more details, check out the Blazor Gantt Chart resource view demo.

DateOnly and TimeOnly columns

These column types allow users to bind and manage date- and time-only values easily. Users can perform various data operations such as sorting, filtering, searching, and CRUD (create, read, update, delete). To simplify things, built-in DatePicker and TimePicker editor components are also rendered for editing and filtering purposes.

Date-only and time-only columns in Blazor Gantt Chart

Note: For more details, check out the Blazor Gantt Chart column type documentation.

Conclusion

Thanks for reading! In this blog, we’ve seen the new features and components included in the Syncfusion Blazor suite for the 2023 Volume 2 release. Try out these user-friendly updates and give us feedback in the comments below.

Check out our Release Notes and What’s New pages to see the other available features in the 2023 Volume 2 release.

The new version of Essential Studio is available for current customers on the License and Downloads page. If you are not a Syncfusion customer, try our 30-day free trial to check out our available features.

If you have any questions, you can reach us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related blogs

• Syncfusion Essential Studio 2023 Volume 2 Is Here!
• Introducing the Next-Gen Blazor PDF Viewer Component
• Simple Steps to Create Thumbnail Images Using the Blazor File Upload Component
• Role-Based Authorization in Blazor File Manager: An Overview