What’s New in Syncfusion Essential JS 2: 2024 Volume 2
Tags: essentialjs2, essentialstudio, ui, web
Published: 2024-06-20 16:31:43

---
title: What’s New in Syncfusion Essential JS 2: 2024 Volume 2
published: true
date: 2024-06-20 11:24:52 UTC
tags: essentialjs2, essentialstudio, ui, web
canonical_url: https://www.syncfusion.com/blogs/post/whats-new-essential-js-2-2024-vol2
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpd1lpy5eqdalg4hte9j.png
---
**TL;DR:** Explore what’s new in the 2024 Volume 2 release for our Syncfusion Essential JS 2 platforms! This update brings new controls like the MultiColumn ComboBox and OTP Input and improvements to Timeline, TextArea controls, Fluent 2 theme support, and more.

In our [2024 Volume 2 release](https://www.syncfusion.com/forums/188642/essential-studio-2024-volume-2-main-release-v26-1-35-is-available-for-download "2024 Volume 2 release"), we have introduced many new features and components for our Syncfusion <u><a title="Essential JS 2" href="https://www.syncfusion.com/javascript-ui-controls" target="_blank" rel="noopener">Essential JS 2</a></u> platforms. This blog delves into these key enhancements, enabling developers to create more interactive and informative apps.

## Common updates

### New components

Syncfusion Essential JS 2 has added the following two new components in preview mode:

#### MultiColumn ComboBox (Preview)

The [MultiColumn ComboBox](https://www.syncfusion.com/javascript-ui-controls/js-multicolumn-combobox "Feature Tour: MultiColumn ComboBox") is a dropdown control that displays detailed information about items in a table-like structure in multiple columns.   
  
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 find and select items from large datasets easily.
- **Sorting:** Supports sorting items in ascending or descending order and single or multi-column sorting.
- **Virtualization:** Efficiently displays large datasets by loading data on demand.
- **Templates:** Customizes the appearance and layout, including header, footer, and list items in the pop-up list.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/1.-Essential-JS-2-MultiColumn-ComboBox.png" alt="Essential JS 2 MultiColumn ComboBox" style="width:100%">

  <figcaption>Essential JS 2 MultiColumn ComboBox</figcaption>

</figure>

#### OTP Input (Preview)

The [OTP Input](https://www.syncfusion.com/javascript-ui-controls/js-otp-input "Feature Tour: OTP Input") is a form control for inputting one-time passwords during multi-factor authentication processes.

##### Key features

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

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/2.-Essential-JS-2-OTP-Input.png" alt="Essential JS 2 OTP Input" style="width:100%">

  <figcaption>Essential JS 2 OTP Input</figcaption>

</figure>

### Preview to production-ready components

The following components have been developed to meet industry standards and are now marked as production-ready for Essential JS 2:

- **[Timeline](https://www.syncfusion.com/javascript-ui-controls/js-timeline "Feature Tour: Timeline"):** It offers a structured way to visualize chronological events.
- **[TextArea](https://www.syncfusion.com/javascript-ui-controls/js-textarea "Feature Tour: TextArea"):** It provides a versatile text input control for longer-form text.

### Fluent 2 theme support

 A new Fluent 2 theme support has been added to enhance the app’s visual appeal and consistency.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/3.-Fluent-2-theme-support-in-Essential-JS-2.png" alt="Fluent 2 theme support in Essential JS 2" style="width:100%">

  <figcaption>Fluent 2 theme support in Essential JS 2</figcaption>

</figure>

### CLDR NPM package

A new [CLDR](https://www.npmjs.com/search?q=%40syncfusion%2Fej2-cldr-data "CLDR") NPM package supports internationalization without third-party dependencies, simplifying the process of localizing apps.

## Component-specific updates

### Charts

The [Charts](https://www.syncfusion.com/javascript-ui-controls/js-charts "Feature Tour: Charts") component has received the following updates:

- **Animation on data update:** Users can enjoy smooth animation effects when adding, removing, or updating data. This feature supports animations for data updates in all chart types.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/4.-Animation-on-data-update-feature-in-Essential-JS-2-Charts.gif" alt="Animation on data update feature in Essential JS 2 Charts" style="width:100%">

  <figcaption>Animation on data update feature in Essential JS 2 Charts</figcaption>

</figure>

- **Click to add or remove points:**  Users can interactively add or remove data points based on pointer coordinates during chart mouse events.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/5.-Adding-and-removing-data-points-using-mouse-click-action-in-Essential-JS-2-Charts.gif" alt="Adding and removing data points using mouse click action in Essential JS 2 Charts" style="width:100%">

  <figcaption>Adding and removing data points using mouse click action in Essential JS 2 Charts</figcaption>

</figure>

### Word Processor

The [Word Processor](https://www.syncfusion.com/javascript-ui-controls/js-word-processor "Feature Tour: Word Processor") component has been significantly enhanced:

- **Content control:** This feature allows users to add new content controls or modify existing ones and bind data to content controls in a Word document. It supports various content controls such as Rich Text, Plain Text, Picture, Check Box, Combo Box, Drop Down List, and Date Picker. Users can design fillable templates, fill forms, and bind data to and from content controls. The document’s author can restrict editing for certain parts by locking content control as non-editable or add non-removable placeholders by locking content control as can’t delete.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/6.-Content-control-feature-in-Essential-JS-2-Word-Processor.gif" alt="Content control feature in Essential JS 2 Word Processor" style="width:100%">

  <figcaption>Content control feature in Essential JS 2 Word Processor</figcaption>

</figure>

- **Drag and drop selected content:** Users can now drag and drop selected content within the Word Processor component.
- **Optimize SFDT file size:** The SFDT file size has been optimized to reduce storage requirements.

### Dropdown components

#### Disable individual items

The Dropdown components ([AutoComplete](https://www.syncfusion.com/javascript-ui-controls/js-autocomplete "Feature Tour: AutoComplete"), [ListBox](https://www.syncfusion.com/javascript-ui-controls/js-listbox "Feature Tour: ListBox"), [ComboBox](https://www.syncfusion.com/javascript-ui-controls/js-combobox "Feature Tour: ComboBox"), [Dropdown List](https://www.syncfusion.com/javascript-ui-controls/js-dropdown-list "Feature Tour: Dropdown List"), [MultiSelect Dropdown](https://www.syncfusion.com/javascript-ui-controls/js-multiselect-dropdown "Feature Tour: MultiSelect Dropdown"), [Dropdown Tree](https://www.syncfusion.com/javascript-ui-controls/js-dropdown-tree "Feature Tour: Dropdown Tree"), [Mention](https://www.syncfusion.com/javascript-ui-controls/js-mention "Feature Tour: Mention") and, [MultiColumn ComboBox](https://www.syncfusion.com/javascript-ui-controls/js-multicolumn-combobox "Feature Tour: MultiColumn ComboBox")) now allow users to disable or enable individual items based on specific scenarios. Users cannot interact with the disabled items or select them as values within the component.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/7.-Enabling-of-disabling-individual-items-in-Essential-JS-2-DropDown-components.png" alt="Enabling of disabling individual items in Essential JS 2 DropDown components" style="width:100%">

  <figcaption>Enabling of disabling individual items in Essential JS 2 DropDown components</figcaption>

</figure>

### File Manager

#### Flat data rendering

The [File Manager](https://www.syncfusion.com/javascript-ui-controls/js-file-manager "Feature Tour: File Manager") now supports rendering flat data as an array of JSON objects, removing the need for AJAX requests and back-end URL configuration.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/8.-Flat-data-rendering-feature-in-Essential-JS-2-File-Manager.gif" alt="Flat data rendering feature in Essential JS 2 File Manager" style="width:100%">

  <figcaption>Flat data rendering feature in Essential JS 2 File Manager</figcaption>

</figure>

### Gantt Chart

The [Gantt Chart](https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart "Feature Tour: Gantt Chart") delivers the following new updates:

- **Timeline template:** You can customize the appearance of timeline cells using templates. Users can display images, buttons, or other custom content within the timeline cells, making the Gantt Chart more informative and visually appealing.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/9.-Timeline-templates-in-Essential-JS-2-Gantt-Chart.jpg" alt="Timeline templates in Essential JS 2 Gantt Chart" style="width:100%">

  <figcaption>Timeline templates in Essential JS 2 Gantt Chart</figcaption>

</figure>

- **Different working time ranges for each day:** Users can now define different working time ranges for each day of the week, providing more flexibility in scheduling and managing tasks.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/10.-Custom-working-time-range-feature-in-Essential-JS-2-Gantt-Chart.gif" alt="Custom working time range feature in Essential JS 2 Gantt Chart" style="width:100%">

  <figcaption>Custom working time range feature in Essential JS 2 Gantt Chart</figcaption>

</figure>

- **Improvements in error handling:** The [actionFailure](https://ej2.syncfusion.com/documentation/api/gantt/#actionfailure "API Reference: actionFailure") event notifies developers when the Gantt configurations are mishandled. This event has been enhanced to cover more cases, providing better feedback and diagnostics.

### DataGrid

The [DataGrid](https://www.syncfusion.com/javascript-ui-controls/js-data-grid "Feature Tour: DataGrid") component has received the following enhancements:

- **ODataV4 routing convention:** The **DataManager** ODataV4 Adaptor has been enhanced to support custom action methods alongside the default **GET**, **PUT**, **POST**, and **DELETE** methods. This feature facilitates performing CRUD operations by invoking custom action methods when binding the ODataV4 service to the Grid.
- **Performance improvement:** Significant improvements have been made in lazy load grouping with sorting functionality. These improvements are particularly beneficial for scenarios involving multiple columns for grouping or sorting large datasets.

### Image Editor

The [Image Editor](https://www.syncfusion.com/javascript-ui-controls/js-image-editor "Feature Tour: Image Editor") component supports the following vivid features:

- **Annotation enhancement:** 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.
- **Z-Order support:** This feature allows users to adjust the positioning of annotations. Types of z-order adjustments include **Send Backward**, **Send to Back**, **Bring to Front**, and **Bring Forward**.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/11.-Z-order-annotation-options-in-Essential-JS-2-Image-Editor.png" alt="Z-order annotation options in Essential JS 2 Image Editor" style="width:100%">

  <figcaption>Z-order annotation options in Essential JS 2 Image Editor</figcaption>

</figure>

- **Save support enhancement:** Users can now save an image with a specified file name, file type, and image quality, providing more control over the output.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/12.-Enhanced-save-option-in-Essential-JS-2-Image-Editor.png" alt="Enhanced save option in Essential JS 2 Image Editor" style="width:100%">

  <figcaption>Enhanced save option in Essential JS 2 Image Editor</figcaption>

</figure>

### PDF Viewer

The new features added in the [PDF Viewer](https://www.syncfusion.com/javascript-ui-controls/js-pdf-viewer "Feature Tour: PDF Viewer") component are as follows:

- **Move pages:** Users can reorder pages within their document effortlessly.
- **Copy pages:** Allows creating copies of existing pages.
- **Undo and redo changes:** Enables users to instantly undo or redo changes made in the **Organize Pages** dialog.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/13.Enhancements-in-Essential-JS-2-PDF-Viewer.png" alt="Enhancements in Essential JS 2 PDF Viewer" style="width:100%">

  <figcaption>Enhancements in Essential JS 2 PDF Viewer</figcaption>

</figure>

### Query Builder

#### Drag-and-drop and separate connector supports

The [Query Builder](https://www.syncfusion.com/javascript-ui-controls/js-query-builder "Feature Tour: Query Builder") component now includes a drag-and-drop feature, allowing users to reposition rules or groups within it.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/17.-Drag-and-drop-feature-in-Essential-JS-2-Query-Builder-1024x587.png" alt="Drag and drop feature in Essential JS 2 Query Builder" style="width:100%">

  <figcaption>Drag and drop feature in Essential JS 2 Query Builder</figcaption>

</figure>

It also supports separate connectors between rules or groups, enhancing the complexity and precision of query construction.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/14.Separate-connectors-feature-in-Essential-JS-2-Query-Builder-1024x619.png" alt="Separate connectors feature in Essential JS 2 Query Builder" style="width:100%">

  <figcaption>Separate connectors feature in Essential JS 2 Query Builder</figcaption>

</figure>

### Spreadsheet

The [Spreadsheet](https://www.syncfusion.com/javascript-ui-controls/js-spreadsheet "Feature Tour: Spreadsheet") component has been enhanced with the following features:

- **Notes:** Users can provide additional cell information by adding, editing, and deleting notes.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/15.-Notes-feature-in-Essential-JS-2-Spreadsheet.png" alt="Notes feature in Essential JS 2 Spreadsheet" style="width:100%">

  <figcaption>Notes feature in Essential JS 2 Spreadsheet</figcaption>

</figure>

- **Print:** Users can print the active worksheet or the entire workbook with customizable options.
- **JSON serialization:** Users can extract cell values without formatting or formulas, similar to a CSV file.

### TreeGrid

#### Improvements in error handling

The [TreeGrid](https://www.syncfusion.com/javascript-ui-controls/js-tree-grid "Feature Tour: TreeGrid") component has improved error handling with the **[actionFailure](https://ej2.syncfusion.com/documentation/api/treegrid/#actionfailure "API Reference: actionFailure")** event, which now covers more cases and provides better feedback and diagnostics for configuration errors.

## Conclusion

Thanks for reading! This article highlights the exciting new features and components added to the [Syncfusion Essential JS 2](https://www.syncfusion.com/products/whatsnew/essential-js2 "Syncfusion Essential JS 2") platforms for the [2024 Volume 2 release](https://www.syncfusion.com/forums/188642/essential-studio-2024-volume-2-main-release-v26-1-35-is-available-for-download "2024 Volume 2 release"). To discover more about the features available in this release, please visit our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v26.1.35 "Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew/essential-js2 "What’s New") pages.

The latest version of Essential Studio is available for current customers from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and Downloads") page. If you are not a Syncfusion customer, you can start a 30-day [free trial](https://www.syncfusion.com/downloads "Free Trial") to try out all these components.

If you have any questions, contact us through our [support forums](https://www.syncfusion.com/forums "Support Forums"), [support portal](https://support.syncfusion.com/ "Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Syncfusion Essential Studio 2024 Volume 2 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2024-vol2 "Blog: Syncfusion Essential Studio 2024 Volume 2 Is Here!")
- [What’s New in .NET MAUI Charts: 2024 Volume 2](https://www.syncfusion.com/blogs/post/dotnet-maui-charts-2024-volume-2 "Blog: What’s New in .NET MAUI Charts: 2024 Volume 2")
- [What’s New in Flutter: 2024 Volume 2](https://www.syncfusion.com/blogs/post/whats-new-flutter-2024-volume-2 "Blog: What’s New in Flutter: 2024 Volume 2")
- [Introducing the New Blazor 3D Charts Component](https://www.syncfusion.com/blogs/post/blazor-3d-charts-component "Blog: Introducing the New Blazor 3D Charts Component")