What's New in Essential Studio for Javascript

Our Volume 2 release brings many updates to our JavaScript suite, including an online IDE-like environment that quickly creates JavaScript samples, and Bootstrap dimension support for all JavaScript controls. We are also adding numerous features to many of our existing controls.


Syncfusion JavaScript Playground

The Syncfusion JavaScript Playground is an online JavaScript IDE-like environment that greatly simplifies the process of creating quick samples using Essential Studio for JavaScript. All the script references of Essential Studio for JavaScript and popular third-party frameworks are readily available in the application, allowing users to type their code directly into it. Samples created in the JavaScript Playground can be seamlessly shared with others.


The following features are available in the Syncfusion JavaScript Playground:

  • Live output preview within the browser.
  • Downloadable samples for offline editing.
  • Getting started tutorials for Essential Studio for JavaScript.

JavaScript Playground

JavaScript Playground with Framework Switcher


Highlighting Series and Data Points

The Chart control supports highlighting series and data points when the pointer hovers over them. The highlighting is added by changing the data point’s color or fill pattern.

Column Chart with Highlighted Column

Exporting Chart to Excel

Charts created with the Chart control can be exported to the Excel file format.

Chart Exported to Excel

Trimmed Data Labels

The Chart control supports trimming data labels when their text extends beyond the chart area. The complete data label text is displayed in a tooltip when the pointer hovers over the trimmed label.

Doughnut Chart with Trimmed Labels

Trend Lines

The Chart control supports linear, exponential, logarithmic, polynomial, and power trend lines.

Linear Trend Line

Exponential Trend Line

Logarithmic Trend Line

Power Trend Line

Polynomial Trend Line


Drop-down Column Filtering

The TreeGrid control supports drop-down column filtering.

Drop-down Filter Menu

Summary Rows

The TreeGrid control supports displaying record summaries at different levels in the hierarchy.

Summary Rows in the TreeGrid Control

Detail Templates

The TreeGrid control supports displaying detailed views of additional information in each row.

Rows with Detail Templates


Delete Appointment on Mouse Hover

Appointments can be deleted quickly and easily through an optional hovering delete icon, which requires confirmation from users before deleting any appointments.

Delete Icon Displayed on Mouse Hover

Show or Hide TimeScale

The timescale in the Schedule control can be shown or hidden. Hiding the timescale will display all appointments continuously under their respective dates, regardless of the specific time frame.

Schedule with hidden TimeScale

Show or Hide Schedule Header Bar

The header bar of the Schedule control can easily be set to be shown or hidden. When hiding the header bar, View and Date navigation options will not be displayed.

Schedule with hidden Header Bar

Daylight Saving Time with Start UTC and End UTC

Two new fields have been added to appointment collection source names, startUTC and entUTC, allowing you to set or pass the custom UTC value for particular appointment records. Based on the system time zone, daylight savings time (DST) applies to all appointments in the DST period.

Circular Gauge

Pointer Image Support

The Circular Gauge control supports using images as gauge pointers. Instead of drawing different shapes in the gauge, the pointer can easily be replaced by an image using ImageURL API. Normally, circular gauges have two types of pointers: marker pointers and needle pointers. The pointer image feature has been extended to both types.

Customized Pointer Images


Backstage Page

The Ribbon control for JavaScript features backstage page support. The backstage page provides a rich, customizable user interface similar to the Office 2013 Backstage view. The left side of the backstage page contains tabs, button items, and a close button, and the right side of the page contains user control items that correspond with the selected backstage tab.

Backstage Page

ListView (Mobile)

Pull to Refresh

The pull to refresh feature in the mobile ListView control refreshes the page without requiring any additional user interaction elements. Using this feature, the page can be refreshed by detecting a scrolling gesture on the page.

Platform: iOS

Before the Refresh Threshold is Crossed on an iOS Device

After the Refresh Threshold is Crossed on an iOS Device

Platform: Windows Phone

Before the Refresh Threshold is Crossed on a Windows Phone Device

After the Refresh Threshold is Crossed on a Windows Phone Device

Platform: Android

Before the Refresh Threshold is Crossed on an Android Device

After the Refresh Threshold is Crossed on an Android Device


Custom Undo and Redo

The undo and redo functionality in the Diagram control can be extended at the application level by pushing custom objects into the history manager. This will help provide undo and redo capabilities to APIs used in the application.


Drill-Up and Drill-Down Support for Relational Data Sources

UI-level drill-up and drill-down operations allow end users to expand and collapse entire rows or columns individually. This can be performed by using expand and collapse options in header cells.

Collapsed PivotGrid Control

Expanded FY 2005 Row

Cell Selection

The PivotGrid control provides support to select specific ranges of value cells and display them in a format based on customer convenience.

Cell Selection in the PivotGrid Control

Chart Series Based on Selected Cells

Conditional Formatting

Conditional formatting in PivotGrid control allows users to define conditions that, when met, format a value or summary cell’s font, color, and border.

Conditional Formatting Rules

PivotGrid Control with Conditional Formatting

The grid in the previous figure is formatted with the following three conditions:

  • Values less than 10,000 are marked gold.
  • Values greater than 2,500,000 and less than 3,000,000 are marked green.
  • Values greater than 5,000,000 are marked yellow.

Grouping Bar

Grouping bar support in the PivotGrid control allows users to filter, sort, and remove members of relational data loaded in the PivotGrid control. The grouped report can also be changed dynamically using drag and drop operations.

Grouping Bar


Contents of the PivotGrid control can be exported to PDF, Word, and CSV files.

PivotGrid Control Exported to PDF

PivotGrid Control Exported to Word

OLAP Chart


The OLAP Chart control can be exported to the following formats:

  • Excel
  • Word
  • PDF
  • CSV
  • PNG
  • EMF
  • GIF
  • JPG
  • BMP

Exported OLAP Chart in Excel

Exported OLAP Chart in PDF

Exported OLAP Chart in PNG Format

OLAP Client


Content in the OLAP Client control can be exported to Word and PDF documents.

Word and PDF Export Options

Exported OLAP Chart and PivotGrid Control in Word

Exported OLAP Chart and PivotGrid Control in PDF

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.