Essential Studio for EJ2 TypeScript Release Notes

v26.1.35
June 11, 2024

Common

Features

  • Fluent 2 theme support added for Syncfusion Essential JS 2 controls, providing a modern and visually appealing user interface.

  • Provided the Syncfusion CLDR package to support internationalization without relying on third-party dependencies.

  • Added the following new controls in preview mode to TypeScript:
    • OTP Input: A secure input control designed for capturing one-time passwords (OTP) within TypeScript applications.
    • Multi Column Combobox: A dropdown control that supports displaying multiple columns of data, allowing for enhanced data selection and improved user experience within TypeScript applications.
  • The Timeline and TextArea controls have been developed to meet industry standards and are now marked production-ready.

Bug Fixes

  • #I591286 - The issue with ‘the warning message for the module injection in the Query Builder control’ has been resolved.

Accumulation Chart

Bug Fixes

  • #I590334 - Now, the pie legend highlight works properly.
  • #I590334 - Now, the legend highlight will work properly even disabling selection in the pie chart.

AutoComplete

Features

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

Chart

Bug Fixes

  • #I591823 - Now, the legend doesn’t gets overlapped when resizing the pie chart to minimal size.

Features

  • #I539415 - Provided support for animations when adding, removing, or updating data for all chart types, ranging from line charts to financial charts.
  • #I539415 - Provided smooth transition support for axis elements like gridlines, tick lines, and labels when data is updated in the chart.
  • #I539415 - Provided smooth transition support for annotations when data is updated in the chart.
  • Improved the animation of stacking series when clicking on the legend.
  • Provided highlight support for chart series when clicking on the legend.
  • Users can now access point information based on the pointer coordinates during chart mouse events and use this information to add or remove points on the chart.

ComboBox

Features

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

DashboardLayout

Bug Fixes

  • #I590397 - Resolved the issue where two panels occupy the same cell when dragging panels in the Dashboard Layout.

Diagram

Features

  • Implemented tooltip support for fixed user handles.
  • Provided support for adding collections of nodes and connectors through the API method.
  • Improved automatic layout support with rendering of parent-child data without considering case sensitivity.
  • Added support for specifying connection direction for ports.
  • Annotations can now rotate relative to either their parent node or the page itself.

Bug Fixes

  • #I588126 - Now, root nodes without a child are positioned properly in complex hierarchical layouts.
  • #I587622 - Annotation content is now positioned properly at the center of the node.
  • #I591632 - Exceptions will no longer be thrown when ungrouping a group node with annotations.
  • #I592290 - UML class nodes are no longer cloned while dragging even when the mouse moves outside the diagram page.

DocumentEditor

Features

  • #F155458, #I329106, #I324222, #I315874, #I295727, #I291743, #I282998, #I280778, #I277336, #I275144, #I274602, #I273391, #I269063, #I268167, #I269063, #I361328, #I438671, #I546241, #I582321 - Content controls are individual controls that users can add and customize for use in templates, forms, and documents. (Rich text, plain text, dropdown list, check box, date picker, combo box and picture). Check out the demo here.

Features

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

Bug Fixes

  • #I591637 - The close event is now triggered when the popup begins closing, and a cancel option is provided to prevent the close action if needed.

FileManager

Features

  • #FB10417 - Provided support for rendering flat data objects in FileManager component, removing the necessity for server requests and back-end URL configuration. This enhancement also eliminating the need to define ajaxSettings while rendering the component.
  • Now, we have provided closeDialog method in FileManager to programmatically close the
    delete, rename, upload, create, details and other dialog popups.
  • Introduced new event support for actions performed within the FileManager 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
beforeDelete DeleteEventArgs path, itemData, cancel. This event is triggered before the deletion of a file or folder occurs. It can be utilized to prevent the deletion of specific files or folders. Any actions, such as displaying a spinner for deletion, can be implemented here.
delete DeleteEventArgs path, itemData, cancel. This event is triggered after the file or folder is deleted successfully. The deleted file or folder details can be retrieved here. Additionally, custom elements’ visibility can be managed here based on the application’s use case.
beforeFolderCreate FolderCreateEventArgs path, folderName, parentFolder, cancel. This event is triggered before a folder is created. It allows for the restriction of folder creation based on the application’s use case.
folderCreate FolderCreateEventArgs path, folderName, parentFolder, cancel. This event is triggered when a folder is successfully created. It provides an opportunity to retrieve details about the newly created folder.
search SearchEventArgs showHiddenItems, caseSensitive, searchText, path, cancel, searchResults. This event is triggered when a search action occurs in the search bar of the File Manager component. It triggers each character entered in the input during the search process.
beforeRename RenameEventArgs path, itemData, newName, cancel. This event is triggered when a file or folder is about to be renamed. It allows for the restriction of the rename action for specific folders or files by utilizing the cancel option.
rename RenameEventArgs path, itemData, newName, cancel. This event is triggered when a file or folder is successfully renamed. It provides an opportunity to fetch details about the renamed file.
beforeMove MoveEventArgs path, targetPath, targetData, itemData, isCopy, cancel. This event is triggered when a file or folder begins to move from its current path through a copy/cut and paste action.
move MoveEventArgs path, targetPath, targetData, itemData, isCopy, cancel. This event is triggered when a file or folder is pasted into the destination path.

Bug Fixes

  • #I594282 - Resolved the fileOpen event issue in the File Manager component.

Floating Action Button

Breaking Changes

  • The refreshPosition method has been marked as deprecated and will no longer be used. It will be removed in future versions. Previously, this method was used to re-position the FAB when its target was resized. Now, this functionality is handled responsively through CSS at the source level, eliminating the need for manual refreshes.

GanttChart

Features

  • #I272613,#I269665,#I247664,#F146782 - Provided weekWorkingTime support, allowing you to define distinct work hours for different working days. Please find the demo link here.
  • #I287282, #I298661, #I307272, #I313849, #I323459, #F185672, - Provided timelineTemplate support to render user defined HTML elements in timeline header. Please find the demo link here.
  • We have improved to handle the exception of errors made at Gantt component model binding and throws the error information in actionFailure event. Please find the documentation link here.

Grid

Bug fixes

  • #I592818 - Resolved the script error that occurred when the dataSource was initially set to undefined.
  • #F188207 - The issue with Autofit not working properly when there is an invisible column with no specified width has been resolved.

Features

  • #FB3775 - The ODataV4 functionality has been enhanced, enabling you to invoke custom URLs for data fetching and CRUD actions.
  • Lazy load grouping with sorting performance has been improved, allowing you to handle large datasets without performance lag.
  • The Fluent 2 theme are now available in both light and dark modes on the EJ2 Grid. Explore the demo here.

Image Editor

Features

  • Annotation enhancement - The latest update to our Image Editor significantly improves the annotation feature. Users can now draw multiple annotations simultaneously, enhancing creative flexibility. Furthermore, every action, including customizations, will be tracked in the undo/redo collection, ensuring a seamless user experience and making it easier to experiment with different designs. Explore the demo here.

  • Z-order support - We are excited to introduce z-order support in the Image Editor. It’s a powerful tool that allows users to adjust the positioning of annotations. This feature is particularly useful for designing personalized templates like greeting cards or posters, where managing the layering of multiple annotations is crucial for a polished final product. Explore the demo here.
    • Types of z-order adjustments:
      • Sent Backward: Switch the selected annotation with the annotation one layer behind it.
      • Send to Back: Move the selected annotation to behind all other annotations.
      • Bring to Front: Move the selected annotation to ahead of all other annotations.
      • Bring forward: Switch the selected annotation with the annotation one layer ahead of it.
  • Save support enhancement - Users can now save an image with a specified file name, file type, and image quality. This enhancement provides more control over the output, ensuring that users can save their work exactly as they need it. Explore the demo here.

MultiColumn ComboBox Preview

The JavaScript MultiColumn ComboBox is a dropdown control that displays detailed information about items in a table-like structure with multiple columns. It provides comprehensive data about the selected value, offering more context than typical single-string text lists.

Explore the demo here

Key features

  • Data binding: Supports data binding from JavaScript object arrays and remote data sources using adapters like OData, URLs, and Web APIs.

  • Grouping: Allows grouping of pop-up list items to enhance the user experience by organizing related items.

  • Filtering: Provides advanced filtering capabilities to easily find and select items from large datasets.

  • Sorting: Allows sorting of items in ascending or descending order and single or multi-column sorting.

  • Virtualization: Supports virtualization to efficiently display large datasets by loading data on demand.

  • Templates: Allow customization of the appearance and layout, including header, footer and list items in the pop-up list using templates.

MultiSelect

Features

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

OTP Input Preview

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

Explore the demo here

Key features

  • Input types: Allow specifying the input type as text, number, or password for the OTP input.

  • Styling modes: Offer built-in styling options such as underline, outline, or fill.

  • Placeholders: Allow setting a hint character for each input field, indicating the expected value.

  • Separators: Specify a character to be placed between the input fields.

  • Customization: Allows customizing the default appearance, including input field styling, input length and more.

PDF Viewer

Bug Fixes

  • #I591752 - Now, the textbox field and comment panel focused when entering Shift + H and Shift + V characters.

Features

  • #I325357, #I420258 - Experience seamless page movement, allowing you to reorder pages effortlessly.
  • Effortlessly duplicate pages to better manage your documents.
  • Quickly undo or redo changes made within the organize pages dialog for a smoother editing experience.
  • Enabled minimum and maximum zoom settings in the PDF Viewer for enhanced control over zoom levels.

PivotTable

Bug fixes

  • #I581048 - We can now customize the headers before sending service requests when using a server-side pivot table.

Query Builder

Features

  • Drag-and-drop support - The Query Builder component now features a drag-and-drop capability through the allowDragAndDrop property, enabling users to easily reposition rules or groups within the component. This enhancement offers a more intuitive and flexible way to construct and modify queries. Explore the demo here.

  • Separate connector support - The separate connector feature in the Query Builder component enables users to integrate standalone connectors between rules or groups within the same group by using the enableSeparateConnector property. This allows for greater flexibility, as users can connect rules or groups using different connectors, enhancing the complexity and precision of query construction. Explore the demo here.

RichTextEditor

Features

  • Table row and column selection: Improved the selection of table rows and columns using the mouse or keyboard with Shift + arrow keys, setting the background color of the selected cells. Additionally, enabled table selection when pressing the backspace key after the table and the delete key before the table. Please find the demo link here.

  • Default Item in Font Family and Font Size: Introducing default options for font family and font size. When no font family or font size is set for the selected text, it will be manually set to the default values. Please find the demo link here.

  • #I525279 - Added support for text formatting in selected table cells, allowing users to apply headings, paragraphs, lists, and inline formats such as bold, italic, and strikethrough to multiple cells at once. Enhanced backspace functionality for clearing selected table cell content. Please find the demo link here.

Bug Fixes

  • #I583830 - Now, the tab key is working properly after inserting the mention list in the Rich Text Editor.

  • #I572346 - Now, paste the mention tag into the Rich Text Editor, which works properly.

  • #F58025 - Now, when the cssClass property is configured with more than one class, inserting a link into the Rich Text Editor works properly.

  • #F58018 - Now, the Strikethrough toolbar item recognizes the s tag in the RichTextEditor and highlight the toolbar item.

  • #I595303 - Now, the tooltip shows Heart for the heart emoji in the Rich Text Editor.

Breaking Changes

  • The formats dropdown in the Rich Text Editor toolbar no longer includes the quotation option. Instead, a new blockquote icon has been introduced in the toolbar’s default mode to facilitate applying blockquote. Additionally, the quotation can be added to the formats dropdown using the formats property. Please find the demo link here.

  • Restructured the DOM element to enable flexible height for the editor area and toolbar by setting display: flex; on the first child of the Editor root element.

Old Element structure

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

New Element structure

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

Schedule

Bug fixes

  • #I587571 - The issue with the refreshLayout method causing UI disruptions when utilizing virtual scrolling has been resolved.
  • #FB57769 - An issue with the events is not overlap properly when the event has same start and end time.

Spreadsheet

Features

  • Now, added a notes option that allows users to provide additional cell information, with the ability to easily add, edit, and delete notes.

  • Now, added a printing option that enables users to print either the active worksheet or the entire workbook directly. Additionally, users can customize their printouts by choosing to display or hide row and column headers, as well as gridlines.

  • Now, provided support to specify the order in which the data source fields are populated into the cell.

  • #I535379 - Now, introduced an option for locking and unlocking cells without need to protect the sheet.

  • #I432805, #I558536, #I432808 - Now, introduced a new serialization option in the saveAsJson method, enabling users to extract cell values without formatting or formulas, like a CSV file.

TextArea

Breaking changes

  • The rowsCount property name has been modified as rows.
  • The ColumnsCount property name has been modified as cols.
  • The Resize property default value has been updated from vertical to both value.

Tree Grid

Features

  • Improved support for the ActionFailure event to better handle exceptions and provide detailed error information.

TreeView

Bug fixes

  • #FB53017 - Resolved the issue where the drop action failed while dropping on a sibling element.
  • #FB53024 - Resolved the issue where position value of nodeDragStop event returns improper value while change the dropIndicator value in nodeDragging event
  • #I586334 - The issue where the TreeView checkbox state is read twice in the NVDA tool when using the Edge browser has been resolved.

Uploader

Features

  • Added support for catching the returned response body in the uploader component from the success event. You can check out the documentation link here.