We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Syncfusion Feedback
What’s New in Essential JS 2

ESSENTIAL STUDIO® 2024 VOLUME 4

What’s New in Essential JS 2

2024 Volume 4 for JavaScript delivers a new Chat component, a tabular layout for the Pivot Table, and manual calculation and custom formula validation for Spreadsheet.

What’s New seaprator What’s New in Essential JS 2

Common

Tailwind CSS 3.4 with CSS variables

The Tailwind CSS theme used in Syncfusion® JavaScript UI controls has been upgraded to Tailwind CSS 3.4, offering enhanced styling and support for CSS variables to elevate the design experience.

Tailwind3

New control

The Chat UI control has been added to the Essential® JS 2 control suite.

Preview to production-ready controls

The following controls have been developed to meet industry standards. They are now production-ready:

  • AI AssistView
  • MultiColumn ComboBox

Charts

Crosshair snap

This feature enables users to snap the crosshair to the nearest data point instead of tracking the exact mouse position, ensuring a precise focus on individual data points.

JavaScript Chart Crosshair snap

Toolbar position

This feature allows users to customize the position of the zoom toolbar within the chart. The drag-and-drop functionality enables users to reposition the toolbar anywhere within the chart area easily.

JavaScript Chart Toolbar

Tooltip highlight

This feature highlights the corresponding series when a data point is hovered over, enhancing clarity and interaction with the tooltip.

JavaScript Chart Tooltip Highlight

Legend layout

Users can now arrange the chart legends horizontally or vertically and set a maximum number of columns for auto layouts. A new fixed-width option ensures consistent legend sizing for a clear presentation.

JavaScript Chart Legend Layout

Chat UI (preview)

The Essential JS 2 Chat UI control is a lightweight, user-friendly conversational interface for displaying chat messages between users. It features messages with timestamps, avatar images with fallback text, typing indicators, and extensive customization options, making it ideal for building modern chat applications.

Key features

  • Message suggestions: Provides on-demand suggestions using customizable templates to enhance user interactions.
  • On-demand messages loading: Dynamically loads messages to optimize performance, especially for lengthy conversations.
  • Header toolbar: Allows adding toolbar items in the header with options for executing custom commands.
  • Timebreak: Automatically inserts time breaks between messages, enhancing readability by grouping conversations by date.
  • Typing indicator: Shows real-time typing activity of users with customizable indicator styles.
  • Customization: Allows users to customize the default appearance, including messages, the footer, and more, to suit their needs.

JavaScript Chat UI

Context Menu

Template support

The context menu control now includes support for item templates, allowing users to customize the appearance of menu items. This enhancement enables the integration of icons, images, and other elements, providing a more personalized and visually engaging menu experience.

JavaScript Context Menu Template

Word Processor

Support for selecting revisions in beforeAcceptRejectChanges event

Selecting content during the beforeAcceptRejectChanges event enables the following:

  • Identification of a specific content being accepted or rejected.
  • Retrieval of the start and end offsets of the selected content.
  • Execution of custom actions based on the selected content.
  • Prevention of the acceptance or rejection of changes, providing control over the revision process.

JavaScript Document Editor Track changes event

Event for document loading failure notification

Capture document load failures in the Word Processor. By using this event, you can perform custom actions whenever a document fails to load, enabling you to handle errors effectively and improve the user experience.

Restart and continue list numbering programmatically

This feature allows you to restart and continue list numbering from the currently selected paragraph programmatically, providing greater flexibility and control over document editing.

Performance improvement for pasting content inside a table

The performance for pasting a large amount of content inside a large table has been significantly improved. For example, the time it takes to paste content inside a 60-page table has been reduced from 43 to 3 seconds, approximately. Now, content can be pasted into tables without any lag, making the user experience smoother.

Resize support has been added to dropdown components, allowing users to dynamically adjust their size for improved usability and flexibility. This feature includes resizable edges, enabling users to manually control the width and height of the dropdown popup.

JavaScript Dropdowns Popup Resize

File Manager

Chunk upload

The File Manager now supports the chunk upload feature, which allows large files to be split into smaller chunks based on the specified chunk size and uploaded sequentially to the server. This improves reliability and performance when handling massive file uploads.

JavaScript File Manager chunk upload

Image Editor

Image type and size restriction

The Image Editor now supports image restrictions. This feature allows users to specify image extensions, as well as the minimum and maximum image sizes. End users will receive a clear alert message if an uploaded image does not meet the defined criteria, ensuring a seamless and user-friendly upload experience.

JavaScript Image Editor type and size restriction

Maps

Configuring marker clusters for individual groups

Marker clusters can be enabled for individual marker groups on a map layer, allowing customization of colors, sizes, marker count labels, and connector lines within the cluster. Additionally, cluster expansion functionality can be enabled separately for each marker group.

JavaScript Maps Marker Clustering

PDF Viewer

Retrieve page details in PDF Viewer

The PDF Viewer now supports retrieving key page details such as size and rotation. This feature enables developers to access and manage page information at the application level, offering greater control and customization.

Custom fonts in free text annotation

Free text annotations now support custom fonts, allowing users to apply their font styles to the annotation content. These custom fonts are preserved when saving the document.

JavaScript PDF Viewer free text annotation custom fonts

Pivot Table

Tabular (Classic) Layout

The tabular (classic) layout enhances data visibility by presenting a traditional format where each row label is displayed clearly at different levels across separate columns. This layout simplifies the structural analysis of datasets by offering a detailed and organized table format. Explore this feature in the demo.

Classic layout in JavaScript Pivot Table.

Scheduler

Copy and paste events

This feature allows users to cut, copy, and paste events to other time slots. Find the demo link here

JavaScript Schedule Copy and Paste Events.

Spreadsheet

Manual calculation mode

This feature allows users to control the calculation of formulas in a spreadsheet. Calculations can be triggered manually, providing greater control over performance and accuracy when working with large datasets.

JavaScript Spreadsheet manual calculation mode

Custom data validation

This feature introduces custom data validation using formulas. Users can define validation rules based on custom formulas, tailored to specific scenarios.

JavaScript Spreadsheet custom data validation

Tab

Content loading options

This feature allows users to load tab content with different options: Dynamic, Init, and Demand. Users can load content either on initialization when the tab is activated or on demand, providing flexibility on how data is fetched and displayed.

Swipe mode

This feature allows users to enable or disable swiping tab items using mouse and touch gestures. Users can swipe left or right on the tab items to navigate between them, enhancing the user experience on touch devices.

Up arrow icon