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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
What’s New in Essential JS 2

ESSENTIAL STUDIO 2023 VOLUME 1

What’s New in Essential JS 2

2023 Volume 1 delivers powerful new features for the JavaScript suite, including a new Ribbon control, virtual scrolling in the File Manager, and support to drag and drop tasks between resources in Gantt Chart.

Common

New control

The Ribbon control has been added to Essential JS 2.

Preview to production-ready control

The Rating control has been developed to meet industry standards. It is now marked as a production-ready control for Essential JS 2.

Charts

Center label

It is now possible to place a label at the center of the pie and donut charts. Also, when the mouse pointer hovers over the pie slice, the relevant data is displayed at the center of the pie chart.

Center label

Range step area

Provided support for a new chart type called range step area which is used to display the difference between minimum and maximum values over a certain time period.

Range step area

Error bar customization

It is now possible to customize the height and color of the error bar of each data point.

Error bar customization

Circular Gauge

Right-to-left (RTL) support

The entire circular gauge, including the tooltip and legend, can now be rendered in the RTL direction, which is used in some cultures.

Right-to-left support of Essential JS 2 Circular Gauge

Word Processor

Continuous section break

This feature allows users to display a new section on the same page. The continuous section break is often used to change the number of columns for a part of content without starting a new page.

Illustration of multiple sections and multiple columns in the Word Processor component.

Drag and drop selected content

This feature allows users to drag and drop the selected content within the Word Processor component. It helps the editor move the content from one place to another.

Illustrates dragging and dropping the selected content in the Word Processor component.

Show/hide bookmarks

Show or hide the start and end of bookmarks in the Word Processor component. It displays square brackets at the beginning and end of each bookmark.

Illustrates how the start and end marks of a bookmark is displayed in the Word Processor component.

Optimize SFDT file size

The SFDT file generated by the Word Processor component is now optimized to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits,

  • File transfer between client and server through the internet gets faster.
  • The new optimized SFDT files require less storage space than the old SFDT files.

This feature comes with a public API to switch between the old and new optimized SFDT format, allowing backward compatibility.

File Manager

Virtual scrolling

This feature provides UI virtualization support for both detailed and large-icon views in the JavaScript File Manager control. With this new feature, performance is improved on initial load while loading files and folders in the view port. The remaining files and folders will be loaded dynamically while the user scrolls. Users can load a large number of files and folders within the component without any performance issues. In addition, scrolling can be done with the keyboard as well.

In the detailed view, we have added mask support to indicate the progress of loading more files while scrolling.

JavaScript File Manager with virtualization

Gantt Chart

Drag and drop tasks between resources

Allows users to drag and drop tasks between different resources in the resource view of a gantt chart. Users can easily assign tasks from one resource to another by simply dragging and dropping them within the resource view.

Taskbar drag and drop in JavaScript Gantt Chart.

Grid

Search and filter with new operators

The new operator in the search and filter feature allows users to perform precise and targeted searches on their data. These operators provide greater flexibility and control over how users can search and filter data in JavaScript Grid.

  • does not contain - Allows users to search for items that do not include certain keywords or phrases.
  • is null and is not null - Allows users to search for items that do not include certain keywords or phrases.
  • is like and is not like - Allows users to search for items that match or do not match a specific pattern using wildcards.
  • does not start with and does not end with - Allows users to search for items that do not begin or end with a specific string of characters.

JavaScript Grid filtering with new filter operators.

Autofit columns with empty space

This feature is used to render columns in a grid based on the specified width defined in the columns declaration. It means white space will be displayed in the grid instead of columns auto adjusting to fill the entire grid width if the total columns’ width is less than the grid’s width.has context menu

JavaScript Grid autofit columns with empty space

Image Editor

Undo and redo support

This feature provides undo and redo support by storing every action as an object that contains rotations, flips, annotations, as well as freehand drawings in an array. The undo and redo actions are performed based on that array.

Pinch zoom

This feature provides support to zoom in or out of the image on a touch screen device, such as a smart phone or tablet, by using two fingers to pinch or expand the screen.

Mouse wheel zoom

This feature allows zooming in or out of the image using the mouse wheel and the “Ctrl” key.

Maps

Customization of the zoom toolbar

The appearance of the buttons and tooltips in the zoom toolbar can now be customized using built-in APIs.

Zoom toolbar of Essential JS2 Maps

Drag and drop support for markers

Markers inside the Map can now be dragged and dropped in the desired location based on the requirement. Events are also fired when the drag starts and ends.

Drag and drop support for markers of Essential JS2 Maps

Pivot Table

Role option in OLAP cube

The pivot table can be bound to a SSAS OLAP cube, giving end-users access to restricted cube information such as measures, dimensions, hierarchy, and more based on their assigned role.

Progress Bar

Secondary progress customization

Provided support to customize the width and color of the secondary progress bar.

Secondary progress customization

Tooltips

It is now possible to display tooltips during initial load of progress bars and mouse hover with numeric or text values of the progress.

Progress Bar - Tooltip

Ribbon (preview)

The Essential JS 2 Ribbon control provides a structured and easy-to-use interface for users to access different features and functions, improving the overall user experience and making your application more efficient.

Key features

  • Built-in items: Several built-in support items, such as buttons, checkboxes, dropdown buttons, split buttons, combo boxes, and color pickers that can be customized and used to execute specific actions.
  • Modes: Offers the classic mode that organizes items and groups in a traditional form, and simplified mode that organizes items and groups into a single row for improved usability and reduced clutter.
  • Tooltip: Provide additional information when a user hovers over a ribbon item, improving user experience and increasing the usability of the application.
  • File menu: A built-in menu that to add file related actions easily.
  • Templates: Customize ribbon items and the help pane content using templates.

JavaScript Ribbon

Rich Text Editor

Enhanced toolbar tooltip appearance

The Rich Text Editor toolbar tooltips have been enhanced with improved appearances. These tooltips have been redesigned to more clearly display the keyboard shortcut information, making it easier for users to understand the functions of each toolbar item. Find the demo link here.

Rich text eidtor tooltip

Scheduler

XSS security option

Sanitize appointment inputs, improving the security of the Scheduler component.

Filter query

Utilize built-in filter support to filter events easily when requesting data from the server.

Timeline views without horizontal scroller

This feature allows users to see an overview of the schedule timeline without a horizontal scroller, improving the usability and accessibility of the Scheduler component.

JavaScript Scheduler without horizontal scroller.

Spanned events in timeline year view 

Render spanned events as a single event instead of separate events in the timeline year view of the Scheduler component.

JavaScript Scheduler multi-month event in timeline year view.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon