What's New in Essential Studio for Javascript

Volume 3 builds upon Syncfusion’s strong JavaScript offering. From drop-down lists to diagram tooltips, the improvements to existing controls are plentiful, and a new spreadsheet control has been added. This suite also includes a new Theme Studio for applying custom themes.


Theme Studio

The JavaScript Theme Studio provides support for applying custom themes to Syncfusion web controls. Those themes can be exported as custom CSS files. Data visualization controls are not included in the Theme Studio.

JavaScript Theme Studio


The spreadsheet control is a Microsoft Excel-like spreadsheet component for the web. It provides an editing experience very similar to Excel, and it’s able to import and export Excel workbook files.

Spreadsheet Control


The spreadsheet control supports editing directly inside cells or in the formula bar.

Editing inside a Cell

Sorting and Filtering

The spreadsheet control provides support for filtering specific data from the spreadsheet and sorting columns in ascending or descending order.

Filtered and Sorted Columns


A variety of formatting options are available for text and numbers to improve the appearance and effectiveness of any spreadsheet.

Number Formatting

Number formatting changes the appearance of numbers in a cell by using percent signs, commas, currency symbols, decimals, and more to signify different meanings.

Text Formatting

Text formatting allows users to change the font, font size, color, weight, style, alignment, and wrapping of text in a cell.


The selection feature allows users to select a single cell, a range of cells, entire rows, or entire columns in a spreadsheet. The selected data can then be manipulated.

Selected Cells


The drag-fill feature allows users to automatically fill cells with data that follows or completes a pattern based on data in other cells.

Drag-Fill Operation

Importing and Exporting

Existing Excel worksheets can be imported into the spreadsheet control and edited by users. This control supports exporting spreadsheets as .xls and .xlsx Excel worksheets, and comma-delimited value files.

Undo and Redo

The undo feature allows users to erase the most recent actions, and the redo feature reverses the recent undo actions.


Users can print the entire spreadsheet or only selected data.

Data Validation

Data validation restricts what users are allowed to enter as data. If entered data does not meet the specified criteria, an error message is displayed.

Data Validation Options

Conditional Formatting

Conditional formatting applies different formatting styles to selected cells based on conditions provided by users.

Spreadsheet Column with Conditional Formatting

Drop-Down List


The drop-down list control is a graphical pop-up element similar to a list box that allows users to choose one or multiple values from a list. When a drop-down list is inactive, it displays a single value or multiple values in an input text box.

Virtual Scrolling

The virtual scrolling feature can be used to display a large number of records in the drop-down list. For example, when using the scroll bar, an AJAX request will be sent to fetch some amount of data from the server dynamically. The number of items returned for each AJAX request can be controlled through a property. Virtual scrolling allows data to be loaded dynamically in two ways.

In normal mode, the data is only loaded when the list is scrolled to another position.

In continuous mode, the data is loaded when the scroll handle reaches the end of the scroll bar.

Items in the drop-down list can be searched to retrieve the exact item you are looking for. This feature is helpful when a large amount of data is loaded in the control.

Default Single List Selection

Drop-down list items can be configured with text alone or text and an image. When users click the text box, the list pops up with the set of items. Once selected, a corresponding item’s text will be displayed in the input text box.

Default Drop-Down List

Multi-Selection List

In multi-selection lists, drop-down list items contain check boxes. When an item is selected, the corresponding item’s text will be added to the value of the input text box. A toolbar, OK button, or Cancel button closes the drop-down list.

Drop-Down List with Multiple Selections

Grouped List Selection

Drop-down list items can be organized by groups under titles.

Grouped Drop-Down List

Data Binding with Virtual Scrolling

Drop-down list items can be rendered using a local or remote JSON data source with virtual scrolling, which initially displays fewer items to reduce DOM weight and loading time. When a user scrolls to the last item, another set of items is appended to the existing list.

Drop-Down List with Data Source

Template Support

The drop-down list provides template support, allowing any HTML markup element to be added to the list items.

Drop-Down List Template

Radial Slider


The radial slider provides an optimized way to select a numeric value using a touch interface. A tick’s value can be changed by directly selecting and moving the needle, and the value can rounded by using APIs.

Radial Slider

Start Angle and End Angle Customization

The radial slider can be displayed as any type of circle, including full and half circles, based on start and end angle values.

Customized Start and End Angles


Vertical Charts

The chart control supports vertical orientations, providing a vertical axis for applications that require vertical plotting.

Smart Labels

Smart labels are supported for Cartesian axes, enabling labels to be automatically arranged so they won’t intersect when working with a large amount of data.

Selecting Series Based on Cluster

The cluster mode allows a chart series to be selected or highlighted by hovering or clicking the series when the same points for all series are displayed.

Tree Grid


Contents of the tree grid control can be exported to PDF documents.

Pivot Grid

Defer Update

Deferring updates allows users to refresh the control on-demand instead of during every UI interaction.

Defer Update Option in PivotTable Field List

OLAP Client

Toggle Axis

An axis can be toggled to swap dimensions, measures, and named sets between columns and row axes. The OLAP chart and OLAP grid will refresh accordingly.

Before Toggling Axes

After Toggling Axes

Defer Update

Defer update support allows users to refresh the control on-demand instead of during every UI interaction.

Before Defer Update

After Defer Update


Radial Tree Layout

Nodes in the diagram control can be arranged in concentric circles around a root node.

Radial Tree Layout


The diagram control supports tooltips that appear when hovering over a node or connector, or when a node is being dragged, resized, or rotated.

Tooltip for a Node When Hovering


The diagram control provides built-in support to restore or erase recent changes made through public APIs. Multiple changes can be grouped, so they can be erased or restored all at once.

Tree Map

Drag and Drop Selection

Drag and drop selection support has been implemented in the tree map control to provide an elegant way to select treemap items.

Drag-and-Drop Selection for Tree Map


Drag and Drop Selection

Drag selection support has been implemented in the maps control to provide an elegant way to select map shapes.

Drag-and-Drop Selection for Maps Control


Agenda View

The Agenda view displays a list of appointments in a grid-like view, categorized based on the dates and resource levels. Edit and delete options have also been included, which appear when the pointer hovers over an event. By default, seven days are displayed in the Agenda view, but the number of days displayed in it can be customized.

Appointment Tooltips

The tooltip feature allows appointment details to be displayed on mouse over. Tooltips can be customized using templates.

First Day of Week

The first day of the week in the Week and Work Week view can be customized in the schedule.

Work Week Customization

The Work Week view can be customized with a set of user-defined days. For example, the Work Week view can be displayed to start on Tuesday and end on Saturday.

Appointment ID Types

The schedule control has been enhanced to allow appointment IDs to accept any data type, including integers, strings, and GUIDs.

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.