Essential Studio for Blazor Release Notes

v28.1.33

December 12, 2024

Common

Features

The Tailwind CSS theme used in all Syncfusion® Blazor Components has been upgraded to Tailwind CSS 3.4, bringing enhanced styling and features
Microsoft’s AI extensions libraries were integrated into the Syncfusion® Blazor smart components and samples.

AI AssistView

Features

#FB61683 - We have now provided support for preserving the text format when copying the response using the Copy button.

AutoComplete

Features

The Autocomplete component now includes a new Popup Resize feature, providing users with the ability to dynamically resize the popup for improved visibility and control. This functionality is activated by enabling the AllowResize property. Once enabled, users can resize the popup, and the adjusted dimensions are preserved across sessions, ensuring a consistent experience. Please find the demo link here.
The AutoComplete control now offers delay support for custom filtering, allowing you to set a delay (in milliseconds) to optimize performance. This functionality is implemented using the DebounceDelay property, which helps reduce the frequency of filtering operations as you type, resulting in a smoother user experience. Please find the demo link here.

Calendar

Features

The Calendar now supports the Hijri (Islamic) Calendar, a lunar-based system aligned with the moon’s cycles. By setting the CalendarMode property to CalendarType.Islamic, users can seamlessly interact with the Islamic calendar. The control allows users to select a date from the calendar. Additionally, it provides functionalities such as minimum and maximum date restrictions, with today’s date always highlighted and focused if no other date is selected. Explore the demo. here.

Carousel

Features

#I513228 - Provided support to enable/disable the keyboard interactions in the carousel component by using AllowKeyboardInteraction property.

Chart

Bug Fixes

#I660515 - The chart axis scrollbar now displays correctly when enabled dynamically.
#I616739 - Now, the chart DateTimeCategory axis working properly for the given interval.
#I643660 - The tooltip and crosshair in the chart now hide properly while resetting the zoomed chart.

Features

Chart now supports adaptive layout, dynamically adjusting chart elements like axis labels, titles, legends, and data labels for optimal display on different screen sizes.
The crosshair now snaps to the nearest data point, improving precision and focusing on individual data points.

Breaking Changes

Changed the default value of EdgeLabelPlacement from Hide to Shift for improved axis label visibility.
Changed the delegate type from Action to EventCallback for the events OnPointClick, OnLegendClick, and ChartMouseClick.

Chat UI `preview`

The Blazor Chat UI component is a lightweight, user-friendly conversational interface for displaying chat messages between users. It features messages with timestamps, avatar images with fallback text, typing indicators, and extensive customization options, making it ideal for building modern chat applications.

Explore the demo here

Features

Message suggestions: Provides on-demand suggestions using customizable templates to enhance user interactions.
On-demand messages loading: Dynamically loads messages to optimize performance, especially for lengthy conversations.
Header toolbar: Allows adding toolbar items in the header with options for executing custom commands.
Timebreak: Automatically inserts time breaks between messages, enhancing readability by grouping conversations by date.
Typing indicator: Shows real-time typing activity of users with customizable indicator styles.
Customization: Allows users to customize the default appearance, including messages, the footer, and more, to suit their needs.

Chip

Features

Provided template support to render any HTML elements as chip item content.

ComboBox

Features

The ComboBox component now includes a new Popup Resize feature, providing users with the ability to dynamically resize the popup for improved visibility and control. This functionality is activated by enabling the AllowResize property. Once enabled, users can resize the popup, and the adjusted dimensions are preserved across sessions, ensuring a consistent experience. Please find the demo link here.
The ComboBox control now offers delay support for custom filtering, allowing you to set a delay (in milliseconds) to optimize performance. This functionality is implemented using the DebounceDelay property, which helps reduce the frequency of filtering operations as you type, resulting in a smoother user experience. Please find the demo link here.

Bug Fixes

#I624475 - Fixed an issue where clicking the tab key did not move the focus to the next focusable element.

Feature

Animation Support - The context menu now includes the AnimationSettings feature, which allows users to customize submenu animations by controlling the duration, easing, and effects. This enhancement improves visual dynamics, ensures smooth transitions, and provides a consistent interactive experience.

Data Form

Features

The DataForm component now includes the FormName property, which allows developers to assign a specified name to the underlying EditForm.FormName. This enhancement facilitates the unique identification of forms, making it easier to process or validate forms in scenarios where multiple forms are present within an application. By setting the FormName property, each form can be distinctly recognized, streamlining form handling and validation workflows.

Data Grid

Features

Achieved UI responsiveness during the Excel Export process, enabling users to interact with the UI seamlessly. While exporting, the Excel export icon in the toolbar is disabled and re-enabled once the export is complete.

Bug Fixes

#I660894, #FB63579 - Fixed an issue where the date picker closed immediately upon choosing a date from the Menu Filter

Date Picker

Features

The DatePicker now supports the Hijri (Islamic) Calendar, a lunar-based system aligned with the moon’s cycles. By setting the CalendarMode property to CalendarType.Islamic, users can seamlessly interact with the Islamic calendar. The control allows users to select dates from a calendar or by entering a date manually. Additionally, it provides functionalities such as minimum and maximum date restrictions, with today’s date always highlighted and focused if no other date is selected. Explore the demo. here.
The DatePicker component now includes the new OpenOnFocus property, which enhances user interaction by automatically opening the date picker popup when the input field gains focus. When set to true, the popup will be displayed as soon as the user focuses on the input element, allowing for quicker and more intuitive date selection. This feature improves the user experience, reducing the need for additional clicks to open the calendar. The default value of the property is false.

Date Range Picker

Features

The DateRangePicker component now includes the new OpenOnFocus property, which enhances user interaction by automatically opening the date picker popup when the input field gains focus. When set to true, the popup will be displayed as soon as the user focuses on the input element, allowing for quicker and more intuitive date selection. This feature improves the user experience, reducing the need for additional clicks to open the calendar. The default value of the property is false.

Date Time Picker

Features

The DateTimePicker now supports the Hijri (Islamic) Calendar, a lunar-based system aligned with the moon’s cycles. By setting the CalendarMode property to CalendarType.Islamic, users can seamlessly interact with the Islamic calendar. The control allows users to select dates from a calendar or by entering a date manually. Additionally, it provides functionalities such as minimum and maximum date restrictions, with today’s date always highlighted and focused if no other date is selected. Explore the demo.here.
The DateTimePicker component now includes the new OpenOnFocus property, which enhances user interaction by automatically opening the date picker popup when the input field gains focus. When set to true, the popup will be displayed as soon as the user focuses on the input element, allowing for quicker and more intuitive date selection. This feature improves the user experience, reducing the need for additional clicks to open the calendar. The default value of the property is false.

Diagram

Bug fixes

#F195234 – The helper bounds are now accurately updated while dragging a node that has been rotated using keyboard commands.
#I656839 – Diagram element property changes are now properly reflected and handled within the SelectionChanged event.

Dialog

Bug Fixes

#I29770, #I30019 - Resolved the inconsistent resizing behavior observed with the modal dialog.

DocIO

Features

Provided support to preserve the WMF images in the Word document, during Word to PDF or image conversion.
Enhanced the multicolumn balancing algorithm in Word to PDF conversion, particularly for documents containing multicolumn layouts with section breaks.

Bug Fixes

#I656800 - Shape within the table cell is now preserved properly while converting a Word document to PDF.

Document Editor

Bug Fixes

#I649860 - Resolved the hanging issue while loading split table document in Document Editor.
#I652445 - Resolved the overlapping issue when pasting copied content in document.
#I647120 - Resolved the copy pasting and undo/redo issues with comments.
#I645890 - Resolved the content control border rendering issue when content control split multiple pages.
#I652850 - Resolved the left, home and end keys navigation issue in content control.
#I654688 - Resolved the undo issue after pasting content on Track Changes Mode.
#I648834 - Resolved the section break layout issue on exported document.
#I649050 - Resolved the script error issue when performing accept and reject action in collaborative editing mode.

Features

Template Support - The DropDownButton now supports embedding custom layouts, controls, or components, allowing for flexible integration of text, buttons, images, and icons to enhance user-friendliness.
Popup Width - The DropDownButton component now includes a PopupWidth property, allowing users to define the width of the dropdown popup. This feature offers greater design flexibility.
Animation Support - The DropDownButton component now includes the AnimationSettings feature, which allows users to customize submenu animations by controlling the duration, easing, and effects. This enhancement improves visual dynamics, ensures smooth transitions, and provides a consistent interactive experience.

Features

The DropDown List component now includes a new Popup Resize feature, providing users with the ability to dynamically resize the popup for improved visibility and control. This functionality is activated by enabling the AllowResize property. Once enabled, users can resize the popup, and the adjusted dimensions are preserved across sessions, ensuring a consistent experience. Please find the demo link here.
The DropDownList control now offers delay support for custom filtering, allowing you to set a delay (in milliseconds) to optimize performance. This functionality is implemented using the DebounceDelay property, which helps reduce the frequency of filtering operations as you type, resulting in a smoother user experience. Please find the demo link here.

Bug Fixes

#I658302 - Fixed an issue where users were unable to search using the filter input in mobile mode.

DropDownTree

Bug Fixes

#I657969 - The console error that occurs when removing the Dropdown Tree component dynamically has been resolved.

Features

#I645290 - Provided value template support to customize the display of selected values in the Dropdown Tree component.

Gantt Chart

Bug fixes

#F195221 - The issue where incorrect segment duration and end date in dialog and grid column have been resolved.
#I661094 - The issue where an exception is thrown when adding a resource multiple times in the dialog has been resolved.

Image Editor

Feature

Image Restriction Support - The Image Editor component now includes support for image restrictions through uploadSettings. Developers can specify allowed image extensions and set minimum and maximum image sizes. If an image does not meet the criteria, users will receive an alert message, ensuring improved image validation and better control over uploads.
WebP Support - The Image Editor component now supports the WEBP format, allowing users to upload and save WEBP images.

ListView

Bug Fixes

#I654801- Resolved the dynamic data source update issue with nested ListView.

Maps

Features

#I309410, #F185809 - Marker clusters can now be enabled for individual marker groups using the MapsMarkerClusterSettings tag under the MapsMarker tag. This enables you to apply customizations such as different colors, shapes, connector lines, and marker count labels to the clusters in each group.
#F186994 - The height and width of markers in a marker group can now be set individually for each marker, based on the data source values. This is achieved by specifying the field names in the HeightValuePath and WidthValuePath properties within the MapsMarker tag.

Features

Animation Support - The Menu Component now includes the AnimationSettings feature, which allows users to customize submenu animations by controlling the duration, easing, and effects. This enhancement improves visual dynamics, ensures smooth transitions, and provides a consistent interactive experience.

Multicolumn ComboBox

Features

The MultiColumn ComboBox now includes a TextWrap feature, which can be enabled by setting the EnableTextWrap property to true. This allows the text to wrap within the dropdown list, enhancing readability. Additionally, you can customize how the text is displayed by configuring the TextWrapElement and TextOverflowMode enums. These options provide control over text wrapping behavior and the handling of overflow content, ensuring the content aligns with your preferences. Please find the demo link here.

Key features

TextWrapElement: This is an enum(Header,Content ,Both) Defines the element where text wrapping is applied.
TextOverflowMode:This is an enum(Ellipsis ,EllipsisWithTooltip) Defines truncates the cell content when it overflows its area.

MultiSelect

Features

The MultiSelect DropDown component now includes a new Popup Resize feature, providing users with the ability to dynamically resize the popup for improved visibility and control. This functionality is activated by enabling the AllowResize property. Once enabled, users can resize the popup, and the adjusted dimensions are preserved across sessions, ensuring a consistent experience. Please find the demo link here.
The MultiSelect Dropdown control now offers delay support for custom filtering, allowing you to set a delay (in milliseconds) to optimize performance. This functionality is implemented using the DebounceDelay property, which helps reduce the frequency of filtering operations as you type, resulting in a smoother user experience. Please find the demo link here.

NumericTextBox

Bug Fixes

#919216 - The issue with the numeric textbox not accepting a negative sign has been resolved.

PDF

Features

F194287 - Added support to include the signed date in the signature within the PDF document.
I612814 - Added support to flatten specified annotation types in the PDF document.
I610124 - Added support for setting text alignment in the PdfLoadedCombobox field within the PDF document.
I576424 - Added support for exporting newly added annotations in the PDF.
I619036 - Added support for calculating the size of dynamic HTML content during HTML to PDF conversion.
I556787 - Added support for automatic scaling of viewport size in the HTML converter.
I605939 - Added support for automatically waiting to render external fonts during HTML to PDF conversion.

Bug Fixes

I661319 - Fixed the issue where bounds were not retrieved properly while extracting text.
I652150 - Fixed an issue where a preservation issue occurred while flattening the textbox field.
I650628 - Fixed a preservation issue that occurred while drawing templates on the PDF.
I649774 - Fixed an issue where text preservation was compromised when creating a template from a PDF document.
I652775 - Fixed the issue where the new line character was not proper while importing form fields in JSON format.
I652751 - Resolved the issue where border width was not properly returned for a textbox field.
I526704 - Resolved the native AOT warning that occurred in compression and PDF.
I653965 - Fixed the issue where a preservation problem occurred while parsing an empty style tag.

Breaking Changes

The PdfExportAnnotationCollection API now supports both PdfLoadedAnnotation and PdfAnnotation objects with the updated Add method. Additionally, the Indexer now returns a PdfAnnotation object instead of a PdfLoadedAnnotation object.

PDF Viewer

Bug Fixes

#I646495 - The issue with the author name and stamp being incorrectly updated in the PDF Viewer has been resolved.
#I651393 - The issue where scrolling was not working with the mouse wheel after programmatically zooming using the ZoomInAsync and ZoomOutAsync APIs in a single-page PDF has been resolved.

Pivot Table

Bug fixes

#I660420 - The Pivot Table now retains its height when switching between chart view and table view using the toolbar option.
#FB63568 - Resolved an issue where the Field List’s aggregation option menu was rendered behind the Field List dialog.

Presentation

Features

Provided support to preserve the WMF images in the PowerPoint presentation, during PowerPoint to PDF or image conversion.

Bug Fixes

#I659561, #I660097, #I660582 - Picture within the group shape is now replaced properly.

Ribbon `preview`

The Blazor Ribbon component provides a structured and easy-to-use interface for users to access different features and functions, improving the overall user experience and making your application more efficient.

Explore the demo here

Features

Built-in items: Several built-in support items, such as buttons, checkboxes, dropdown buttons, split buttons, combo boxes, and color pickers can be customized and used to execute specific actions.
Modes: The classic mode organizes items and groups in a traditional form and the simplified mode organizes items and groups into a single row for improved usability and reduced clutter.
Tooltips: Provide additional information when a user hovers over a ribbon item, improving user experience.
File and Backstage menu: Provides a traditional file menu for common actions like opening, saving, and exporting, along with a customizable backstage view for advanced options such as detailed settings and additional properties.
Templates: Customize ribbon items and the help pane content using templates.

Rich Text Editor

Bug Fixes

#I659063 - Now, the empty <textarea> element is inserted correctly using the ExecuteCommandAsync method in the Rich Text Editor.
#I634399 - Now, a single link will be created when inserting with two nodes in the Rich Text Editor.
#I655907 - Now, the URL is displayed correctly when parentheses are entered immediately after typing the URL in the Rich Text Editor.

Sankey `preview`

Blazor Sankey is a dynamic data visualization component that illustrates the flow and relationships between different entities. Typically used in scenarios involving energy, material, or cost flows, a sankey uses nodes to represent entities and links to depict the flow between them. The width of each link is proportional to the flow quantity, making it easy to visualize the magnitude of relationships within a system.

Explore the demo here

Features

Nodes: These are essential pillars of your flow, capturing key stages and dynamic entities.
Links: Visualize connections with precision; their thickness reflects the flow’s strength.
Labels: Illuminate your diagram with descriptive text, making complex relationships crystal clear.
Titles: Capture the essence at a glance, with labels to tell your data’s story.
User interaction: Supports interactive features, including tooltips and legend highlights, enhancing user engagement by providing dynamic insights and easy identification of data elements.
Legends: Customizable legends offer additional information about nodes, allowing users to tailor the display for clarity.
Responsive design: Supports an adaptive layout that ensures clarity and usability across different screen sizes and orientations for a seamless user experience.
Mode support: Flexible with horizontal and vertical layout options, allowing users to choose the best orientation for their data presentation.

Print and export: Facilitates easy printing and exporting of the sankey, making it convenient to share and distribute visual insights across various platforms.

RAZOR
<SfSankey Width="600px" Height="400px" Nodes=@Nodes Links=@Links Title="Device Usage" SubTitle="-2024">
    <SankeyNodeSettings Width="30" Color="#24478f"></SankeyNodeSettings>
    <SankeyLinkSettings ColorType="SankeyColorType.Source"></SankeyLinkSettings>
    <SankeyLabelSettings Visible="true" FontSize="12px" Color="black" FontFamily="Arial" FontWeight="400"></SankeyLabelSettings>
    <SankeyLegendSettings Visible="true" Position="SankeyLegendPosition.Bottom"></SankeyLegendSettings>
</SfSankey>
@code {
  
    public List<SankeyDataNode> Nodes = new List<SankeyDataNode>();
    public List<SankeyDataLink> Links = new List<SankeyDataLink>();
  
    protected override void OnInitialized()
    {
        base.OnInitialized();
        Nodes = new List<SankeyDataNode>()
        {
            new SankeyDataNode() { Id = "Female", Label = new SankeyDataLabel() { Text = "Female (58%)" } },
            new SankeyDataNode() { Id = "Male", Label = new SankeyDataLabel() { Text = "Male (42%)" } },
            new SankeyDataNode() { Id = "Tablet", Label = new SankeyDataLabel() { Text = "Tablet (12%)" } },
            new SankeyDataNode() { Id = "Mobile", Label = new SankeyDataLabel() { Text = "Mobile (40%)" } },
            new SankeyDataNode() { Id = "Desktop", Label = new SankeyDataLabel() { Text = "Desktop (48%)" } },
            new SankeyDataNode() { Id = "< 18", Label = new SankeyDataLabel() { Text = "< 18 years (8%)" } },
            new SankeyDataNode() { Id = "18-26", Label = new SankeyDataLabel() { Text = "18-26 years (35%)" } },
            new SankeyDataNode() { Id = "27-40", Label = new SankeyDataLabel() { Text = "27-40 years (38%)" } },
            new SankeyDataNode() { Id = "> 40", Label = new SankeyDataLabel() { Text = "> 40 years (19%)" } }
        };
        Links = new List<SankeyDataLink>()
        {
            new SankeyDataLink() { SourceId = "Female", TargetId = "Tablet", Value = 12 },
            new SankeyDataLink() { SourceId = "Female", TargetId = "Mobile", Value = 14 },
            new SankeyDataLink() { SourceId = "Female", TargetId = "Desktop", Value = 32 },
            new SankeyDataLink() { SourceId = "Male", TargetId = "Mobile", Value = 26 },
            new SankeyDataLink() { SourceId = "Male", TargetId = "Desktop", Value = 16 },
            new SankeyDataLink() { SourceId = "Tablet", TargetId = "< 18", Value = 4 },
            new SankeyDataLink() { SourceId = "Tablet", TargetId = "> 40", Value = 8 },
            new SankeyDataLink() { SourceId = "Mobile", TargetId = "< 18", Value = 4 },
            new SankeyDataLink() { SourceId = "Mobile", TargetId = "18-26", Value = 24 },
            new SankeyDataLink() { SourceId = "Mobile", TargetId = "27-40", Value = 10 },
            new SankeyDataLink() { SourceId = "Mobile", TargetId = "> 40", Value = 2 },
            new SankeyDataLink() { SourceId = "Desktop", TargetId = "18-26", Value = 11 },
            new SankeyDataLink() { SourceId = "Desktop", TargetId = "27-40", Value = 28 },
            new SankeyDataLink() { SourceId = "Desktop", TargetId = "> 40", Value = 9 }
        };
    }
}

Schedule

Features

Provided support to prevent the overlapping appointments by setting AllowOverlap property as false. It prevents users from scheduling multiple appointments at the same time in the same time slot.

Bug Fixes

#F195286 - An issue where the RefreshEventsAsync method was triggering the remote API unnecessarily, even when there were no changes to the event datasource has been resolved.

Stock Chart

Feature

The crosshair now snaps to the nearest data point, improving precision and focusing on individual data points.

Tab

Features

#F153247 - Provided support to enable/disable the Tab content swiping by using the SwipeMode property.

Time Picker

Features

The TimePicker component now includes the new OpenOnFocus property, which enhances user interaction by automatically opening the date picker popup when the input field gains focus. When set to true, the popup will be displayed as soon as the user focuses on the input element, allowing for quicker and more intuitive date selection. This feature improves the user experience, reducing the need for additional clicks to open the calendar. The default value of the property is false.

Tree Grid

Bug fixes

#I653895 - Fixed an exception when using ReorderRowAsync() with a Row ID not in the current view.
#I657187 - Resolved an issue where selecting child records after filtering would incorrectly select the parent record’s tree cell.
#I655454 - Resolved an issue where using the Tab key to save a cell in Cell Edit Mode triggered the RowUpdated event.
#I610460 - Resolved issues with virtualization in single root data, specifically related to expand/collapse and virtual scroll operations.
#I620094 - Resolved an issue where records were missing when collapsing in single root data with virtualization enabled.

TreeView

Bug Fixes

#I654832 - An issue with NavigateUrl property within already selected nodes in TreeView component has been resolved.

Uploader

Bug Fixes

#I659033 - Fixed an issue where the ActionCompleteEvent was not triggered when setting ShowFileList to false.

Visual Studio Extensions

Bug Fixes

#I656241 - The issue of the ColumnLayout option being empty in the DataForm control has been resolved in the Syncfusion Blazor Code Generator.

XlsIO

Features

Provided support for preserving WMF images during an Excel to PDF and image conversions.
I649053 - Provided support for decrypting individual items with different passwords in a protected ZIP file.

Bug Fixes

I655057 - Exception no longer occurs when creating a table with the sheet name contains True or False.
I639240 - Category labels are now preserved correctly when the major data unit is set to Auto when converting an Excel to PDF.
I26423 - Pareto chart line color is now rendered properly when converting an Excel document to PDF.
Hyperlinks in the threaded comments are now preserved correctly when resaving an Excel document.
Corruption no longer occurs when the value axis in chart contains NaN values.
Threaded comment replies are now rendered properly when resaving an Excel document.
When converting an Excel file to PDF, empty chart legend area is now rendered correctly.

Breaking Changes

The IConnection.ConncetionId API is deprecated and will be removed in v30.x. We recommend using this API IConnection.ConnectionId instead.
The ExternalConnection.RefershedVersion API is deprecated and will be removed in v30.x. We recommend using this API ExternalConnection.RefreshedVersion instead.
The ExternalConnection.password API is deprecated and will be removed in v30.x. We recommend using this API ExternalConnection.Password instead.

Essential Studio for Blazor Release Notes

Common

Features

AI AssistView

Features

AutoComplete

Features

Calendar

Features

Carousel

Features

Chart

Bug Fixes

Features

Breaking Changes

Chat UI preview

Features

Chip

Features

ComboBox

Features

Bug Fixes

Context Menu

Feature

Data Form

Features

Data Grid

Features

Bug Fixes

Date Picker

Features

Date Range Picker

Features

Date Time Picker

Features

Diagram

Bug fixes

Dialog

Bug Fixes

DocIO

Features

Bug Fixes

Document Editor

Bug Fixes

DropDown Button

Features

DropDown List

Features

Bug Fixes

DropDownTree

Bug Fixes

Features

Gantt Chart

Bug fixes

Image Editor

Feature

ListView

Bug Fixes

Maps

Features

Menu

Features

Multicolumn ComboBox

Features

MultiSelect

Features

NumericTextBox

Bug Fixes

PDF

Features

Bug Fixes

Breaking Changes

PDF Viewer

Bug Fixes

Pivot Table

Bug fixes

Presentation

Features

Bug Fixes

Ribbon preview

Chat UI `preview`

Ribbon `preview`

Sankey `preview`