Essential Studio for Blazor Release Notes

v24.1.41
December 18, 2023

Common

Features

  • The Syncfusion Blazor components are fully support with .NET 8 version from 2023 Volume 3 Service pack release. Now, the Blazor Web App sample browser have been shipped along with existing .NET 6 sample browser.

  • Added the following new components in preview mode to Blazor:
  • Data Form
  • Dropdown Tree

  • Stepper

  • The Image Editor component have been developed to meet industry standards and are now marked production-ready.

  • The Blazor Playground enhanced flexibility with individual NuGet support for Syncfusion Blazor components. This allows you to include only the components you need.

  • The Blazor Playground App added default code snippet support to make it easier to get started with Syncfusion Blazor components.

  • Introducing the new Blazor Hotel Booking App, a showcase web application that allows you to room details. Check out the demo link and GitHub source here.

  • Introducing the new Blazor Stock Market Dashboard App, a showcase web application that allows you to present dynamic stock prices for various stocks. This app provides comprehensive details, including key statistics, overall performance, and technical information. Check out the demo link and GitHub source here.

Accumulation Chart

Feature

  • #I354250, #F173672- Provided support for exporting accumulation chart data to Excel in a table format.
<SfButton OnClick="ExcelExport">Excel Export</SfButton>

<SfAccumulationChart @ref="ChartObj">
    <AccumulationChartSeriesCollection>
        <AccumulationChartSeries DataSource="@ChartData" XName="XValue" YName="YValue" Type="AccumulationType.Pie">
        </AccumulationChartSeries>
    </AccumulationChartSeriesCollection>
</SfAccumulationChart>

@code
{
    SfAccumulationChart ChartObj;
    public class ChartDataDetails
    {
        public string XValue { get; set; }
        public double YValue { get; set; }
    }
    public List<ChartDataDetails> ChartData { get; set; } = new List<ChartDataDetails>
    {
        new ChartDataDetails { XValue = "Jan", YValue = 42 },
        new ChartDataDetails { XValue = "Feb", YValue = 44 },
        new ChartDataDetails { XValue = "Mar", YValue = 53 },
        // More data
    };
    async Task ExcelExport()
    {
        await ChartObj.ExportAsync(ExportType.XLSX, "AccumulationChartData");
    }
}

AutoComplete

Bug fixes

  • #527236 - The issue with “Autocomplete OnClose event was not being triggered” has been resolved.

BarcodeGenerator

Bug fix

  • #I500985 - Now, the null reference exception will no longer be thrown when the QRCodeText is set as null.

Chart

Bug Fixes

  • #F185615 - Chart series tooltip is now working when trendline is enabled.

Features

  • #I353855, #I527624 - Provided support for synchronizing tooltips, zooming and panning, cross-hairs, highlights, and selection features across numerous charts.
<SfButton OnClick="ShowTooltip">ShowTooltip</SfButton>
<SfButton OnClick="HideTooltip">Hide Tooltip</SfButton>

<SfChart @ref="Chart">
 ...
 </SfChart>

@code
{
     public SfChart Chart;

     // Other Chart configurations

     void ShowTooltip()
     {
         Chart.ShowTooltip("Gold", 40);
     }
     void HideTooltip()
     {
         Chart.HideTooltip();
     }
}
  • #I354250, #F173672 - Provided support for exporting chart data to Excel in a table format.
<SfButton OnClick="ExcelExport">Excel Export</SfButton>

<SfChart @ref="ChartObj">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
    <ChartSeriesCollection>
        <ChartSeries DataSource="@ChartData" XName="XValue" YName="YValue" Type="ChartSeriesType.Column">
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code
{
    SfChart ChartObj;
    public class ChartDataDetails
    {
        public string XValue { get; set; }
        public double YValue { get; set; }
    }
    public List<ChartDataDetails> ChartData { get; set; } = new List<ChartDataDetails>
    {
        new ChartDataDetails { XValue = "Jan", YValue = 42 },
        new ChartDataDetails { XValue = "Feb", YValue = 44 },
        new ChartDataDetails { XValue = "Mar", YValue = 53 },
        // More data
    };
    async Task ExcelExport()
    {
        await ChartObj.ExportAsync(ExportType.XLSX, "ChartData");
    }
}

  • #I450433 - Provided support to get the X-axis and Y-axis values as arguments in the chart mouse events.

  • #F151301 - Provided support to limit the zoom level in the OnZooming event.

Circular Gauge

Features

  • Circular Gauge elements such as the axis line, ranges, pointers, and annotations can now be animated one by one to create a smooth appearance when rendered initially.

Dashboard Layout

Bug Fixes

  • #I525283 - Resolved the console error when performing window resizing in the DashboardLayout component.

DataForm Preview

The Blazor Data Form allows you to easily create various forms, such as registration, login, or any other forms. It can be automatically generated from your data model using other Blazor components. You can customize the component through various properties, use default editors or custom ones, and organize the form fields in groups and columns.Also check out the documentation here for further references.

Key features

  • Auto Generated Items - Generates appropriate editing fields corresponding to the property types specified within the Model.
  • Form Groups - Organizes editing fields into categorized sections with descriptive headings and a columnar structure.
  • Validators - Provides the option to apply various types of validators, including both built-in and custom validators.
  • Validation Display - Offers the choice for validation messages to be displayed directly inline or as tooltip.
  • Templates - Enables users to implement tailor-made editor designs to suit their unique requirements.

Data Grid

Bug Fixes

  • Resolved the issue where the screen reader did not read the sorting direction.
  • #F185218 - Resolved the issue where the autofit feature was not working properly after grouping and performing expand and collapse operations.
  • #I528539 - Resolved the issue where an exception was thrown while performing initial grouping with a virtualization enabled grid.

Features

  • Introduced a new column freezing mode known as Fixed, in addition to the existing Left, Right modes within the column settings freeze property. This Fixed mode locks columns in place, ensuring their visibility during horizontal scrolling. Explore the demo here.
  • #FB36933 - Provided support for drag selection while the grid is bound with stacked header with frozen columns.
  • #I500452 - Added functionality to support drag-and-drop of grid rows between different groups within the Grid. Explore the demo here.
  • #I510210 - Provided support to render adaptive UI layout for the column chooser and column menu features in the adaptive Grid. Explore the demo here.
  • #I492757 - The Grid export functionality has been enhanced to export the grid as a memory stream, during server-side exporting instead of initiating direct browser file downloads.
  • #I470923 - Provided range selection support for virtualization feature.

Breaking Changes

  • Revamped the frozen feature by replacing the previous three-table approach with a single table, resulting in significant performance improvements and a reduction in file size.

    <div class="e-gridheader e-frozenhdrcont" style="padding-right: 20px;">= $0
	<div class="e-headercontent" style="display: flex; border-right-width: 1px;"> flex
		<div class="e-frozenheader e-frozen-left-header">
			<table class="e-table e-sortfilter" id="sfgridqrølurwmklv_header_table" cellspacing="0.25px" role="presentation"> </table>
		</div>
   <div class="e-movableheader">
   <table class="e-table e-sortfilter" id="sfgridqrelurwmklv_header_table" cellspacing="0.25px" role="presentation">- </table>
</div>
    <div class="e-gridheader" style="padding-right: 20px;">
	<div class="e-headercontent" style="border-right-width: 1px;">= 50
		<table class="e-table e-sortfilter" id="sfgrid5fycno2ggwe_header_table" cellspacing="0.25px" role="presentation"> </table>
	</div>
</div>

  • Improved the grid accessibility over different screen readers by removing the aria-label and updating the suitable roles for each elements(th,td,tr) in the grid. Added a new attribute aria-describedby in grid header cells by including a new span element with the content to describe and with the display property as none, when the features like Grouping, Sorting, Column menu and Filter Menu are enabled in the grid.

  • Updated the aria-label attribute to title attribute for action icons like filter, column menu icons.

    <tr class="e-columnheader">
	<th class="e-headercell e-rightalign e-mousepointer  " data-uid="gridcell-199247" tabindex="0" aria-colindex="1" data-colindex="0" style="" aria-sort="none" aria-description="Press Enter to sort" rowspan="1" colspan="1">
		<div e-mappinguid="grid-column23718" class="e-headercelldiv" style="text-align:right">
			<span class="e-headertext">Order ID</span>
		</div>
		<div class="e-sortfilterdiv e-icons ">
		</div>
	</th>
</tr>
    <tr role="row" class="e-columnheader">
	<th class="e-headercell e-rightalign e-mousepointer  " data-uid="gridcell-29837" role="columnheader" aria-describedby="grid-column2221" tabindex="0" aria-colindex="1" data-colindex="0" style="" aria-sort="none" rowspan="1" colspan="1">
		<div e-mappinguid="grid-column2221" class="e-headercelldiv" style="text-align:right">
			<span class="e-headertext">Order ID</span>
		</div>
		<span id="grid-column2221" style="display:none">Press Enter to sort</span>
		<div class="e-sortfilterdiv e-icons ">
		</div>
	</th>
</tr>

Date Picker

Bug Fixes

  • #I523016 - Fixed issue where specific date was not being displayed in the datepicker popup.

Diagram

Features

  • #F178055 - Provided the radial tree layout support.

Bug fixes

  • #I497217 - Able to draw any connector type when a port constraint is set as PortConstraints.Draw.
  • #I497906 - Now, the console exception will no longer be thrown when dragging and dropping a BPMN shape node from the palette to the diagram.
  • #I498429 - Now, the connector annotation is added only once while adding annotation in the CollectionChanged event instead of twice.
  • #I499464 - Now, the null reference exception will no longer be thrown while dragging the node after loading the JSON data into a diagram.
  • #I509937 - The tooltip position is updated correctly for symbol palette items when hovering in the MAUI application.
  • #I523974 - The node position is updated properly when moving the HTML node using the arrow keys.
  • #I524364 - Now, the null reference exception will no longer be thrown when fast switching between tabs inside the diagram components.

Dialog

Bug fixes

  • #I513056 - Resolved “The width of the dialog changes after dragging and dropping it and reopening it”.

  • #I528482 - Fixed the issue where the screen reader was reading the content twice when opening the Dialog.

DocIO

Features

  • #I436843, #I464361, #F170441 - Create equation using LaTeX in a Word document using AppendMath API.
  • #I434385 - Provided an API to check comment is resolved or not in DOCX format document.
  • #I211048, #I226189, #I229312, #I256504, #I296622, #I312794, #I368129, #I391106, #I421968, #F138643 - Configure fallback fonts for Unicode text when glyphs do not exist in specified font during Word to PDF or image conversion.
  • TIFF images are preserved properly while converting Word documents to PDF.

Bug Fixes

  • #I521012 – Header is now preserved properly while converting a Word document to PDF.
  • #I507001 - Track changes revisions are now preserved properly while opening a DOCX format document.
  • #I521063 - Text in DOCX format document are now compared properly after calling Compare API.

Document Editor

Features

  • #I158324, #I231373, #F146594, #I254094, #I258260, #I277167, #I276652, #I290372, #I300092, #I323833, #F166119,#I361625, #I362312, #I394582, #I425150, #I444717, #I448820, #I458864, #I499027 - Added support for rulers and tab stop.

Bug Fixes

  • #I516207 - Resolved the issue of search text of footnote content.
  • #I513118 - Resolved the Background Color is missing in exported document issue.
  • #I517682 - Resolved the document corrupted issue on exporting as Docx.
  • #I514089 - Resolved overlapping issue while pasting.
  • #I521049 - Resolved the issue in search the font in style dropdown.
  • #I514009 - Resolved the script error when undoing pasted table.
  • #I515234 - Resolved the issue in paragraph goes to page end while press enter.
  • #I516988 - Resolved the SFDT list property is not populated issue.
  • #I515700 - Resolved script error issue while exporting the document.
  • #I514962 - Resolved the issue in selection is not updated properly while inserting text.
  • #I513117 - Resolved editing and last page delete issue.
  • #I525400 - Resolved issue in paste.
  • #I513061 - Resolved editing issues in the attached document.
  • #I526803 - Resolved the issue on paste text-only.
  • #I521204 - Resolved the accept all and reject all issue.

The Dropdown Tree component allows you to select single or multiple values from the hierarchical and self-referential data in a tree-like structure. It has several out-of-the-box features, such as data binding, check boxes, templates, accessibility, and pre-selected values. The available key features are

  • Data binding - To bind and access a hierarchical and self-referential list of items from a local or server-side data source.

  • Checkbox - To select more than one item in the Dropdown Tree component without affecting the UI appearance.

  • Multiple selection - To select more than one item in the component.

  • Mode - The following visual modes are available to visualize the selected items in the component when AllowMultiSelection or ShowCheckBox is enabled.

Type Description
Box Selected items will be visualized in chip format.
Delimiter Visualizes selected items in text content format using a delimiter.
Default When focused, the component will act in the box mode. When blurred, the component will act in the delimiter mode.

  • Filtering - Enables quick filtering of tree items based on characters entered in the search box. This feature supports both local and remote data sources.

  • Sorting - To display the Dropdown Tree items in ascending or descending order.

  • Templates - To customize the Dropdown Tree items, header, footer, action failure content, and no records content.

  • Accessibility - To provide access to all the Dropdown Tree component features through keyboard interaction, on-screen readers, and other assistive technology devices.

File Manager

Breaking Changes

Features

  • Provided support in File Manager component to download operations via HTTP client request. Now File Manager component, allowing users to perform download operations using either the default form submit method or the modern HTTP client request with a Boolean property UseFormPost in the BeforeDownloadEventargs. The default value of UseFormPost is set to true, directing the File Manager component to utilize the form submit method by default for download operations.

Bug Fixes

  • #I522670 - The refreshing issue with File Manager component navigation pane when performing drag and drop has been resolved.

  • #I505439 - Provided support to enable or disable external drag and drop support of the File Manager component. This can be now achieved by setting required selector for DropArea property within UploadSettings of the File Manager.

  • #I517288 - The error dialog popup issue related to the delete operation in the Blazor File Manager component has been resolved.

  • #FB47701 - The Exception throws when deleting files through the context menu in the File Manager component has been resolved.

  • #I521447 - The issue with image resizing option in the File Manager component has been resolved.

Gantt Chart

Bug fixes

  • #FB49126,#I529891 -The issue with “Editing tooltip template is not working properly for taskbar editing.” has been resolved.

Features

  • Improved the initial rendering performance of the Gantt Chart by up to 35% in virtualization mode. This enhancement results in a faster and more responsive loading experience for users.

  • Introduced new event support for actions performed within the Gantt Chart. These new events significantly expand your ability to tailor and enhance your interactions within the Gantt Chart, providing you with more control and flexibility. Below, you will find the corresponding event names and event argument details.

Event Information

Event Name Argument Name Properties Description
Sorting Syncfusion.Blazor.Grids.SortingEventArgs Cancel, IsCtrlKeyPressed, Action, ColumnName, Direction, SortedColumns. Gets or sets the event callback that is invoked before a sorting action is performed or a column is removed from sorting in the Gantt Chart or when the sort column direction changes from Ascending to Descending or vice versa for the same column.
Sorted Syncfusion.Blazor.Grids.SortedEventArgs Action, ColumnName, Direction, SortedColumns. Gets or sets the event callback that is raised after sorting action is performed in the Gantt Chart.
Searching Syncfusion.Blazor.Grids.SearchingEventArgs Cancel, SearchText. Gets or sets the event callback that is raised before the search action is performed in the Gantt Chart.
Searched Syncfusion.Blazor.Grids.SearchedEventArgs SearchText. Gets or sets the event callback that is raised after the search action is performed in the Gantt Chart.
RowCreating Syncfusion.Blazor.Gantt.GanttRowCreatingEventArgs Cancel, Data, Index, EditContext. Gets or sets the event callback that is raised before the add action is performed in the Gantt Chart.
RowCreated Syncfusion.Blazor.Gantt.GanttRowCreatedEventArgs Data, Index, EditContext. Gets or sets the event callback that is raised after the add action is performed in the Gantt Chart.
RowUpdating Syncfusion.Blazor.Gantt.GanttRowUpdatingEventArgs Cancel, IsShiftKeyPressed, KeyCode, Data, Index, PreviousData, PrimaryKeys, PrimaryKeyValue. Gets or sets the event callback that is raised before the save action is performed in the Gantt Chart.
RowUpdated Syncfusion.Blazor.Gantt.GanttRowUpdatedEventArgs Data, Index, PreviousData, PrimaryKeys, PrimaryKeyValue. Gets or sets the event callback that is raised after the save action is performed in the Gantt Chart.
Filtering Syncfusion.Blazor.Grids.FilteringEventArgs Cancel, PreventFilterQuery, FilterPredicates, ColumnName. Gets or sets the event callback that is raised before the filtering or clear filtering action is performed in the Gantt Chart.
Filtered Syncfusion.Blazor.Grids.FilteredEventArgs FilterPredicates, ColumnName. Gets or sets the event callback that is raised after the filtered or clear filtered action is performed in the Gantt Chart.
FilterDialogOpening Syncfusion.Blazor.Grids.FilterDialogOpeningEventArgs Cancel, ColumnName, CheckboxListData, FilterChoiceCount, FilterOperators. Gets or sets the event callback that is raised before the filter dialog is opened in the Gantt Chart.
FilterDialogOpened Syncfusion.Blazor.Grids.FilterDialogOpenedEventArgs ColumnName, CheckboxListData, FilterChoiceCount. Gets or sets the event callback that is raised after the filter dialog is opened in the Gantt Chart.
RowDeleting Syncfusion.Blazor.Gantt.GanttRowDeletingEventArgs Cancel, Datas, PrimaryKeys Gets or sets the event callback that is raised before the delete action is performed in the Gantt Chart.
RowDeleted Syncfusion.Blazor.Gantt.GanttRowDeletedEventArgs Datas, PrimaryKeys Gets or sets the event callback that is raised after the delete action is performed in the Gantt Chart.
ColumnReordering Syncfusion.Blazor.Grids.ColumnReorderingEventArgs Cancel, ReorderingColumns, ToColumn. Gets or sets the event callback that is raised when columns reordering action is performed in the Gantt Chart.
ColumnReordered Syncfusion.Blazor.Grids.ColumnReorderedEventArgs ReorderingColumns, ToColumn. Gets or sets the event callback that is raised when columns are reordered in the Gantt Chart.
GanttDialogOpening Syncfusion.Blazor.Gantt.GanttDialogOpenEventArgs Cancel, Data, IsEditAction. Gets or sets the event callback that is raised before the edit or add dialog opens.
GanttDialogOpened Syncfusion.Blazor.Gantt.GanttDialogOpenedEventArgs Action, Data. Gets or sets the event callback that is raised after the edit or add dialog opened.
Zooming Syncfusion.Blazor.Gantt.ZoomEventArgs Cancel, Action, ZoomTimelineSettings. Gets or sets an event callback that is raised before zoom action is performed.
Zoomed Syncfusion.Blazor.Gantt.ZoomedEventArgs Action, ZoomTimelineSettings. Gets the action name that triggered the zoom operation.
TaskConnectorChanging Syncfusion.Blazor.Gantt.TaskConnectorChangeEventArgs PredecessorData, SuccessorData, Cancel, IsStartPredecessor Gets or sets an event callback that is raised when beginning to connect a taskbar to another.
TaskConnectorChanged Syncfusion.Blazor.Gantt.TaskConnectorChangedEventArgs PredecessorData, SuccessorData, IsStartSuccessor, IsStartPredecessor Gets or sets the event callback that is raised when a dependency connector line is drawn between two taskbar and connection is complete.

Breaking changes

  • In DataSource model class, Start Date, End Date, BaselineStartDate, BaselineEndDate and Duration properties must be nullable type now, if the data contains null value.

    <SfGantt DataSource="@TaskCollection" >
........
</SfGantt>
@code{
    public List<TaskData> TaskCollection { get; set; }
    public class TaskData
    {
        ...
        public DateTime StartDate { get; set; }
        public DateTime BaselineStartDate { get; set; }
        public DateTime EndDate { get; set; }
        public DateTime BaselineEndDate { get; set; }
        public int Duration { get; set; }
    }
}
    <SfGantt DataSource="@TaskCollection" >
........
</SfGantt>
@code{
    public List<TaskData> TaskCollection { get; set; }
    public class TaskData
    {
        ...
        public DateTime? StartDate { get; set; }
        public DateTime? BaselineStartDate { get; set; }
        public DateTime? EndDate { get; set; }
        public DateTime? BaselineEndDate { get; set; }
        public int? Duration { get; set; }
    }
}

HeatMap

Features

  • The performance of the tooltip over the HeatMap cells is now improved.

Image Editor

Features

  • Provided support for image straightening allows users to adjust an image by rotating it clockwise or counter clockwise. The rotating degree value should be within the range of -45 to +45 degrees for accurate straightening. Positive values indicate clockwise rotation, while negative values indicate counter clockwise rotation.

  • Provided support to add additional font families for text annotation.

Breaking Changes

  • The return type of GetImageDataAsync method has been changed.
Method Previous Return Type Current Return Type
GetImageDataAsync object byte[]
  • The event argument of ShapeChanged event has been changed.
Event Previous Type Current Type
ShapeChanged ShapeChangeEventArgs ShapeChangedEventArgs

  • The parameters of the below mentioned public methods have been changed.

    Method Parameter Previous Type Current Type
    SelectAsync startX Nullable double
    SelectAsync startY Nullable double
    SelectAsync width Nullable double
    SelectAsync height Nullable double
    EnableFreehandDrawAsync value Nullable —
    DisableFreehandDrawAsync value Nullable —
    DrawEllipseAsync x Nullable double
    DrawEllipseAsync y Nullable double
    DrawEllipseAsync radiusX Nullable double
    DrawEllipseAsync radiusY Nullable double
    DrawEllipseAsync strokeWidth Nullable double
    DrawArrowAsync startX Nullable double
    DrawArrowAsync startY Nullable double
    DrawArrowAsync endX Nullable double
    DrawArrowAsync endY Nullable double
    DrawArrowAsync strokeWidth Nullable double
    DrawPathAsync strokeWidth Nullable double
    DrawLineAsync startX Nullable double
    DrawLineAsync startY Nullable double
    DrawLineAsync endX Nullable double
    DrawLineAsync endY Nullable double
    DrawLineAsync strokeWidth Nullable double
    DrawRectangleAsync x Nullable double
    DrawRectangleAsync y Nullable double
    DrawRectangleAsync width Nullable double
    DrawRectangleAsync height Nullable double
    DrawRectangleAsync strokeWidth Nullable double
    DrawTextAsync x Nullable double
    DrawTextAsync y Nullable double
    DrawTextAsync fontSize Nullable int
    DrawImageAsync x Nullable double
    DrawImageAsync y Nullable double
    DrawImageAsync width Nullable int
    DrawImageAsync height Nullable int
    DrawImageAsync isAspectRatio Nullable boolean
    DrawImageAsync degree Nullable int
    ImageResizeAsync width Nullable int
    ImageResizeAsync height Nullable int
    DrawFrameAsync inset Nullable int
    DrawFrameAsync offset Nullable int
    DrawFrameAsync borderRadius Nullable int
    DrawFrameAsync lineCount Nullable int

InPlace Editor

Bug fixes

  • #I525234 - Fixed an issue where pressing the Tab key would focus the component even when it was in a disabled state.

Kanban

Bug fixes

  • #I526720 - Now, navigating to another page on a card click in Kanban works properly.

  • #I504127 - Now, the GetColumnDataByKeys public method can be used to retrieve the data for the particular column.

Linear Gauge

Features

  • In the Linear Gauge axis, a text pointer can now be displayed to indicate the axis value. The value can also be changed by dragging and dropping the text pointer. Additionally, the text pointer can be animated.
  • Linear Gauge elements such as the axis line, ranges, and pointers can now be animated one by one to create a smooth appearance when rendered initially.

ListView

Bug Fixes

  • #I523520 - The issue with adding new item in the ListView component when enabling SortOrder property has been resolved.

Maps

Features

  • #F184014 – The performance of the navigation line with panning over the Maps component is improved to a possible extent.
  • The shapefile(*.shp) can now be rendered in the Maps by setting the remote hosted file path in the ShapeData property of MapsLayer. All the map features such as markers, bubbles, navigation lines, polygons and so on can be added over the map layer rendered with shapefile.
  • The performance of the tooltip is now improved when interactive legend is rendered.

Message

Bug Fixes

  • The issue with “the close icon focus style is displayed in the Message component” has been resolved.

MultiSelect

Bug fixes

  • #I54777 - Resolved the issue where the popup collapsed state was not being read correctly through a screen reader.

Pager

Features

  • Introduced adaptive support for the pager dropdown, dynamically rendering on mobile and tablet devices alongside the pager component. The pager message element now adjusts its rendering based on the screen size, ensuring a more responsive and user-friendly experience.

Breaking Changes

  • Removed name and aria-label attributes from the child elements of the pager container and updated the role attribute from link to button.

    <div class="e-pagercontainer" role="navigation" aria-label="Page Navigation">
	<div class="e-first e-icons e-icon-first e-firstpagedisabled e-disable " title="Go to first page" role="link" aria-label="Go to first page" tabindex="-1">
	</div>
	<div class="e-prev e-icons e-icon-prev e-prevpagedisabled e-disable " title="Go to previous page" role="link" aria-label="Go to previous page" tabindex="-1">
	</div>
	<div class="e-numericcontainer">
		<a class="e-link e-numericitem e-spacing e-currentitem e-active " role="link" tabindex="-1" aria-label="Page 1 of 6 Pages" name="Gotopage 1">1</a>
	</div>
</div>
    <div class="e-pagercontainer" role="navigation">
	<div class="e-first e-icons e-icon-first e-firstpagedisabled e-disable " title="Go to first page" role="button" tabindex="-1">
	</div>
	<div class="e-prev e-icons e-icon-prev e-prevpagedisabled e-disable " title="Go to previous page" role="button" tabindex="-1">
	</div>
	<div class="e-numericcontainer">
		<a class="e-link e-numericitem e-spacing e-currentitem e-active " tabindex="-1" title="Page 1 of 6 Pages">1</a>
	</div>
</div>

PDF

Features

  • #I477716 - Added support for splitting PDF documents without loss of WCAG standard compliance.
  • #I510759 - Added support to word wrap text content with hyphenation-special character in PDF documents.
  • Added support for removing unused resources when splitting a PDF document.
  • Added support to enhance the image quality before performing OCR on images.
  • Updated BlinkBinaries to latest stable version [117.0.5938.150].
  • HTML to PDF converter will provide more specific exception messages for the conversion failure.

Bug Fixes

  • #I525393 - The issue of incorrect extracted text bounds when extracting from a PDF document has been fixed.
  • #I525788 - The exception no longer occurs when appending the specific PDF document.
  • Fixed an issue where the issuer name details were not properly retrieved from an existing signature field.
  • #I518474 - Fixed an issue where document information was not updated properly for a specific PDF document.
  • The background color is now properly preserved when updating the transparent color in the free text annotation.
  • #I519560 - The issue of PDF images being replaced with a black box when resizing a multi-page PDF document has been resolved.
  • The NullReference exception that occurred while using the loaded document’s StructureElement for a specific document has been fixed.

PDF Viewer

Features

  • Implemented keyboard-based navigation options to enhance the user experience, enabling individuals to navigate through the PDF Viewer more efficiently.
  • Added support for annotation toolbar on mobile devices. With this feature, users now have the ability to perform various actions such as adding, modifying, removing, and commenting on annotations within PDF documents directly from their mobile devices.

Bug Fixes

  • #I511388- Resolved the JsonException that occurred while retrieving the form fields in the provided document.
  • #I513903- The handwritten signature is now drawn properly in the Material3 theme.
  • #I513712- The issue of pages freezing during zooming operations has been resolved, and form fields are no longer misplaced.
  • #I512640- The issue where form fields would disappear when pressing the tab key has been resolved.
  • #I484072- Now, the PDF Viewer renders the bookmark properly during the initial rendering.
  • #I520783- The Object reference exception that occurred while downloading particular the document with stamp has been resolved.
  • #I520650- The System.ArgumentException that occurred while loading the particular document with a button field has been resolved.
  • #I521201- The issue that the ID property of the PDF Viewer is overwritten with a randomly generated string has been resolved.
  • #I521856- Now, the ShowToolTip property is working properly in PDF Viewer.
  • #I522851- Now, the EnableContextMenu property is functioning correctly.
  • #I522937- The issue where a similar annotation is automatically added after selecting the same one without dragging has been resolved.
  • #I523394- The issue that ExportAnnotationsAsObjectAsync is not working with the given JSON Data has been resolved.
  • #I522932- The issue that the ExportAnnotationsAsObjectAsync() method throws an error when the last annotation is deleted has been resolved.
  • #I516387- Now, the additional space does not appear to the right in the print preview.
  • #I522367- The issue that Existing custom stamps will be removed when we upload new ones has been resolved
  • #I522713- The issue of ‘Web-service is not listening’ occurring randomly when loading the document programmatically in PDF Viewer (NextGen) has been resolved.

Pivot Table

Bug fixes

  • #I526244 - The pivot table now fits appropriately to the browser page when the height is set to 100% and the grouping bar UI is enabled.

Features

  • #I504411, #I498923, #I491105, #I492757, #I491105 - Provided support for exporting both the table and the chart to a single PDF file.
<SfButton OnClick="OnPdfExport" Content="PDF Export"></SfButton>

<SfPivotView @ref="@Pivot" TValue="PivotProductDetails" Height="300" Width="1200" ShowToolbar=false AllowPdfExport=true EnableVirtualization="true">
    <PivotViewDisplayOption Primary="Primary.Chart" View="View.Both"></PivotViewDisplayOption>
    <PivotViewDataSourceSettings DataSource="@Data">
        ....
    </PivotViewDataSourceSettings>
    ....
    <PivotViewEvents TValue="PivotProductDetails" BeforeExport="BeforeExport" ></PivotViewEvents>
</SfPivotView>

@code {
    public List<PivotProductDetails> Data { get; set; }
    SfPivotView<PivotProductDetails> Pivot { get; set; }
    protected override void OnInitialized()
    {
        this.Data = PivotProductDetails.GetProductData();
    }
    private async Task OnPdfExport(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        Syncfusion.Blazor.Grids.PdfExportProperties ExportProperties = new Syncfusion.Blazor.Grids.PdfExportProperties();
        await this.Pivot.ExportToPdfAsync(ExportProperties, true);
    }
}
  • Introduced a new Syncfusion assembly Syncfusion.Pivot.Engine is a .NET Core compatible alternative to the Syncfusion.EJ2.Pivot package that is used in a server side application to perform all Pivot calculations such as aggregation, filtering, sorting, grouping, and so on, and only the information to be displayed in the Pivot Table’s viewport is passed to the client side (browser) via web service (Web API) rather than the entire data source.

Breaking Changes

  • The ExportToPdfAsync method parameters for the pivot table export have now been changed.

    Previous

    Parameter Type Description
    pdfExportProperties PdfExportProperties Provides the pdf export properties. Use this to provide custom column, data source, theme etc.
    isMultipleExport Nullable<bool> Allows to export multiple tables and charts into a single PDF document.
    pdfDoc System.Object Allows the pivot table data to be exported to an external PDF document.

    Now

    Parameter Type Description
    pdfExportProperties PdfExportProperties Provides the pdf export properties. Use this to provide custom column, data source, theme etc.
    exportTableAndChart Nullable<bool> Allows to export both pivot table and pivot chart data into a single PDF document.
    asBlob Nullable<bool> Allows the pivot table data as a memory stream instead of a document.

  • The ExportToChartAsync method parameters for the pivot chart export have now been changed.

    Previous

    Parameter Type Description
    type Charts.ExportType Defines the export type.
    fileName string Defines file name of export document.
    orientation PdfPageOrientation Defines the page orientation on pdf export(0 for Portrait mode, 1 for Landscape mode).
    width number Defines width of the export document.
    height number Defines width of the export document.

    Now

    Parameter Type Description
    type Charts.ExportType Defines the export type.
    fileName string Defines file name of export document.
    orientation PdfPageOrientation Defines the page orientation on pdf export(0 for Portrait mode, 1 for Landscape mode).
    asBase64 Nullable<bool> Allows the pivot chart to be saved as chart image as a base64 string.

  • The skeleton (aka, HTML) of the pivot table has been restructured. Previously, the pivot table displayed frozen row headers and values data in a two-table manner. It has been simplified to one table. The appearance of the horizontal scrollbar has changed as the row headers were frozen using the CSS attributes. However, the pivot table’s appearance will remain unchanged as the prior version.

    Because the DOM structure of the pivot table has changed, the following classes included elements have been removed and can now be identified using the classes listed below.

    The frozen and moveable header elements have now been identified within the e-gridheader element using the class names shown below.

    Previous Now Description
    e-frozenheader > e-table > th.e-headercell e-table > th.e-leftfreeze.e-headercell Element defining the frozen column header.
    e-movableheader > e-table > th.e-headercell e-table > th.e-unfreeze.e-headercell Element defining the moveable column header.

    The frozen and moveable content elements have now been identified within the e-gridcontent element using the class names shown below.

    Previous Now Description
    e-frozencontent > e-table > th.e-rowcell e-table > th.e-leftfreeze.e-rowcell Element defining the frozen content (aka, row headers).
    e-movablecontent > e-table > th.e-rowcell e-table > th.e-unfreeze.e-rowcell Element defining the moveable content (aka, values).

Presentation

Features

  • TIFF images are preserved properly while converting the Presentation to PDF or image.

Range Selector

Feature

  • #I354250, #F173672- Provided support for exporting range selector data to Excel in a table format.
<SfButton OnClick="ExcelExport">Excel Export</SfButton>

<SfRangeNavigator @ref="RangeSelectorObj" DataSource="@RangeSelectorData" XName="XValue" YName="YValue">
</SfRangeNavigator>

@code
{
    SfRangeNavigator RangeSelectorObj;
    public class RangeSelectorDataDetails
    {
        public double XValue { get; set; }
        public double YValue { get; set; }
    }
    public List<RangeSelectorDataDetails> RangeSelectorData { get; set; } = new List<RangeSelectorDataDetails>
    {
        new RangeSelectorDataDetails { XValue = 10, YValue = 42 },
        new RangeSelectorDataDetails { XValue = 20, YValue = 44 },
        new RangeSelectorDataDetails { XValue = 30, YValue = 53 },
        // More data
    };
    async Task ExcelExport()
    {
        await RangeSelectorObj.ExportAsync(ExportType.XLSX, "RangeSelectorData");
    }
}

Rich Text Editor

Breaking Changes

  • Now, the shortcut key to open the Insert video dialog has been changed to CTRL+ALT+V from CTRL+SHIFT+V to ensure that the Paste as plain text browser shortcut works properly.

Bug fixes

  • #I514715 - Now, the content should not be hidden when resizing the image in the Rich Text Editor.

  • #I521260 - Now, the placeholder value is cleared when typing the content in the Rich Text Editor.

  • #I526240 - Now, the Create Table toolbar button will work properly when enabling the toolbar dynamically.

  • #F185293 - Now, the editor scrolls properly to the cursor position when entering in the Rich Text Editor.

  • #I525319 - Now, the Quick toolbar opens properly when clicking the table and inserting the image in RichTextEditor.

  • #I510055 - Now, pasting the content as plain text when enterKey is configured as BR works properly in the Rich Text Editor.

  • #I524918 - Now, when using the RichTextEditorFontSize, the Rich Text Editor is rendered properly without any script errors.

Feature

#I466822 - Provided support for customizing the IsModel, Target, and ZIndex properties of RichTextEditor Dialogs using the  RichTextEditorDialogSettings.

    <SfRichTextEditor>
        <RichTextEditorDialogSettings Target="body" IsModal="true" ZIndex="1000"></RichTextEditorDialogSettings>
    </SfRichTextEditor>

Schedule

Bug Fixes

  • #I525085 - The issue of the selected date not being highlighted and appointments not being rendered in the month agenda view when using the custom adaptor has been fixed.

Stepper Preview

The Stepper component enables users to navigate through a series of steps or stages in a process within a web application. Steppers display a list of steps, with the current step highlighted, and allow users to move between steps.

Key features

  • Step types - Display steps with indicators and labels, only indicators, or only labels.
  • Orientation - A layout to display steps in a horizontal or vertical orientation.
  • Linear flow - Enable a step-by-step progression, completing one step before moving on to the next.
  • Label positioning - Show the label at the top, bottom, left, or right.
  • Tooltip - Show additional information when users hover over a step, such as a label or customized text.
  • Templates - Customize the default appearance and content of each step using templates.

Stock Chart

Feature

  • #I354250, #F173672- Provided support for exporting stock chart data to Excel in a table format.
<SfButton OnClick="ExcelExport">Excel Export</SfButton>

<SfStockChart @ref="StockChartObj">
    <StockChartSeriesCollection>
        <StockChartSeries DataSource="@StockDetails" XName="Date" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume"></StockChartSeries>
    </StockChartSeriesCollection>
</SfStockChart>

@code {
    SfStockChart StockChartObj;
    public class ChartData
    {
        public DateTime Date { get; set; }
        public Double Open { get; set; }
        public Double Low { get; set; }
        public Double Close { get; set; }
        public Double High { get; set; }
        public Double Volume { get; set; }
    }

    public List<ChartData> StockDetails = new List<ChartData>
    {
         new ChartData { Date = new DateTime(2023, 04, 02), Open= 85.9757, High = 90.6657, 
                         Low = 85.7685, Close = 90.5257,Volume = 660187068},
         new ChartData { Date = new DateTime(2023, 04, 09), Open= 89.4471, High = 92,
                         Low = 86.2157, Close = 86.4614,Volume = 912634864},
         // More data
   };
    async Task ExcelExport()
    {
        await StockChartObj.ExportAsync(ExportType.XLSX, "StockChartData");
    }
}

Tooltip

Bug Fixes

  • #FB47913 - The issue with the Tooltip content not being read by screen readers is resolved.

Tree Grid

Features

  • Provided the OverScanCount property to reduces the frequency of rendering during scrolling. Check out the demo here.

  • Introduced new event support for actions performed within the tree grid. These new events significantly expand your ability to tailor and enhance your interactions within the tree grid, providing you with more control and flexibility. Below, you will find the corresponding event names and event argument details.

Event Information

Event Name Argument Name Properties Description
Sorting Syncfusion.Blazor.Grids.SortingEventArgs Cancel, IsCtrlKeyPressed, Action, ColumnName, Direction, SortedColumns. An event that is invoked before a sorting action is performed or a column is removed from sorting in the tree grid or when the sort column direction changes from Ascending to Descending or vice versa for the same column.
Sorted Syncfusion.Blazor.Grids.SortedEventArgs Action, ColumnName, Direction, SortedColumns. An event callback that is raised after sorting action is performed in the tree grid.
Searching Syncfusion.Blazor.Grids.SearchingEventArgs Cancel, SearchText. Gets or sets the event callback that is raised before the search action is performed in the tree grid.
Searched Syncfusion.Blazor.Grids.SearchedEventArgs SearchText Gets or sets the event callback that is raised after the search action is performed in the tree grid.
RowCreating Syncfusion.Blazor.Grids.RowCreatingEventArgs Cancel, Data, Index, EditContext Gets or sets the event callback that is raised before the add action is performed in the tree grid.
RowCreated Syncfusion.Blazor.Grids.RowCreatedEventArgs Data, Index, EditContext Gets or sets the event callback that is raised after the add action is performed in the tree grid.
RowUpdating Syncfusion.Blazor.Grids.RowUpdatingEventArgs Cancel, IsShiftKeyPressed, KeyCode, Data, Index, PreviousData, PrimaryKeys, PrimaryKeyValue Gets or sets the event callback that is raised before the save action is performed in the tree grid.
RowUpdated Syncfusion.Blazor.Grids.RowUpdatedEventArgs Data, Index, PreviousData, PrimaryKeys, PrimaryKeyValue Gets or sets the event callback that is raised after the save action is performed in the tree grid.
RowDeleting Syncfusion.Blazor.Grids.RowDeletingEventArgs Cancel, Datas, PrimaryKeys Gets or sets the event callback that is raised before the delete action is performed in the tree grid.
RowDeleted Syncfusion.Blazor.Grids.RowDeletedEventArgs Datas, PrimaryKeys Gets or sets the event callback that is raised after the delete action is performed in the tree grid.
EditCanceling Syncfusion.Blazor.Grids.EditCancelingEventArgs Cancel, Data, PreviousData, PrimaryKeys, Index Gets or sets the event callback that is invoked before the cancel action is performed in the tree grid, specifically when using normal and dialog edit modes.
EditCanceled Syncfusion.Blazor.Grids.EditCanceledEventArgs Data, PreviousData, PrimaryKeys, Index Gets or sets the event callback that is invoked after the cancel action is performed in the tree grid, specifically when using normal and dialog edit modes.
Filtering Syncfusion.Blazor.Grids.FilteringEventArgs Cancel, PreventFilterQuery, FilterPredicates, ColumnName Gets or sets the event callback that is raised before the filtering or clear filtering action is performed in the tree grid.
Filtered Syncfusion.Blazor.Grids.FilteredEventArgs FilterPredicates, ColumnName Gets or sets the event callback that is raised after the filtered or clear filtered action is performed in the tree grid.
FilterDialogOpening Syncfusion.Blazor.Grids.FilterDialogOpeningEventArgs Cancel, ColumnName, CheckboxListData, FilterChoiceCount, FilterOperators Gets or sets the event callback that is raised before the filter dialog is opened in the tree grid.
FilterDialogOpened Syncfusion.Blazor.Grids.FilterDialogOpenedEventArgs ColumnName, CheckboxListData, FilterChoiceCount Gets or sets the event callback that is raised after the filter dialog is opened in the tree grid.
ColumnReordering Syncfusion.Blazor.Grids.ColumnReorderingEventArgs Cancel, ReorderingColumns, ToColumn Gets or sets the event callback that is raised when columns reordering action is performed in the tree grid.
ColumnReordered Syncfusion.Blazor.Grids.ColumnReorderedEventArgs ReorderingColumns, ToColumn Gets or sets the event callback that is raised when columns are reordered in the tree grid.
ColumnVisibilityChanging Syncfusion.Blazor.Grids.ColumnVisibilityChangingEventArgs Cancel, VisibleColumns, HiddenColumns Gets or sets the event callback that is raised when the tree grid’s column visibility is changing.
ColumnVisibilityChanged Syncfusion.Blazor.Grids.ColumnVisibilityChangedEventArgs VisibleColumns, HiddenColumns Gets or sets the event callback that is raised when the tree grid’s column visibility is changed.
OnRowEditStart Syncfusion.Blazor.Grids.OnRowEditStartEventArgs Cancel, PreventDataClone Gets or sets the event callback that is raised before an editing action is performed in the tree grid.
RowEditing Syncfusion.Blazor.Grids.RowEditingEventArgs Cancel, PrimaryKeys, PrimaryKeyValue, Data, Index, EditContext, ForeignKeyData Gets or sets the event callback that is raised before the edit action is performed in the tree grid.
RowEdited Syncfusion.Blazor.Grids.RowEditedEventArgs PrimaryKeys, PrimaryKeyValue, Data, Index, EditContext, ForeignKeyData Gets or sets the event callback that is raised after the edit action is performed in the tree grid.
PageChanging Syncfusion.Blazor.Grids.GridPageChangingEventArgs Cancel, CurrentPage, PreviousPage, CurrentPageSize, TotalPages. Gets or sets the event callback that is raised before paging action is performed in the tree grid.
PageChanged Syncfusion.Blazor.Grids.GridPageChangedEventArgs CurrentPage, PreviousPage, CurrentPageSize, TotalPages. Gets or sets the event callback that is raised after paging action is performed in the tree grid.

Breaking changes

  • Revamped the frozen feature by replacing the previous three-table approach with a single table, resulting in significant performance improvements and a reduction in file size.

TreeView

Bug Fixes

  • #I513048 - The Blazor TreeView drag and drop operation issues on touch devices have been resolved.
  • #I515720 - The performance issue while selecting the node in the WASM application has been resolved.

XlsIO

Features

  • #I499890 - I492252 – Pivot field grouping based on date and time is now supported.
  • #I523654 - Creating Excel documents in Spreadsheet XML format is now supported.
  • #I503008 - Provided IApplication.IsExcelFile API to detect whether the document is in Excel format.
  • The fallback font is now supported in Excel to PDF conversion and Worksheet to Image conversion.
  • Tiff image is now supported in Excel to PDF and Worksheet to Image conversion
  • The Excel Library now supports creating and parsing the following Excel functions: LAMBDA, SORT, BYROW, BYCOL, TOROW, TOCOL, CHOOSEROWS, CHOOSECOLS, TEXTSPLIT, and TEXTBEFORE.