Essential Studio for Blazor Release Notes
Common
Features
-
New component: The Timeline component has been added in Blazor. Explore the demo here
- Preview to production-ready components: The following components have been developed to meet industry standards and is now marked as production-ready
-
Syncfusion Blazor Components are now compliant with Web Content Accessibility Guidelines (WCAG) 2.2 standards.
-
Introducing the new Blazor Server and WASM Floor Planner, a showcase web application that allows you to create a floor planner to visually design and plan the layout of a floor or building, including the placement of walls, doors, windows, furniture, and other objects. Check out the Server demo link, WASM demo link, and GitHub source here.
- Introducing the new Blazor Server and WASM Logic Circuit Designer, a showcase web application that allows you to create a logic circuit designer to visually design and simulate digital logic circuits using a wide range of logic gates, input and output components to better visualize and understand how it works, and share your design with others. Check out the Server demo link , WASM demo link, and GitHub source here.
Accumulation Chart
Bug Fix
-
#F186955
- Now, the pie chart legend is displayed when the y-value is zero.
AutoComplete
Features
- Provided the support for Grouping with Virtualization in AutoComplete. You can check out the demo link here.
Chart
Bug Fixes
-
#I555465
- Fixed issue where range bar width is reduced while clicking the grid column. -
#I562647
- Resolved issue where chartOnSeriesRender
event was triggered multiple times on data update. - Spline curve now displays properly for the logarithmic axis.
ComboBox
Features
- Provided the support for Grouping with Virtualization in ComboBox. You can check out the demo link here.
Data Form
Features
- Now you can enable floating label functionality in the DataForm by setting the
EnableFloatingLabel
property totrue
, which will dynamically move the label above the input field when the user interacts with the form.You can refer the following code example to enable the floating label in the DataForm.
<SfDataForm ID="MyForm" EnableFloatingLabel="true"
Model="@EventRegistrationModel">
<FormValidator>
<DataAnnotationsValidator></DataAnnotationsValidator>
</FormValidator>
</SfDataForm>
@code {
private EventRegistration EventRegistrationModel = new EventRegistration()
{
FirstName = "Andrew",
LastName = "Jack"
};
public class EventRegistration
{
[Required(ErrorMessage = "Please enter your name.")]
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Required(ErrorMessage = "Please enter your last name.")]
[Display(Name = "Last Name")]
public string LastName { get; set; }
[Required(ErrorMessage = "Please enter your email address.")]
[EmailAddress(ErrorMessage = "Please enter a valid email address.")]
[Display(Name = "Email ID")]
public string Email { get; set; }
[Required(ErrorMessage = "Please enter your phone number.")]
[Display(Name = "Phone Number")]
[RegularExpression(@"^\d{10}$", ErrorMessage = "Please enter a valid 10-digit phone number.")]
public string PhoneNumber { get; set; }
}
}
Additionally you can refer the demo here for further references.
-
HereAfter DataForm component supports following Data annotations attributes for the model properties.
-
DisplayAttribute - This attribute is used to specify the display name for the model property , Now
ShortName
,AutoGenerateField
,Name
,Prompt
andGroupName
properties will also be supported . - DataType - Determines which editor component should rendered based on the DataType attribute value.
- StringLength - This attribute specifies the maximum and minimum length of characters that can be typed .
- Bindable - This attribute specifies whether the field should be auto-generated or not. If bindable is set to false, the field will not be auto-generated.
- ReadOnly - This attribute specifies whether the field should be read-only or not. If ReadOnly is set to true, the field will be read-only.
-
DisplayAttribute - This attribute is used to specify the display name for the model property , Now
Bug Fixes
-
I551037
- Resolved the issue whereOnUpdate
event is not triggering properly when Model property is used. -
FB50573
- Fixed an issue with ColumnSpan not working correctly in Data Form. -
F186741
- Resolved the issue where a Console error occurs when assigning a value to the fields of the DataForm in theParameterSetAsync
life cycle.
Data Grid
Bug Fixes
-
#FB51205
- Resolved the issue where filtering didn’t work properly when used with Query property. -
#I562142
- Resolved the alignment issue in RTL mode when mapping the GridForeignColumn. -
#FB51500
,#F186732
- Resolved the issue where a console error was thrown while clicking on the add icon during dialog edit, particularly when a column visibility is set to false.
Features
-
#FB16721
- Enhanced drag-and-drop functionality between grids, enabling dragging and dropping rows using the drag icon. -
#I541577
- Enhanced keyboard navigation support for virtualization-enabled DataGrid. -
#FB25692
- The filtering functionality has been enhanced to include additional filter operators such asNotContains
,NotStartWith
,NotEndWith
,Null
,NotNull
,IsEmpty
andIsNotEmpty
. Additionally,Like
andWildcard
support have been added. Explore the demo here. -
#FB36023
- Provided support to add current selection to the Excel and Checkbox filter. Explore the demo here. -
#FB12524
- Added support for exporting the grid along with its detail template. Hierarchical grid export is now achievable through the exporting of detail templates. Explore the demo here.
Breaking Changes
-
Following the toolbar changes, we have revamped the rendering of toolbar items to utilize the Spacer element instead of relying on the Align property.
<div class="e-toolbar-items e-tbar-pos"> <div class="e-toolbar-left"> <div class="e-toolbar-item " id="sfgridpkblvte1r1n_print" data-index="0" title="Print" aria-disabled="false" padding-left="4px"></div> </div> <div class="e-toolbar-center" style="margin-left: 468.5px;"></div> <div class="e-toolbar-right"> <div class="e-toolbar-item e-cc e-ccdiv e-cc-toolbar" id="sfgridpkblvte1r1n_columnchooser" data-index="1" title="Columns" aria-disabled="false"></div> </div> </div>
<div class="e-toolbar-items"> <div class="e-toolbar-item " id="sfgridghk1kep2w2y_print" data-index="0" title="Print" aria-disabled="false" padding-left="4px"></div> <div class="e-toolbar-item e-spacer " id="e-toolbar-item-59968dce-93da-46aa-b7a3-26676476cf4d" data-index="1"></div> <div class="e-toolbar-item e-cc e-ccdiv e-cc-toolbar" id="sfgridghk1kep2w2y_columnchooser" data-index="2" title="Columns" aria-disabled="false"></div> </div>
Diagram
Features
-
#I284707
- Provided support for creating swimlane diagrams programmatically or interactively. A swimlane visually groups and categorizes activities or tasks based on the role or department responsible for their execution, aiding in illustrating complex processes involving multiple participants or departments within an organization. -
#I284707
- Provided support for connectors to dynamically adjust their routes based on the placement or movement of nearby shapes. This feature is achieved by setting the Routing enum value to the constraints property of both the diagram and connectors, ensuring fluid and responsive layout adjustments. -
Additional keys have been added to our diagram control to improve keyboard interaction.
-
Implemented styling support for symbol descriptions in the symbol palette items.
-
Provided annotation template support for diagram elements such as nodes, connectors, groups, swimlane headers, lanes, and phases. This support grants users the flexibility to customize and personalize their annotations using templates.
Bug fixes
-
#I524501
- Nodes are now rendered properly without overlapping, even with a large layout. -
#I533276
- All SVG path nodes are now rendered correctly. -
#F185859
- Rendering of nodes with multiple parents in a complex hierarchy layout now functions correctly. -
#I559485
- The layout now renders properly when adding multiple path shape nodes in the onInitialized lifecycle method with a delay.
Breaking Changes
The following SymbolDescription class properties were marked as obsolete from 2024 Volume 1
release.
SymbolDescription | Comments |
---|---|
TextOverflow | This property is deprecated. Use Style.TextOverflow property instead. |
TextWrapping | This property is deprecated. Use Style.TextWrapping property instead. |
Diagram(Classic)
Breaking Changes
With this release, made the decision to exclude the Blazor Diagrams (classic) component from the Syncfusion.Blazor NuGet package. Furthermore, following this release, discontinued the publication of the Syncfusion.Blazor.Diagrams NuGet package and critical bug fixes are provided as patches. Therefore, you are strongly encouraged to migrate to Syncfusion.Blazor.Diagram package. See the migration guide at https://blazor.syncfusion.com/documentation/diagram/migration-classic-to-native for more details.
Dialog
Breaking Changes
-
The
Header
,Content
andFooter
property will now sanitize the content to prevent the XSS attacks in the Dialog component. To render HTML content in Dialog component, utilize theDialogTemplates
. -
The
DialogButton
will now sanitize theContent
property to prevent the XSS attacks in the Dialog component. To display HTML content in a DialogButton, you can render it as child content.
Previous
<SfDialog ID="Sample-ID" Width="500px" Visible="true" Header="Templates in Blazor Dialog Component"
Content="In <a href="https://www.syncfusion.com/blazor-components/blazor-modal-dialog" target="_blank" rel="noreferer noopener">Blazor Dialog</a>, the template support is provided to the header, content and footer sections. So any text or HTML content can be appended in these sections." >
<DialogButtons>
<DialogButton IsPrimary="true" Content="<a aria-label=" Opens in a new tab" id='newTab' href='https://blazor.syncfusion.com/documentation/dialog/template' target='_blank'>Learn More</a>"></DialogButton>
</DialogButtons>
</SfDialog>
Now
<SfDialog ID="Sample-ID" Width="500px" Visible="true">
<DialogTemplates>
<Header>Templates in Blazor Dialog Component</Header>
<Content>
<p>
In <a href="https://www.syncfusion.com/blazor-components/blazor-modal-dialog" target="_blank" rel="noreferer noopener">Blazor Dialog</a>, the template support is provided to the header and footer sections. So any text or HTML content can be appended in these sections."
</p>
</Content>
</DialogTemplates>
<DialogButtons>
<DialogButton IsPrimary="true">
<a aria-label=" Opens in a new tab" id='newTab' href='https://blazor.syncfusion.com/documentation/dialog/template' target='_blank'>Learn More</a>
</DialogButton>
</DialogButtons>
</SfDialog>
DocIO
Features
-
#I370047
,#I515686
,#I107555
,#I108644
,#I116892
,#I237097
,#I237965
,#I257681
,#I336732
,#F163416
- Now, include \c and \a switches while updating the Table of Contents (TOC) to build table of figures in the Word document. -
#I565373
,#I521060
- Added support to preserve charts with shapes in Word to PDF or image conversion. - Added support for wrapped axis titles in charts during Word to PDF or image conversion.
- Provided support for series line cap formatting in charts during Word to PDF or image conversion.
- Added support for line dash style formatting in scatter and line charts during Word to PDF or image conversion.
- Added support for multilevel category labels in charts during Word to PDF or image conversion.
- Provided support for 100% stacked line charts during Word to PDF or image conversion.
- Added support for manually positioned chart titles during Word to PDF or image conversion.
Document Editor
Features
-
#I560979
- Added the server action settings API for spellcheck by page. -
#I304171
,#I269478
,#419821
,#I500679
- Added support for heading navigation support. -
#I317930
,#I318103
,#I343750
,#349393
,#F164868
- Added change case functionality allows users to quickly change the capitalization of the selected text. - Document Editor now supports saving the document as a Word Template (DOTX).
-
#I458609
,#I355736
,#I257172
,#I348514
,#F165825
- Add support to customize color picker in Document Editor.
DropDown List
Features
- Provided the support for Grouping with Virtualization in DropDownList. You can check out the demo link here.
DropDownTree
Features
- Provided the
TextWrap
support for multi line rendering of selected items text in the Blazor Dropdown Tree. - Provided the support to customize the selected item using
SelectedItemTemplate
property. - Provided new methods
GetTreeViewData
for fetching tree data andRefreshAsync
for refreshing the changes in the Blazor Dropdown Tree component.
Bug Fixes
-
#F186940
,#F186952
- The performance issue of the expand action with large data has been resolved. -
#I555458
- Resolved the incorrect selection when binding theValue
property.
File Manager
Features
-
#FB48027
- Provided support for rendering flat data objects in Blazor File Manager, removing the necessity for HTTP client requests and backend URL configuration. This enhancement also eliminates the need to defineFileManagerAjaxSettings
while rendering the component. -
#FB46902
- Provided custom sorting support in Blazor File Manager throughSortComparer
property. This feature allows users to override the standard sorting functionality of the component. -
Introduced new event support for actions performed within the File Manager component. These new events significantly expand your ability to tailor and enhance your interactions within the File Manager, 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 |
---|---|---|---|
OnRead | ReadEventArgs | Path, Folder, Response, Cancel. | Gets or sets an event callback that will be invoked when the initial data is set and when the sub folders data are read. |
ItemsDeleting | ItemsDeleteEventArgs | Path, Files, Response, Cancel. | Gets or sets an event callback that will be invoked before the delete operation takes place. |
ItemsDeleted | ItemsDeletedEventArgs | Files. | Gets or sets an event callback that will be invoked when the file or folder is deleted successfully. |
FolderCreating | FolderCreateEventArgs | Path, ParentFolder, FolderName, Response, Cancel. | Gets or sets an event callback that will be invoked before the folder is being created. |
FolderCreated | FolderCreatedEventArgs | Folder. | Gets or sets an event callback that will be invoked when the new folder is created successfully. |
Searching | SearchEventArgs | Path, SearchText, Response, Cancel. | Gets or sets an event callback that will be invoked when the character is entered in input box for searching files or folders. |
Searched | SearchedEventArgs | SearchResult. | Gets or sets an event callback that will be invoked when the search action is completed. |
ItemRenaming | ItemRenameEventArgs | Path, NewName, ShowFileExtension, File, Response, Cancel. | Gets or sets an event callback that will be invoked when the file or folder is being renamed. |
ItemRenamed | ItemRenamedEventArgs | File. | Gets or sets an event callback that will be invoked when the file or folder is renamed successfully. |
ItemsMoving | ItemsMoveEventArgs | Path, IsCopy, TargetPath , Files, TargetData, Response, Cancel. | Gets or sets an event callback that will be invoked when the file or folder is being cut or copied for the reason to be pasted in another path. |
ItemsMoved | ItemsMovedEventArgs | Files. | Gets or sets an event callback that will be invoked when the file or folder is being pasted to the destination path. |
ItemsUploading | ItemsUploadEventArgs | Path, Folder, CustomData, Cancel. | Gets or sets an event callback that will be invoked when the file or folder upload begins. |
ItemsUploaded | ItemsUploadedEventArgs | Path, Files, IsSelected, AutoDialogClose. | Gets or sets an event callback that will be invoked when the file or folder is uploaded. |
Bug Fixes
-
#I557469
- The CSS issue affecting the breadcrumb bar of the File Manager component has been resolved. -
#F186798
- Resolved an icon issue when adding custom context menu item in the File Manager layout. -
#I557690
- Resolved the issue of switching views from large icons to details view while selecting any file or folder. -
#F186903
- The issue regarding the drag and drop of multiple items exceeding the component boundary has been resolved. -
#F185799
- The console error when double-clicking to open the folder in the Blazor FileManager with SQL provider has been resolved.
Gantt Chart
Bug fixes
-
#I563612
- The issue with “The updated record did not get properly in the Custom Adaptor” has been resolved.
Features
-
#I425512
- Introduced split-tasks support in the Gantt Chart, enabling uses to visualize multiple task bars within a single row. This feature enhances the representation of tasks with interruptions or breaks, providing a more detailed and comprehensive view of project timelines and progress. Find the demo link here. -
#I470918
- Provided support for maintaining dependency lines continuity across all pages while virtualization is enabled. -
The table below provides information on new and updated methods to Gantt Chart.
Method Description AutoFitColumnsAsync Updates the column width to auto-fit their content, ensuring that the width displays the content without wrapping or hiding. FilterByColumnAsync Enhanced this method to perform complex filtering. ResetZoomAsync Resets the zoom level to its initial state, as configured during the initial rendering.
Image Editor
Breaking Changes
-
Additional parameter for below mentioned public methods have been added.
Method Parameter Type Remarks ClearSelectionAsync resetCrop boolean Specifies to reset last cropped image selection DrawEllipseAsync degree double Specifies the degree to rotate the ellipse DrawEllipseAsync isSelected boolean Specifies to show the shape in the selected state DrawArrowAsync isSelected boolean Specifies to show the shape in the selected state DrawPathAsync isSelected boolean Specifies to show the shape in the selected state DrawLineAsync isSelected boolean Specifies to show the shape in the selected state DrawRectangleAsync degree double Specifies the degree to rotate the rectangle DrawRectangleAsync isSelected boolean Specifies to show the shape in the selected state DrawTextAsync isSelected boolean Specifies to show the shape in the selected state DrawImageAsync degree double Specifies the degree to rotate the image DrawImageAsync opacity double Specifies the opacity value for the image DrawImageAsync isSelected boolean Specifies to show the shape in the selected state UpdateShapeAsync isSelected boolean Specifies to show the shape in the selected state -
Additional parameter for
ShapeSettings
public class have been added.Parameter Type Remarks Degree double? Specifies the degree of rotated shape Opacity double? Specifies the opacity value of the image shape RadiusX double? Specifies the width radius of the ellipse shape RadiusY double? Specifies the height radius of the ellipse shape EndX double? Specifies the X position of the line / arrow shape EndY double? Specifies the Y position of the line / arrow shape ArrowHead ImageEditorArrowHeadType? Specifies the head type of arrow shape ArrowTail ImageEditorArrowHeadType? Specifies the tail type of arrow shape
InPlace Editor
Breaking Changes
- The
InPlaceEditorSaveButton
andInPlaceEditorCancelButton
will now sanitize theContent
property to prevent XSS attacks in the InPlace Editor component. To display HTML content, you can render it as child content.
Previous
<SfInPlaceEditor @bind-Value="@TextValue" TValue="string">
<EditorComponent>
<SfTextBox @bind-Value="@TextValue" Placeholder="Enter some text"></SfTextBox>
</EditorComponent>
<InPlaceEditorSaveButton Content="<span class="e-icons e-check"></span>" CssClass="e-outline"></InPlaceEditorSaveButton>
<InPlaceEditorCancelButton Content="<span class="e-icons e-close"></span>" CssClass="e-outline"></InPlaceEditorCancelButton>
</SfInPlaceEditor>
@code {
public string TextValue = "Andrew";
}
Now
<SfInPlaceEditor @bind-Value="@TextValue" TValue="string">
<EditorComponent>
<SfTextBox @bind-Value="@TextValue" Placeholder="Enter some text"></SfTextBox>
</EditorComponent>
<InPlaceEditorSaveButton CssClass="e-outline"><span class="e-icons e-check"></span></InPlaceEditorSaveButton>
<InPlaceEditorCancelButton CssClass="e-outline"><span class="e-icons e-close"></span></InPlaceEditorCancelButton>
</SfInPlaceEditor>
@code {
public string TextValue = "Andrew";
}
Kanban
Bug Fixes
-
#F186919
- Now theDialogOpen
event is triggered once upon double-clicking on the card in the Kanban component.
ListBox
Features
- Provided the
Readonly
property support to Blazor Listbox component.
Maps
Features
-
#F185586
- The tooltip and its template can now be displayed over the polygon shapes in the Maps. Tooltip templates can include custom items such as images, text, and HTML elements.
MultiSelect
Bug fixes
-
#FB51454
- Fixed an issue with the SfMultiSelect component where pressing space would select the first item.
Features
- Added support for remote goto actions in PDF documents.
- Added support to identify and optimize identical resources when merging PDF documents.
-
#I530228
- Added support for image backgrounds in HTML file to image conversion. -
#I486375
- Added support for creating accessible PDFs when converting from HTML to PDF formats.
Bug Fixes
-
#I554285
- Fixed an issue where sticky note comments were not being saved properly once the PDF was updated. -
#I556724
,#I555734
- Fixed issue where text extracted from a PDF document was not being returned properly.
PDF Viewer
Features
-
#I435195
- The support for the AddAnnotationAsync and DeleteAnnotationAsync APIs, enabling the programmatic addition and deletion of annotations, has been enhanced. This improvement extends to all toolbar actions in the PDF Viewer. Additionally, we have implemented additional functionalities for the EditAnnotationAsync API, and it is now functioning as intended. -
#I523192
- The DocumentEdited event has been exposed to detect document changes, allowing for real-time notification whenever the document is modified. -
#I474691
- Support for borders in link annotations has been implemented. -
#I516401
- PDF actions have been implemented within the existing buttons of the PDF document. -
#I499700
- Implemented support for FitToHeight in the Blazor PDF Viewer. - Integrated customizable toolbar support in the mobile and desktop application, enabling the addition of toolbar items at specified indices.
- Enhanced Blazor PDF viewer with shortcut key support for page navigation, downloading, and panel visibility for comments, bookmarks, and thumbnails.
Bug Fixes
-
#I539561
- Resolved improper pinch behavior during pinch zoom at designated location, ensuring expected point alignment for seamless zooming. -
#I543182
- Resolved the issue where loading a PDF with a stamp annotation would trigger theAnnotationAdd
event. -
#I539542
- When adding ink annotation with zooming, switching from selection to pan mode using Apple Pencil now functions correctly in the MAUI sample. -
#I544544
- Resolved smooth scrolling issue in MAUI Hybrid app’s PDFViewer. -
#I547043
- Toolbar button tooltips are now capitalized properly. -
#I546635
- Resolved the issue where pressing the delete key while entering a comment on the comment panel deletes the annotation. -
#I516387
- Print functionality is now working properly in various browsers. -
#I550924
- Search completed message now appears even when all search matches are on the first page. -
#I554355
- The IsDocumentEdited property is now updated properly when deleting existing custom stamps. -
#I533202
- Now, clicking the form field now correctly focuses only the clicked form field instead of the entire component on iPhone. -
#I555841
- On a mobile device, selecting a word now properly highlights only the selected word instead of the whole page. -
#I557250
- Resolved the web service not listening error when downloading the form-filled PDF. -
#I557284
- Clicking the radio button using the UpdateFormFieldsAsync API now correctly reflects the changes when downloading and loading in Adobe. -
#F186838
- The slowness issue in adding and moving shape annotations has been resolved, and the annotation movement is now faster and more responsive. -
#I559395
- Small shape annotations are now displayed correctly in the PDF Viewer when importing annotations. -
#I559817
- The GetDocumentAsync API in the Blazor PDF Viewer NextGen now correctly returns the document
Pivot Table
Features
-
#F174398
- Provided support to display pivot chart’s series for multiple measures on a single y-axis. Check out the demo here.
Presentation
Features
-
#I520747
,#F176520
- Provided APIs to crop pictures in PowerPoint Presentations, similar to the crop options in Microsoft PowerPoint. -
#I548180
- Provided an API overloadISlides.Add(ISlide clonedSlide, PasteOptions pasteOptions)
to add the cloned slide in the PowerPoint Presentation. -
#I565373
,#I521060
- Added support to preserve charts with shapes in PowerPoint to PDF or image conversion. - Added support for wrapped axis titles in charts during PowerPoint to PDF or image conversion.
- Provided support for series line cap formatting in charts during PowerPoint to PDF or image conversion.
- Added support for line dash style formatting in scatter and line charts during PowerPoint to PDF or image conversion.
- Added support for multilevel category labels in charts during PowerPoint to PDF or image conversion.
- Provided support for 100% stacked line charts during PowerPoint to PDF or image conversion.
- Added support for manually positioned chart titles during PowerPoint to PDF or image conversion.
Query Builder
Features
-
Provided Mongo Query support which helps to get / set the mongo query using the
GetMongoQuery
andSetMongoQuery
methods in the Blazor QueryBuilder. Explore the demo here. -
Provided the Parameter SQL and Named Parameter SQL support which helps to get the parameter SQL and named parameter SQL queries from the query builder using the
GetParameterSql
andGetNamedParameterSql
methods. And set the parameter SQL and named parameter SQL to the query builder using theSetParameterSql
andSetNamedParameterSql
methods in the Blazor QueryBuilder. Explore the demo here. -
Provided the Clone support to query builder which will create an exact replica of a rule or group next to the original using the
CloneRule
andCloneGroup
methods in the Blazor QueryBuilder. Explore the demo here. -
Provided the Lock support which locks all the component in the rule to prevent interaction using the
LockRule
andLockGroup
methods in the Blazor QueryBuilder. Explore the demo here.
Rich Text Editor
Bug fixes
-
#I556446
- Now, when you copy and paste an image in the Rich Text Editor, it works properly. -
#I564853
- Now the toolbar items show properly whenEnableRtl
is set to true in the Rich Text Editor.
Schedule
Bug fixes
-
#I514727
- The issue where appointments were rendered in incorrect slots after CRUD operations, before correcting themselves, has been fixed.
Stepper
Bug Fixes
-
#I564974
- Now the issue with StepperStepRendered
event called in loop has been resolved.
Stock Chart
Feature
-
#I509331
- NewExportCompleted
event support has been provided for the StockChart Component.
Timeline Preview
The Timeline component enables users to display a series of data in chronological order, providing a visually compelling and user-friendly experience. This showcases user activities, tracking progress, narrating historical timelines, and more.
Explore the demo here
Features
- Orientation - Display items in a horizontal or vertical orientation.
- Opposite content - Display additional information opposite to the item content.
- Items alignment - Items’ content and opposite content can be aligned - before, after, alternate, or alternate reverse.
- Reverse timeline - Shows the timeline items in the reverse order.
- Templates - Customize the default appearance, including styling the dot item, templated content, and more.
Toolbar
Features
- Introducing the Spacer toolbar item type, developed to address the flickering issue that occurs when toolbar items are aligned using the Align property,
Spacer
ensures a smoother user experience during initial loading. By aligning items using CSS flex,Spacer
resolves these glitches and enhances the overall loading performance.
Previously we used Align
property to align the toolbar items
<SfToolbar>
<ToolbarItems>
<ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-cut" Text="Cut" Align="ItemAlign.Left"></ToolbarItem>
<ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-copy" Text="Copy" Align="ItemAlign.Left" ></ToolbarItem>
<ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-paste" Text="Paste" Align="ItemAlign.Left" ></ToolbarItem>
<ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-bold" Text="Bold" Align="ItemAlign.Center"></ToolbarItem>
<ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-underline" Text="Underline" Align="ItemAlign.Center" ></ToolbarItem>
<ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-italic" Text="Italic" Align="ItemAlign.Right" ></ToolbarItem>
<ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-paint-bucket" Text="Color-Picker" Align="ItemAlign.Right" ></ToolbarItem>
</ToolbarItems>
</SfToolbar>
Now, we recommend using the Spacer
to overcome the initial loading glitches
<SfToolbar>
<ToolbarItems>
<ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-cut" Text="Cut"></ToolbarItem>
<ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-copy" Text="Copy" ></ToolbarItem>
<ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-paste" Text="Paste" ></ToolbarItem>
<ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
<ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-bold" Text="Bold" ></ToolbarItem>
<ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-underline" Text="Underline" ></ToolbarItem>
<ToolbarItem Type="ItemType.Spacer"></ToolbarItem>
<ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-italic" Text="Italic" ></ToolbarItem>
<ToolbarItem Type="ItemType.Button" PrefixIcon="e-icons e-paint-bucket" Text="Color-Picker" ></ToolbarItem>
</ToolbarItems>
</SfToolbar>
Tooltip
Bug Fixes
- The
Content
property will now sanitize the content to prevent the XSS attacks in the Tooltip component. To render HTML content in Tooltip content, utilize theContentTemplate
property.
Tree Grid
Bug fixes
-
#I556647
,#I546411
- Resolved the issue where expanding and scrolling a single root node showed no records. -
#I555105
- Fixed an issue where records were not added correctly by dynamically changing the new row position at runtime. -
#F51270
- Resolved an issue where drag and drop functionality was not working correctly when selecting a record and dropping it onto a selected record from another parent.
Features
- Improved drag-and-drop functionality between tree grid rows by introducing drag icons in a tree grid column. Users can now utilize the drag icon in each row to reorder the rows via drag-and-drop action. For more details, refer to the documentation.
- The filtering functionality has been improved with addition of new filter operators:
NotContains
,NotStartWith
,NotEndWith
,Null
,NotNull
,IsEmpty
andIsNotEmpty
. Furthermore, support forLike
andWildcard
has been introduced. Explore the enhanced filtering capabilities in the demo here.
TreeView
Bug Fixes
-
#I556763
- The issue where details ofDroppedNodeData
were missing in theOnNodeDragStop
event has been successfully resolved. -
#I562464
- The performance issue of the check action with large data in WASM has been resolved.
XlsIO
Features
- Provided support for wrapped axis titles in chart to image conversion.
- Provided support for series line cap formatting in chart to image conversion.
- Provided support for line dash style formatting in scatter and line charts in chart to image conversion.
- Provided support for multilevel category labels in chart to image conversion.
- Provided support for 100% stacked line chart in chart to image conversion.
- Provided support for manually positioned chart titles in chart to image conversion.
Bug Fixes
- #I552205 - Dotted lines are not rendered properly issue is fixed in the chart to image conversion.
- Argument out-of-range exception thrown when resaving the Excel file in Thai culture is fixed.