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 3

What’s New in Syncfusion Blazor Components

2024 Volume 3 boosts our Blazor collection with four new components; diagram import and export abilities with Mermaid syntax; and dynamic file loading with paging in the File Manager.

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

Common

New components

The following components have been added to the Syncfusion Blazor suite:

  • AI Assist View
  • Smart Paste Button
  • Smart TextArea
  • MultiColumn ComboBox

Preview to production-ready components

The following components have been enhanced to meet industry standards and are production-ready for Blazor development:

  • OTP Input
  • TextArea

Fluent 2 high contrast theme

All Syncfusion Blazor components support the Fluent 2 high contrast design, improving accessibility and user experience for visually impaired users.

Fluent2HighContrast theme in Blazor Components

Bootstrap 5.3 theme

All Syncfusion Blazor components support the Bootstrap 5.3 design, offering enhanced styling and features for modern web development.

Bootstrap5.3 theme in Blazor Components

Smart Paste Button (preview)

The Blazor Smart Paste Button automatically fills a form with content from the user’s clipboard by utilizing text-generative AI functionality. This component enhances the user experience by simplifying data entry and minimizing manual input for forms.

Key features

  • Clipboard integration: Pulls data from the clipboard, reducing the need for manual typing.
  • Autofill capability: Automatically populates multiple form fields with one click, saving time and effort.
  • Smart data parsing: Intelligently recognizes and formats clipboard data to match the form’s required fields.

Blazor Smart Paste

Smart TextArea (preview)

The Blazor Smart TextArea is an advanced component designed to elevate the text input experience by providing intelligent autocomplete suggestions for entire sentences through text-generative AI functionality. This component enhances user productivity by predicting and offering relevant completions based on the context of what is being typed.

Key features

  • Intelligent autocomplete: Automatically suggests whole sentence completions based on user input and predefined configurations.
  • Context-aware predictions: Enhances typing efficiency by predicting the most relevant text completions in real time.
  • Seamless integration: Easily integrates into existing Blazor applications, providing a smooth and intuitive user experience.
  • Customizable configuration: Allows for tailored suggestions, adapting to specific application needs and user behaviors.

Blazor TextArea

MultiColumn ComboBox (Preview)

The MultiColumn ComboBox is a dropdown component that displays items in a detailed, table-like format with multiple columns, offering more information than standard dropdown lists. It enhances user interaction with features such as data binding from various sources, item grouping, and advanced filtering for quick searches. Additionally, it supports sorting, virtualization for large datasets, and customizable templates for headers, footers, and list items.

Key features

  • Data binding: Supports data binding from a list of objects and remote data sources using adapters like OData, URLs, and Web APIs.
  • Grouping: Allows grouping of pop-up list items to enhance the user experience by organizing related items.
  • Filtering: Provides advanced filtering capabilities to find and select items easily from large datasets.
  • Sorting: Allows sorting of items in ascending or descending order and single or multicolumn sorting.
  • Virtualization: Displays large datasets efficiently by loading data on demand.
  • Templates: Offers templates to customize the control’s appearance and layout, including the header, footer, and pop-up list items.

Blazor MultiColumn ComboBox

AI AssistView (preview)

The Blazor AI AssistView is a versatile and modern UI tool designed to seamlessly integrate AI services into your web applications. It enables users to send prompts, execute commands through a feature-rich toolbar, and effortlessly display AI-generated responses in a user-friendly interface.

Key features

  • Built-in toolbars: Predefined toolbar items like copy, edit, and like/dislike for easy interaction with prompts and responses.
  • Prompt suggestions: Supports initial or on-demand prompt suggestions with a customizable header.
  • Header toolbar: Allows adding toolbar items in the header with options for executing custom commands.
  • Custom views: Extensive customization options for creating personalized views in addition to the built-in assist view.
  • Customization: Allows customizing the default appearance, including prompts, responses, and more, to suit your needs.

Blazor AI AssistView

Barcode

QR code with logo support

This feature allows you to embed a logo or image in the center of your QR codes, enhancing brand visibility and making your QR codes more visually appealing. You can customize the logo size, which defaults to one-third of the QR code’s dimensions and is automatically adjusted to ensure it doesn’t exceed 30% of the code’s width or height, maintaining scan efficiency. The logo can be sourced from a local image path, Base64-encoded image, online image URL, or icon.

Blazor QR code with logo embedded in center

Calendars

Multiple date input formats

The Blazor DatePicker, DateTime Picker, TimePicker, and DateRangePicker components allow users to enter dates in multiple formats, such as MM/DD/YYYY, DD-MM-YYYY, and others. Supporting multiple date formats improves the user experience in global applications.

Blazor calendars multiple date input formats.

DateTime Picker

Time range selection

The DateTime Picker now supports restricting time selection to specific daily ranges, such as business hours. Users can only choose times within defined limits, like for appointment scheduling. The feature improves the user experience by allowing easy configuration of time.

Blazor DateTime Picker time range selection.

Diagram

Flowchart automatic layout

A flowchart visually represents a process, workflow, system, or algorithm. This feature automatically creates flowcharts by arranging diagram elements clearly, logically, and visually appealingly. This feature leverages an advanced layout algorithm that automatically positions nodes and connectors, whether sourced from the NodeCollection and ConnectorCollection or business objects defined in the DataSource.

Creating flowchart from external data using automatic flowchart layout algorithm in Blazor Diagram

Importing and exporting mind map and flowchart Mermaid syntax data

Mermaid syntax is a Markdown-inspired syntax that automatically generates diagrams. This feature enables you to generate mind map and flowchart diagrams directly from Mermaid syntax data, making it easier to visualize complex ideas and processes without manual drawing. Additionally, you can export your mind map and flowchart diagrams to Mermaid syntax, enabling easy sharing and editing, and use it across various platforms. You can also leverage AI assistants to generate Mermaid syntax for mind map and flowchart diagrams and directly import the generated code into the Blazor Diagram component.

CRUD action support

This feature allows you to perform operations like adding, reading, updating, and deleting data in the DataSource at runtime by using the ReadDataAsync, InsertDataAsync, UpdateDataAsync, and DeleteDataAsync methods of the SfDiagramComponent class in the Blazor Diagram component.

Blazor Diagram with CRUD operations

Word Processor

Shape support

This feature allows you to preserve shapes in Word documents when opening and saving them in the Word Processor. Please refer to the documentation and demo for more details.

List of shapes preserved:

  • Lines
  • Rectangles
  • Basic shapes
  • Block arrows
  • Equation shapes
  • Flowcharts
  • Stars and banners

Illustration of content control in the Blazor Word Processor component.

Excel Library

Enhanced conversion of Excel to PDF and image formats

The Syncfusion Excel Library (XlsIO) includes the following enhancements for converting Excel files to PDF and image formats.

  • Tagged PDFs: Converting Excel documents to PDF files with PDF/UA standard compliance is now supported. This ensures that users who rely on accessibility tools can read the content of these PDF documents.
  • Metafile image preservation: The EMF images in Excel documents are now preserved in conversion.

Performance improvement

The Syncfusion Excel Library performance is improved by 30% for reading cell values from Excel documents. The time taken to read cell values for an Excel document containing data for 100,000 rows and 200 columns is reduced from 22 seconds to 16 seconds.

Import XML maps

The Syncfusion Excel Library now supports adding XML maps to Excel documents. This feature allows users to select and map the fields to the worksheet range.

Import XML maps in Blazor.

File Manager

Pagination

The pagination feature in the File Manager component enhances application performance by initially loading only the necessary files and folders for the visible layout. Additional items are dynamically loaded as you navigate through the pages. You can explore a demo of this feature here.

Blazor File Manager with pagination

Range selection

The File Manager now allows users to select a range of files or folders by dragging the mouse pointer over them, just like in the Windows File Explorer. You can explore a demo of this feature here.

Blazor File Manager range selection

Gantt Chart

PDF export

Users can export Gantt Chart data to PDF files to generate printable reports or share data in a standardized format.

PDF export in Blazor Gantt Chart.

Touch support for zooming

Users can now easily zoom in and zoom out by pinching directly on the chart pane. This intuitive touch gesture makes it more convenient to navigate through Gantt Charts on touch-enabled devices, providing a seamless and user-friendly experience.

Touch support for zooming Blazor Gantt Chart.

Image Editor

Redact support

Redact support allows users to conceal sensitive information by applying blur or pixel effects to specific areas of an image. This feature is particularly valuable for protecting privacy and complying with data protection regulations, making it easier to securely share images without compromising sensitive information.

Blazor Image Editor redact support.

Text annotation enhancement

The enhanced text-annotation feature in the Image Editor allows users to customize their annotations with fill color, outline color, and outline width. Ideal for making text stand out and improving readability, this tool ensures that your annotations are both clear and visually appealing in any image.

Blazor Image Editor text annotation.

Rectangle annotation enhancement

The enhanced rectangle-annotation feature in the Image Editor now supports adjusting the border radius, allowing users to create annotations with rounded or sharp corners. This enhancement provides greater flexibility in customizing the look of your annotations, adding a touch of style and refinement.

Blazor Image Editor rectangle annotation.

Mention

Disable individual items

The Mention component provides options for individual items to be put in an enabled or disabled state for specific scenarios. This ensures that disabled items cannot be selected as values within the component.

Blazor Mention disabled individual items.

PDF Library

Enhancements in Arabic script rendering

This feature enables users to render Arabic text with extended characters support for specific blocks, ensuring precise representation and improved readability of Arabic script in PDF documents.

  • Extended - A
  • Extended - B
  • Extended - C
  • Presentation Forms - A
  • Presentation Forms - B

Arabic script extended block rendering.

Circular annotations with cloud border style

This feature allows users to apply a cloud border style to circular annotations in PDF documents, making it easier to emphasize key information, highlight important sections, and make annotations visually distinctive. It’s beneficial in educational materials, technical documentation, design reviews, and collaborative business documents where clear communication is essential.

Cloud border style in circular annotations.

PowerPoint Library

PowerPoint-to-PDF and image conversion enhancements

  • Color transformation for images: Recolored images are now accurately preserved in PowerPoint-to-PDF and image conversions, maintaining the visual appearance of custom-colored graphics and logos for clear branding.

Recolored images in PPTX to PDF conversion

  • Metafile image preservation: The EMF images in the PowerPoint presentations are now properly preserved during PDF or image conversion.

Rich Text Editor

Import/Export

This feature enables users to easily export content from the Rich Text Editor to PDF or Word documents, as well as import Word document content into the editor. This intuitive feature enhances document management, providing a smooth and user-friendly experience.

Blazor Rich Text Editor Import Export

Word Library

WordArt in DOCX

The .NET Word Library now preserves WordArt effects like shadows, reflections, glows, bevels, 3D rotations, and transformations in DOCX files, ensuring that decorative text retains its appearance.

WordArt in Word documents

HTML conversion enhancements

HTML-to-Word conversion

The .NET Word Library now supports HTML files that do not follow XML standards, offering greater flexibility in HTML-to-Word conversions. Users can now more effectively handle HTML files with non-standard tags or structures.

HTML to Word conversion in Word Library

RTL text preservation

RTL (right-to-left) text is accurately preserved during HTML-to-Word and Word-to-HTML conversions. Users can now convert HTML files containing the RTL text, and the text direction formatting remains consistent.

RTL in HTML conversion using Word Library

Word-to-PDF and image conversion enhancements

The Syncfusion Word Library includes the following enhancements when converting Word documents to PDF files or images:

  • Performance: Conversion of large Word documents (above 1,000 pages) with tables and hyperlinks to PDFs or images is now up to 25x faster, reducing processing time from hours to minutes.
  • RTL text preservation: RTL (right-to-left) text within track changes balloons is now accurately preserved during Word-to-PDF conversions.
  • Table rendering: Rendering of tables with “keep with next” settings on multi-column pages during Word-to-PDF and image conversions, preserves the layout as it is in the input file.
  • Metafile image preservation: The EMF images in the Word documents are now properly preserved during PDF or image conversion.
Up arrow icon