Essential Studio for Blazor Release Notes

v26.1.35

June 11, 2024

Common

Features

Syncfusion Blazor Components are now compatible with .NET 9 Preview.
Fluent 2 theme support added for Syncfusion Blazor components, providing a modern and visually appealing user interface.
Added the following new components in preview mode to Blazor:
- 3D Chart: A Component for showing interactive 3D charts for visualizing the data in Blazor applications.
- TextArea: An input control for capturing multi-line text input within Blazor applications.
- OTP Input: A secure input component designed for capturing one-time passwords (OTP) within Blazor applications.
The Timeline component has been developed to meet industry standards and are now marked production-ready.

3D Chart `Preview`

A 3D chart is a graphical representation of data in three dimensions, showcasing relationships and trends among variables. Unlike traditional 2D charts, 3D charts add depth to the visualization, allowing for a more engaging and comprehensive understanding of data patterns. Please find the demo link here.

Series - The 3D chart can be plotted over six chart types, including column, bar, stacking column, stacking bar, 100% stacked column, and 100% stacked bar.
Data Binding - Bind the 3D chart component with an array or list of objects or a DataManager. In addition to chart series, data labels and tooltips can also be bound to your data.
Data Labels - Support data labels to annotate points with labels to improve the readability of data.
Axis Types - Able to plot different data types such as numbers, datetime, logarithmic, and string.
Axis Features - Supports multiple axes, inverted axes, multiple panes, opposed positions, and smart labels.
Legend - Supports a legend to provide additional information about a series with customization options.
Animation - The 3D chart series will be animated when rendering and refreshing the chart widget.
User Interaction - Supports interactive features such as tooltips and data point selection.
Export - Supports printing the 3D chart directly from the browser and exporting the chart in both JPEG and PNG formats.
RTL - Provides a full-fledged right-to-left mode that aligns the axis, tooltip, legend, and data in the 3D chart component from right to left.
Appearance - Colors for the 3D charts are picked by the built-in theme, but each element of the 3D chart can be customized with simple configuration options.
Accessibility - Designed to be accessible to users with disabilities, with features such as WAI-ARIA standard compliance and keyboard navigation to ensure that the 3D chart can be effectively used with assistive technologies such as screen readers.

AutoComplete

Features

The AutoComplete provides options for individual items to be in either an enabled or disabled state for specific scenarios. Once an item is disabled, it cannot be selected as a value for the component. This is particularly useful for disabling options such as out-of-stock products or inactive account types. To configure the disabled item columns, use the ‘AutoCompleteFieldSettings.Disabled’ property. Please find the demo link here.

Breaking changes

The ItemsCount property is no longer be available in the AutoComplete component.

Calendar

Bug Fixes

#I19720 - Fixed issue where date tooltip only displayed long date format in en-US, now updated for other cultures.

Carousel

Bug fixes

#I584862 - An issue related to Accessibility Violation in Carousel when aria-hidden set to true has been fixed.

Chart

Features

#FB15473 - Chart axis title alignment customization support has been provided.
Accessibility text and keyboard navigation customization support have been provided.

ComboBox

Features

The ComboBox provides options for individual items to be in either an enabled or disabled state for specific scenarios. Once an item is disabled, it cannot be selected as a value for the component. This is particularly useful for disabling options such as out-of-stock products or inactive account types. To configure the disabled item columns, use the ‘ComboBoxFieldSettings.Disabled’ property. Please find the demo link here.

Breaking changes

The ItemsCount property is no longer be available in the ComboBox component.

Bug fixes

#F188134 - Fixed an issue where enabling virtualization and binding a custom adapter caused data to not load properly in the combobox popup.

Data Grid

Bug Fixes

#I590270 - Resolved the issue where “persistence is not working when binding multiple empty Field names and empty HeaderText in the columns.”
#FB58065 - Resolved the issue where “Error throws in console when scrolling while the EnableCache property is enabled with initial grouping in DataGrid.”
#I591266 - Resolved the issue where “GetSelectedRecords method returns an incorrect number of counts after filtering, when using the checkbox selection in Grid.”
#F188430, #I587783 - Resolved the issue where “filtering doesn’t work as expected while binding complex data types in nested fields on Grid.”

Features

The Grid now includes a “show add new row” feature during inline editing. This feature ensures that a blank row is constantly visible within the grid content, facilitating the easy insertion of new records. Explore the demo here.

DataGrid now provides support to retrieve the value of a cell in the current view, based on row and column indices.

RAZOR
<SfGrid @ref="grid" DataSource="@Orders">
 ........
</SfGrid>
@code
{
    SfGrid<Order> grid;        
    private async Task GetCellValue()        
    {        
        await grid.GetCellValueByIndexAsync(2,3);    
    }      
}

#FB13140 - Provided the support to perform row drag and drop both within the grid and between the grids, when frozen columns are used in the DataGrid.

Enhanced the aggregate functionality with SQL data binding by preventing multiple SQL DB posts while performing aggregate functionality.

Previous Code
New Code

Microsoft. EntityFrameworkCore. Database. Command: 
SELECT T0P(@__p_0) [i].[Id], [i] • [Name] 
FROM [Items] AS [i] 
Microsoft. EntityFrameworkCore. Database . Command: 
SELECT T0P(@__p_0) [i].[Id], [i] • [Name] 
FROM [Items] AS [i] 
Microsoft. EntityFrameworkCore. Database . Command: 
SELECT T0P(@__p_0) [i].[Id], [i] • [Name] 
FROM [Items] AS [i] 
Microsoft. EntityFrameworkCore. Database . Command: 
SELECT T0P(@__p_0) [i].[Id], [i] • [Name] 
FROM [Items] AS [i]

Microsoft. EntityFrameworkCore. Database. Command: 
SELECT T0P(@__p_0) [i].[Id], [i] • [Name] 
FROM [Items] AS [i] 
Microsoft. EntityFrameworkCore. Database . Command: 
SELECT T0P(@__p_0) [i].[Id], [i] • [Name] 
FROM [Items] AS [i]

The ODataV4 functionality has been enhanced, enabling you to invoke custom URLs for data fetching and CRUD actions.
#FB47857 - Enhanced context menu functionality when clicking on the empty space within grid content. This enhancement enables users to export the grid in a simpler and more convenient way.

Breaking Changes

In the CellSaved event, the argument class name has been changed from CellSaveArgs to CellSavedArgs. The cancel property has been removed from the above class since it is not possible after the save action.

Previous Code
New Code
<SfGrid DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })">
<GridEvents CellSaved="CellSaveHandler" TValue="Order"></GridEvents>
<GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Batch"></GridEditSettings>
</SfGrid>
@code 
{
	public void CellSaveHandler(CellSaveArgs<Order> args)
	{
		// Customize your code here..
	}
}
<SfGrid DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })">
<GridEvents CellSaved="CellSaveHandler" TValue="Order"></GridEvents>
<GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Batch"></GridEditSettings>
</SfGrid>
@code 
{
	public void CellSaveHandler(CellSavedArgs<Order> args)
	{
		// Customize your code here..
	}
}

Diagram

Features

#I284707 - Enhanced the dynamic updating of connector routes by evaluating all possible geometrical paths for a connector, aiming to find the one with the minimal bends and the shortest length. This improved routing provides a more optimized path with the fewest bends and the shortest possible length, even if the path gets closer to obstacles. To enable this feature, set the Routing enum value to the Constraints property for both the SfDiagramComponent and Connector class. Additionally, set the RoutingType property of LineRoutingSettings class to Advanced. You can check out the documentation link here.
#FB38303 - Added ruler support in the diagram control which provides horizontal and vertical guides for precise measuring in the Diagram control. The ruler ensures accuracy when placing, sizing, and aligning shapes and objects within a diagram. The RulerSettings property of SfDiagramComponent is used to control the visibility and appearance of the ruler in the diagram. The HorizontalRuler and VerticalRuler properties of RulerSettings are used to define and customize the horizontal ruler and vertical ruler in the diagram canvas. Explore the demo here.
Added support for rendering large diagrams with annotations, paths, text, images, and SVG shapes without exceeding the maximum size limit for a single incoming hub message (MaximumReceiveMessageSize of 32KB). This is accomplished by setting the EnableChunkMessages property of the SfDiagramComponent to true. You can check out the documentation link here.
Introduced the ability to split a connector between two nodes when a new node is dropped onto an existing connector. This creates new connections between the dropped node and the existing nodes. Enable this feature by setting the EnableConnectorSplitting property of the SfDiagramComponent to true. You can check out the documentation link here.
Enabled symbol search functionality in the symbol palette. Users can enter a symbol’s ID or search keywords into a text box and click Search. The search results match the ID or SearchTags property with the entered search string. The ShowSearchTextBox property of the palette controls the visibility of the search text box. Explore the demo here.
Added the option to enable or disable animation when expanding or collapsing the symbol palette. You can check out the documentation link here

Bug fixes

#I563914 - Print and export functionality now works properly in the Firefox browser.
#I561478 - Connections now update properly when drawing the freehand connector on a node.
#I563947 - Freehand connectors update properly when dragging with multiple selections.
#I563943 - Nodes are dropped in the correct position when dragging a shape from the palette, scrolling, and then dropping the shape.
#I560100 - Provided highlighting support for selecting an element in the symbol palette.
#FB54758 - Rendering now works properly when grouping nested groups with SVG nodes.

Breaking Changes

The following DiagramTooltip class properties was marked as obsolete from 2024 Volume 2 release.

DiagramTooltip	Comments
Template	This property is deprecated. Use TooltipTemplate property in DiagramTemplate instead.

DocIO

Features

#I405426 - Added API to extract LaTeX code of mathematical equations in Word documents and allow modification of the equation using LaTeX code.
#I552185 - Provided support to preserve error bars in charts during Word to PDF and image conversions.

Features

The DropDownList provides options for individual items to be in either an enabled or disabled state for specific scenarios. Once an item is disabled, it cannot be selected as a value for the component. This is particularly useful for disabling options such as out-of-stock products or inactive account types. To configure the disabled item columns, use the ‘DropDownListFieldSettings.Disabled’ property. Please find the demo link here.

Breaking changes

The ItemsCount property is no longer be available in the Dropdownlist component.

File Manager

Bug Fixes

#F188465 - Resolved the console error while performing upload action in the File Manager component.

Gantt Chart

Bug fixes

#I581547, #FB54073 - Fixed selection issue in Overview demo sample of sample browser.

Features

The Resource Allocation feature has been enhanced with simplified data binding support and improved resource assignment management.
Introduced row hover selection support in the Gantt chart. By enabling EnableRowHover property enhance the visual experience and make it easier to identify the row currently under the cursor. Find the demo link here.
Enhanced the exceptional handling with the OnActionFailure event to notify developers of incorrect Gantt configurations on the application end. This event now covers more cases providing better feedback and diagnostics to quickly identify and resolve configuration errors.
The table below provides information on newly added events to the Gantt Chart.

Events	Arguments	Description
CellSaved	ColumnName, Column, IsForeignKey, PreviousValue, RowData, Data, Value, CellInfo	Gets or sets the event callback that is raised when a cell is saved in the Gantt Chart, and the event argument provides details about the cell to be saved.
IndentationChanging	Cancel, Data, Index, Level, IsIndent	Gets or sets the event callback that is raised before an indent or outdent action is performed, and the event argument provides details about the indent or outdent action being performed in the Gantt Chart.
IndentationChanged	Data, Index, Level, IsIndent	Gets or sets the event callback that is raised after an indent or outdent action is performed and provides details about the indent or outdent action performed in the Gantt Chart.

Image Editor

Features

Annotation enhancement - The latest update to our Image Editor significantly improves the annotation feature. Users can now draw multiple annotations simultaneously, enhancing creative flexibility. Furthermore, every action, including customizations, will be tracked in the undo/redo collection, ensuring a seamless user experience and making it easier to experiment with different designs. Explore the demo here.
Z-order support - We are excited to introduce z-order support in the Image Editor. It’s a powerful tool that allows users to adjust the positioning of annotations. This feature is particularly useful for designing personalized templates like greeting cards or posters, where managing the layering of multiple annotations is crucial for a polished final product. Explore the demo here.
- Types of z-order adjustments:
  - Sent Backward: Switch the selected annotation with the annotation one layer behind it.
  - Send to Back: Move the selected annotation to behind all other annotations.
  - Bring to Front: Move the selected annotation to ahead of all other annotations.
  - Bring forward: Switch the selected annotation with the annotation one layer ahead of it.
Save support enhancement - Users can now save an image with a specified file name, file type, and image quality. This enhancement provides more control over the output, ensuring that users can save their work exactly as they need it. Explore the demo here.

MultiSelect

Features

#I581360 - Provided virtualization support for the MultiSelect Dropdown component, it allows users to navigate large lists of options efficiently without the need to load all the items at once. Virtualization can be used with filtering, grouping, custom values and checkbox mode features. This feature can be enabled by setting the EnableVirtualization property to true. You can check out the demo link here.
The MultiSelect provides options for individual items to be in either an enabled or disabled state for specific scenarios. Once an item is disabled, it cannot be selected as a value for the component. This is particularly useful for disabling options such as out-of-stock products or inactive account types. To configure the disabled item columns, use the ‘MultiSelectFieldSettings.Disabled’ property. Please find the demo link here.

Breaking changes

The ItemsCount property has been deprecated and will no longer be used.

Bug Fixes

#I578563 - The issue with the ValueRemoved event not triggering properly has been resolved.

OTP Input `Preview`

The Blazor OTP input is a form component that is used to input one-time passwords (OTP) during multi-factor authentication processes. It provides extensive customization options, allowing users to change input types, placeholders, separators, and more to suit their specific needs.

Explore the demo here

Key features

Input types: Allow specifying the input type as text, number, or password for the OTP input.
Styling modes: Offer built-in styling options such as underline, outline, or fill.
Placeholders: Allow setting a hint character for each input field, indicating the expected value.
Separators: Specify a character to be placed between the input fields.
Customization: Allows customizing the default appearance, including input field styling, input length and more.

PDF

Features

#I527700 - Provided support for measuring titling space while measuring text in a PDF document.
#I542030 - Provided support to measure and render text using TrueType font with floating-point data type.
#I533478 - Provided support for duplicating pages from the existing PDF document.
#I539652 - Provide support to get the text color in a PDF document when extracting text.
#I477716 - Provide support for merging PDF documents without losing accessibility tags.

Bug Fixes

#I586084 - Fixed the issue where text wasn’t preserved correctly when filling in a rotated textbox field.
#I588596 - Fixed the preservation issue after redacting certain PDF documents.

PDF Viewer

Features

#I573962 - Provided support for adding multiline comments to annotations in the Blazor PDF Viewer
#I475694 - Implemented support for displaying the appearance of rubber stamps in the Blazor PDF Viewer.
#I559235 - Added the ability to customize date and time format within the PDF Viewer.

Bug Fixes

#I565544 - Fixed the issue where tooltips in the Comment Panel were not updating correctly.
#I567821 - Text markup annotations are now added and displayed properly after downloading the document.
#I573342 - Resolved the issue where double-clicking a locked sticky note annotation unlocks it.
#I573964 - Fixed the issue where the “No Text Found” message would not appear when searching for the same unknown text twice on a mobile device.
#I573777 - Resolved the issue where adding a new sticky note annotation with the lock property enabled would cause an existing sticky note annotation to disappear.
#I574755 - The undo function now works properly when adding comments.
#I575534 - Improved the performance of.NET8 in WASM environment mode.
#I573963 - Resolved the issue with rotating stamp annotations.
#I578362 - Underline and strikethrough annotations are now positioned correctly.
#I577709 - The search arrow button is now centered in dark themes.
#I578329 - Image-based annotations are now rendered properly.
#I578350 , #I578354 , #I583842 - The issue causing SetAnnotationModeAsync to throw an exception when mode is None has been resolved.
#I585663 - The AddAnnotationAsync method is now working properly.
#I586700 - Reply comments now display the correct author values.
#I586028 - The AnnotationAdded event now triggers properly.
#I583441 - Resolved an issue with the comment panel UI in tablet mode.
#I589228 - The GetDocumentAsync method now returns values correctly.
#I579990 - The bookmark icon is no longer displayed as enabled when loading a non-bookmarked PDF document.

Pivot Table

Features

Added value sorting support to the OLAP cube connected pivot table, which allows to sort individual measures and their aggregated values in both ascending and descending order using code-behind or UI actions at runtime. Check out the demo here.

Presentation

Features

#I497945 - Provided an API to access end paragraph font properties in the PowerPoint.
#I552185 - Provided support to preserve error bars in charts during PowerPoint to PDF and image conversions.
Added support to preserve highlight colors while converting PowerPoint to PDF and image.

Query Builder

Features

Drag-and-drop support - The Query Builder component now features a drag-and-drop capability through the AllowDragAndDrop property, enabling users to easily reposition rules or groups within the component. This enhancement offers a more intuitive and flexible way to construct and modify queries. Explore the demo here.
Separate connector support - The separate connector feature in the Query Builder component enables users to integrate standalone connectors between rules or groups within the same group by using the EnableIndividualConditions property. This allows for greater flexibility, as users can connect rules or groups using different connectors, enhancing the complexity and precision of query construction. Explore the demo here.

Rich Text Editor

Features

Table row and column selection: Improved the selection of table rows and columns using the mouse or keyboard with Shift + arrow keys, setting the background color of the selected cells. Additionally, enabled table selection when pressing the backspace key after the table and the delete key before the table.
Default Item in Font Family and Font Size: Introducing default options for font family and font size. When no font family or font size is set for the selected text, it will be manually set to the default values.
#I445348 - Introducing the Quick Format Toolbar for text support, enhancing your editing experience with convenient formatting options when selecting text in the editor.
#I525279 - Added support for text formatting in selected table cells, allowing users to apply headings, paragraphs, lists, and inline formats such as bold, italic, and strikethrough to multiple cells at once. Enhanced backspace functionality for clearing selected table cell content.

Bug fixes

#I589793 - Now, the text is wrapped in a proper element when pressing the enter key when BR is configured as enterKey in the Rich Text Editor.
#I590815 - The insert image dialog box appears in the center of the screen when using Rich Text Editor.
#I593245 - Now, typing and pressing the Enter key quickly will insert the text properly.
#I594186 - Now, the image resize elements will be removed properly from the Rich Text Editor Value property.

Breaking Changes

The formats dropdown in the Rich Text Editor toolbar no longer includes the quotation option. Instead, a new blockquote icon has been introduced in the toolbar’s default mode to facilitate applying blockquote. Additionally, the quotation can be added to the formats dropdown using the Items property in the RichTextEditorFormats.
Restructured the DOM element to enable flexible height for the editor area and toolbar by setting display: flex; on the first child of the Editor root element.

Old Element structure

    <div id="editor" class="e-control e-richtexteditor">
        <textarea name="editor" id="editor-value"></textarea>
        <div class="e-toolbar-container">
            <div class="e-rte-toolbar e-toolbar"></div>
        </div>
        <div class="e-rte-content">
            <span class="e-rte-placeholder"></span>
            <div class="e-content"></div>
            <textarea class="e-rte-srctextarea"></textarea>
        </div>
        <span class="e-rte-character-count"></span>
    </div>

New Element structure

    <div id="editor" class="e-control e-richtexteditor">
        <div class="e-rte-container">           <!-- display: flex;-->
            <textarea name="editor" id="editor-value"></textarea>
            <div class="e-toolbar-container">
                <div class="e-rte-toolbar e-toolbar"></div>
            </div>
            <div class="e-rte-content">         <!-- flex-grow: 1;-->
                <span class="e-rte-placeholder"></span>
                <div class="e-content"></div>
            </div>
            <div class="e-source-content">
                <textarea class="e-rte-srctextarea"></textarea>
            </div>
            <span class="e-rte-character-count"></span>
        </div>
    </div>

Schedule

Bug fixes

An issue related to DateHeaderTemplate breaks scheduler resources when scrolling on TimelineMonth view has been fixed.

Speed Dial

Features

#I576773 - Now we have provided support for custom positioning of the Speed Dial component.

TextArea `Preview`

The TextArea is a fundamental input element in web development that allows users to input multiple lines of text within a specific area, such as comments, messages, composing detailed notes, or other content. This control is an enhanced version of the HTML text area element with additional features.

Features

Resizable: The TextArea can be resized vertically, horizontally, or in both directions by selecting the corresponding ‘ResizeMode’ option. Please find the demo link here.
Row-Column configurations: Configure the size and appearance of the textarea element in terms of ‘RowCount’ and ‘ColumnCount’ to suit specific design and functionality requirements. Please find the demo link here.
FloatingLabel: The TextArea intelligently floats the placeholder text based on the specified ‘FloatLabelType’ option, providing users with clear guidance and enhancing usability. Please find the demo link here.

Bug Fixes

#I596077 - The issue where the tooltip displayed a null value rather than an empty string has been resolved in Blazor Tooltip component.

Tree Grid

Features

#I556647 - Improved overall performance for the single root parent node with virtualization.
#I369339, #I577424 - Improved the performance of expand/collapse action when using remote data binding.
Improved support for the OnActionFailure event to better handle exceptions and provide detailed error information.
Introduced new events for indent and outdent actions within the Tree Grid. These events provide enhanced control and flexibility, allowing for more tailored interactions.
Below, you will find the corresponding event details.

Event Information

Event Name	Properties	Description
IndentationChanging	Data, Index, Value, IsIndent, cancel	An event arises when an indent/outdent action is initiated.
IndentationChanged	Data, Index, Value, IsIndent	An event arises when an indent/outdent action is completed.

Breaking changes

Updated the event argument type for the CellSaved event from CellSaveArgs to CellSavedArgs.

Previous Code
New Code
<SfTreeGrid>
    <TreeGridEvents CellSaved="CellSavedHandler" TValue="BusinessObject"></TreeGridEvents>
  </SfTreeGrid>
  @code {
    public void CellSavedHandler(CellSaveArgs<BusinessObject> args)
    {
    }
  }
<SfTreeGrid>
    <TreeGridEvents CellSaved="CellSavedHandler" TValue="BusinessObject"></TreeGridEvents>
  </SfTreeGrid>
  @code {
     public void CellSavedHandler(CellSavedArgs<BusinessObject> args)
     {
     }
  }

TreeView

Features

-#FB14051- The Blazor TreeView component now supports UI Virtualization to optimize performance when dealing with large data sets. This will render only nodes based on the TreeView height and swaps the nodes when user scrolls avoiding rendering of off-screen items.To enable this feature set required Height property for TreeView and set the value of EnableVirtualization as true.

#FB58117 - Optimized the initial rendering and check action performance of TreeView in WebAssembly.

Bug Fixes

#I593355 - The issue where the node is being selected while scrolling the nodes on a mobile device has been resolved.

Uploader

Features

Added support for catching the returned response body in the uploader component from the success event. You can check out the documentation link here.
Added the ResponseText property in the SuccessEventArgs.Response to retrieve the response text in the success event.

XlsIO

Features

#F40969 - Provided support for the “Show values row” option in pivot table creation and Excel to PDF conversion.
#I557286 - Provided support for gradient fill style in conditional formatting when creating a Excel document and Excel to PDF conversion.
#F48155 - Provided support for refreshing query table with external connection in .NET Core using events.
#F2640 - Provided support for rendering error bars in chart to image conversion.

Bug Fixes

#I588280 - Exception is no longer thrown when applying a formula that contains the ‘@’ character.

Essential Studio for Blazor Release Notes

Common

Features

3D Chart Preview

AutoComplete

Features

Breaking changes

Calendar

Bug Fixes

Carousel

Bug fixes

Chart

Features

ComboBox

Features

Breaking changes

Bug fixes

Data Grid

Bug Fixes

Features

Breaking Changes

Diagram

Features

Bug fixes

Breaking Changes

DocIO

Features

DropDown List

Features

Breaking changes

File Manager

Bug Fixes

Gantt Chart

Bug fixes

Features

Image Editor

Features

MultiSelect

Features

Breaking changes

Bug Fixes

OTP Input Preview

PDF

Features

Bug Fixes

PDF Viewer

Features

Bug Fixes

Pivot Table

Features

Presentation

Features

Query Builder

Features

Rich Text Editor

Features

Bug fixes

Breaking Changes

Schedule

Bug fixes

Speed Dial

Features

TextArea Preview

Features

Tooltip

Bug Fixes

Tree Grid

Features

Breaking changes

TreeView

Features

Bug Fixes

Uploader

Features

XlsIO

Features

Bug Fixes

3D Chart `Preview`

OTP Input `Preview`

TextArea `Preview`