Essential Studio for EJ2 TypeScript Release Notes

v27.1.48
September 18, 2024

Common

Features

  • Added the following new components in preview mode to Essential JS 2:

  • The following components have been enhanced to meet industry standards and are production-ready for Essential JS 2 development:

    • MultiColumn ComboBox
    • OTP Input

  • All Syncfusion JavaScript UI Controls support the Fluent 2 high contrast design, improving accessibility and user experience for visually impaired users.

  • All Syncfusion JavaScript UI Controls support the Bootstrap 5.3 design, offering enhanced styling and features for modern web development.

  • Provided lightweight theme files (e.g., fluent2-lite.css) to optimize performance by excluding bigger size styles.

Accumulation Chart

Features

  • #I539415- Provided support for animations when adding, removing, or updating data for series, data labels, and legends. Explore the demo here.
  • Added support for rounded corners in pie, donut, pyramid, and funnel charts. Explore the demo here.
  • Provided pattern support for data points in accumulation charts. Explore the demo here.

AI AssistView Preview

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

Explore the demo here

Key features

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

Chart

Features

  • #I539415- Provided support for smooth data transitions with animation effects when sorting data in the chart. Explore the demo here.
  • #I539415- Provided support for smooth animation transitions when zooming the chart. Explore the demo here.
  • Added support to disable risers in the step line series for enhanced customization. Explore the demo here.
  • Now, the marker is animated along with its respective series when enabling animation and marker for the series in the chart.

ColorPicker

Features

  • Added an option to display recent colors in a palette view within the color picker, allowing users to quickly access and select their most recently used colors.

DateTimePicker

Features

  • The DateTimePicker used provides options to define the range of selectable times through the minTime and maxTime properties. These properties ensure that users can only select times within the specified range, while times outside this range are restricted. Please find the demo link here.

Diagram

Features

  • Added support for customizing the size of the segmentThumbShape for both orthogonal and Bezier connectors. The segmentThumbSize property of Diagram class allows to set size for segment thumb for all the connectors in the diagram. To customize a size of specific connector segment thumb shape, disable the InheritSegmentThumbSize constraint for a connector and use segmentThumbSize property of Connector class.

  • #I251464 - Added the ability to control how often the scrolling needs to be performed automatically in the Diagram component during the auto-scrolling behavior. Users can now adjust the frequency, ranging from slow and smooth to quick and rapid, to suit their preferences. To configure, set the value in milliseconds to the autoScrollFrequency property within the scrollSettings class, allowing precise control over how often auto-scrolling occurs.

  • #I574704 - The loaded event is now triggered when all diagram elements are fully loaded using the loadDiagram method. This ensures that any customizations or modifications to the diagram are applied once elements have been rendered.

  • Added template support for fixedUserHandles, allowing customization of their appearance using HTML templates. To implement, create an HTML element within a script tag and refer to the id in the fixedUserHandleTemplate property of Diagram class.

  • Added the support to provide tooltip information for annotations. To enable this, set the Tooltip enum value in the annotation constraint property then set desired tooltip content to the Tooltip property.

  • Flowchart layout support has been provided to visually represent processes, workflows, systems, or algorithms. This feature automatically creates flowcharts by arranging diagram elements in a clear, logical, and visually appealing manner. It leverages an advanced layout algorithm to automatically position nodes and connectors, whether they are sourced from the Nodes, Connectors, or business objects defined in the DataSource. To enable this feature, set the Flowchart enum value in the type and flowchartLayoutSettings properties of the Layout.

  • Support for importing and exporting mind map and flowchart diagrams using Mermaid syntax has been provided. Mermaid syntax is a Markdown-inspired language that automatically generates diagrams. This feature allows you to create mind map and flowchart diagrams directly from Mermaid syntax data, simplifying the visualization of complex ideas and processes without manual drawing. Additionally, you can export your mind map and flowchart diagrams back to Mermaid syntax, enabling easy sharing, editing, and use across various platforms. You can use the following methods of the SfDiagramComponent:

    • SaveDiagramAsMermaid: Saves the current diagram in Mermaid text format.
    • LoadDiagramFromMermaidAsync: Loads and generates a diagram from the given Mermaid text data.

Bug Fixes

  • #I619234: Fixed incorrect connector routing when the segment direction was set to “Left.”
  • #I620382: Resolved resizing issues of diagram nodes when dragged with multiple selections inside a swim lane.
  • #F191674: Cleared empty history entries in the history manager when an entry was canceled using canLog.
  • #I589528: Fixed diagram flickering when scrolled using a track pad on macOS.
  • #I601125: Child nodes in the ComplexHierarchicalTree are now positioned correctly, eliminating connector overlaps.
  • #I629824: Now, the tooltip renders properly when hovering over the annotations of a node or connector.
  • #I625802: Now, multi-selecting a swimlane along with a node in the diagram can be dragged properly.Now, multi-selecting a swimlane along with a node in the diagram can be dragged properly.
  • #I625573: Dropping BPMN shapes onto a BPMN connector no longer triggers an exception.
  • #I624776: Dragging a segment that reverts to its original position no longer causes an exception.
  • #I624997: Multiple annotations on Bezier connectors will now be positioned properly.
  • #I624045: Now, nodes inside swimlanes snap properly with other nodes.

DocumentEditor

Features

  • #I420700, #I425501, #I476988, #I508922, #I542244, #I556252, #I600435 - Added shapes support feature which allows you to preserve shapes in Word documents when opening and saving them in the Word Processor. Please refer to the documentation and demo for more details.
  • #F155458, #I329106, #I324222, #I315874, #I295727, #I291743, #I282998, #I280778, #I277336, #I275144, #I274602, #I273391, #I269063, #I268167, #I269063, #I361328, #I438671, #I546241, #I582321 - Added XML mapped content controls feature which allows you to insert content controls in your document that are linked to custom XML data. By mapping specific parts of your document to XML data, you can ensure that the content within these controls is automatically updated whenever the underlying XML data changes, making it ideal for dynamic documents. Please refer to the documentation for more details.

Bug Fixes

  • #I620849 - Resolved the paragraph contextual spacing issue when copy pasting RTF content.
  • #I622060 - Resolved the issue when saving the document in docx format and reopening in Microsoft Word.
  • #I620502 - Resolved the unable to preview attached word document and page becomes unresponsive issue.

Features

  • #I621087 - Provided support to prevent the check action of disabled child nodes using checkDisabledChildren API.
  • #I610462 - Provided valueTemplate support to customize the display of selected values in the Dropdown Tree component.

Bug Fixes

  • #I622674 - The issue where, when multi selection is enabled, selected items were just appended into one string for the aria-label in the Dropdown Tree has been resolved.
  • #I630411 - Facing an console error when all nodes are not selectable while opening the popup in the Dropdown Tree component have been resolved.
  • #I624932 - Multiple focus issue when enabled the showSelectAll and allowFiltering properties in the Dropdown Tree component has been resolved.
  • #I625088 - The issue with selected field in the Dropdown Tree component has been resolved.

File Manager

Features

  • The Backspace key navigation support is provided for File Manager to navigate to the previous path in File Manager.
  • The File Manager supports for selecting files and folders in specific ranges through mouse drag as like File Explorer. This can be enabled through enableRangeSelection property.
  • #FB22674- SharePoint file service has been implemented to connect as back-end with File Manager.

GanttChart

Features

  • #I893608- The Zooming feature in the timeline has been enhanced to include touch support and mouse wheel interaction. Users can now perform zoom-in and zoom-out actions by pinching in/out on the chart pane or using the mouse wheel in combination with the ‘Ctrl’ key. Explore the demo here.
  • #I885165,#F56892- Provided support for taskbar resizing for manually scheduled parent taskbars Task Scheduling, allowing taskbar resize actions.
  • #I885310,#F56941- The Gantt Chart now supports localized text for Dependency types (FS, FF, SF, SS), improving readability and providing greater flexibility for localized applications. Please find the demo link here.

Breaking Changes

  • The behavior of the loadChildOnDemand property in the Gantt Chart has been modified. Previously, when this property was set to true, both parent and child records were loaded simultaneously. Now, when set to true, parent records will initially be rendered in a collapsed state, with child records being loaded only when the parent row is expanded. Additionally, the default value of loadChildOnDemand has been changed from false to true.

Grid

Features

  • #FB52338 - Previously, the Grid Filter, Column Menu, and Column Chooser popups didn’t display fully when the grid height was less than the popup height, such as when the grid height was under 300px. This issue has been fixed, and the popups now display fully without adjusting the grid height at any size.
  • The DataGrid Adaptive view now only renders an adaptive layout for mobile screens when the AdaptiveUIMode property is set to Mobile.
  • #I586042 - OnDemand support for Checkbox and Excel-type filtering is now available in Adaptive UI here.
  • The Data Grid has improved the Fluent 2 theme and added support for Fluent2-high contrast. Explore the demo here.

ImageEditor

Features

  • Redact support - The Redact support in the Image Editor allows users to effortlessly conceal sensitive information by applying blur or pixel effect to specific areas of an image. Ideal for maintaining privacy in photos. This feature is particularly valuable for protecting privacy and complying with data protection regulations, making it easier to securely share images without compromising sensitive information.

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

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

Mention

Features

  • The Mention 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 ‘fields.disabled’ property. Please find the demo link here.

MultiColumn ComboBox

Bug Fixes

  • #I629122 - Now the issue with selection state not updated when grouping is enabled in the Multicolumn ComboBox has been resolved.

NumericTextBox

Bug Fixes

  • #I630041 - Fixed an issue where the aria-label attribute was not properly updated in the NumericTextBox.

OTP Input

Features

  • A new autoFocus property has been introduced to manage the auto-focus functionality of the OTP Input.

  • Introduced the new textTransform property, an enum type, allows you to control the casing of the OTP Input values, including options for upper case, lower case, or none.

  • The index property has been added to the focus, blur, and input event arguments, providing the current index of the OTP Input field for more precise event handling.

PdfExport

Bug Fixes

  • The default left and right cell paddings of PDF grid has been updated as 0.5 from 5.76

PDF Viewer

Bug Fixes

  • #I620380 - Now, the sticky note annotation was added correctly along with the comment programmatically inside the annotationAdd event without any exceptions.
  • #I624857 - The ArgumentOutOfRangeException no longer occurs when clicking the submit button in the provided document.
  • #F194120 - The bookmark navigation now works properly in the provided document.
  • #I619099 - The pages now render properly when navigating to the searched text continuously.
  • #I626710 - Now, the signature is added to the correct signature field when switching the mobile device from portrait to landscape orientation.

Features

  • Added support to import PDF documents within the Organize Pages dialog, enabling users to incorporate pages from other PDFs into the current document.
  • #F181628 , #I482858 , #I488268 , #I494793 , #I595206 - Introduced the ability to programmatically add handwritten signatures and initial annotations in PDF documents.
  • #F183710 , #I470260 - Implemented options to customize print quality in the PDF Viewer, allowing users to select different quality levels to balance print clarity with processing speed.
  • Enabled multi-word search functionality within the PDF Viewer.
  • #I592524 , #I598159 - Added support for loading custom fonts in PDFium WASM to ensure proper rendering of page content.
  • #I340793 , #I345576 , #I359942 , #I379567 , #I386590 , #I605421 , #I607974 - Added support for custom fonts in the TypeHere signature and initial fields.

Pivot Table

Features

  • #I517509 - The conditional formatting UI now includes an option that allows the user to apply conditional formatting to the grand total values dynamically. Check out the demo here.

Bug fixes

  • #I625045 - The pivot table will now be rendered properly while dynamically updating the dataSource and pageSettings.

RichTextEditor

Features

  • Inline Code: this feature allow users to highlight small code snippets, commands, or keywords within text, making them stand out for clarity in Rich Text Editor. Explore the demos here.

  • Import Export: this feature allow users to export the Rich Text Editor’s content into PDF or Word documents, as well as import Word content directly into the Rich Text Editor. Explore the demos here.

  • Slash Menu: Provided support for / character to open popup and then apply formats such as Headings, Lists and Open insert dialogs of Image, Links, Table and options to add custom commands. Explore the demos here.

Breaking Changes

  • Images saved on the server will no longer be automatically deleted when using keyboard or quick toolbar actions in the editor. This change is necessary because if the images are removed from the server, it would prevent the ability to perform undo/redo actions on them.
    • Solution : To handle image deletions properly, use the afterImageDelete event to capture the src of the deleted image. Then, send a request to your server to remove the image from storage, ensuring it is only deleted when explicitly intended.

Bug Fixes

  • #I627631 - Now, pressing the clear format when table is selected work properly in the Rich Text Editor.

  • #I624158 - Now, typing 1. after pressing shift+enter does not create a list item in the Rich Text Editor.

  • #I621065 - Now, applying the multiple formats along with font-size format works properly by maintaining the font-size as priority.

  • #I618955 - Now, pasting images from the Microsoft Word document with ODT as file format works properly in the Rich Text Editor.

  • #I618955 - Now, pasting content with images from Mac Outlook or Microsoft Word into the Rich Text Editor works properly in the Safari browser.

  • #I624026 - The actionBegin event will now be triggered when the numeric keypad enter key is pressed.

  • #I610932 - Now, updating the image URL in the actionBegin event arguments will now correctly insert the new URL.

Schedule

Features

  • #I546459 - Improved timeline views virtual scrolling performance.
  • Provided new keyboard shortcuts to open the editor window and navigate to today’s date.
Keys Description
Shift + Alt + N To open a new editor window.
Shift + Alt + Y To navigate today date.

Bug fixes

  • #I194307 - An issue where the firstDayOfWeek property was not working in the year view’s specific settings has been fixed.

Slider

Bug Fixes

  • #I624218 - An issue with Slider ticks in material theme has been resolved.

Tab

Bug fixes

  • #FB60693 - An issue where dynamically adding, removing, and then re-adding tabs caused an error when selecting the newly added tabs has been fixed.

Tree Grid

Bug Fixes

  • #F61040 - Fixed a focus issue that occurred when using the up/down arrow keys during editing.

Breaking Changes

  • The behavior of the LoadChildOnDemand property in the Tree Grid has been modified. Previously, when this property was set to true, both parent and child records were loaded simultaneously. Now, when set to true, parent records will initially be rendered in a collapsed state, with child records being loaded only when the parent row is expanded. Additionally, the default value of LoadChildOnDemand has been changed from false to true.

TreeView

Features

  • #I621087 - Provided support to prevent the check action of disabled child nodes using checkDisabledChildren API.

Bug Fixes

  • #I626894 - The issue where the parent state was not updated properly when dynamically changing the checked nodes has been resolved.

Uploader

Bug Fixes

  • #I627151 - Fixed an issue where the aria-label was not added to the delete button for the preloaded files.