Essential Studio for JavaScript

Essential Studio for JavaScript now has DropDownButton and Ribbon controls, and the Chart control has been equipped with ten technical indicators. The Grid, TreeGrid, Diagram, and Schedule controls have also been enhanced.

Chart

Technical Indicators

The Chart control now supports the following 10 technical indicators:

  • Relative Strength Index
  • Momentum
  • Bollinger Band
  • Accumulation Distributios
  • Exponential Moving Average
  • Simple Moving Average
  • Stochastic
  • Average True Range
  • Moving Average Convergence Divergence
  • Triangular Moving Average

Relative Strength Index Indicator
Relative Strength Index Indicator
Momentum Indicator
Momentum Indicator
Bollinger Band Indicator
Bollinger Band Indicator
Accumulation Distribution Indicator
Accumulation Distribution Indicator
Exponential Moving Average Indicator
Exponential Moving Average Indicator
Simple Moving Average Indicator
Simple Moving Average Indicator
Stochastic Indicator
Stochastic Indicator
Average True Range Indicator
Average True Range Indicator
Moving Average Convergence Divergence Indicator
Moving Average Convergence Divergence Indicator
Triangular Moving Average
Triangular Moving Average

Grid

Adaptive Rendering

The adaptive grid feature makes the Grid control adaptable to all device sizes, including phones and tablets. The adaptive feature supports two display modes, Normal and Details.

Adaptive Normal View
Adaptive Normal View
Adaptive Details View
Adaptive Details View

Stacked Headers

Stacked headers are additional headers that span multiple columns, often used to further organize column headers. Stacked headers make information easier to understand, and allow users to further group grid data.

Grid with Stacked Header
Grid with Stacked Header
Stacked Header with Grouping
Stacked Header with Grouping

Schedule

Import Appointments

ICS files generated from Microsoft Outlook, Google Calendar, and even the Syncfusion Schedule control can be easily imported into the Schedule control.

Schedule with Imported Appointments
Schedule with Imported Appointments

Custom Date Rendering

The Schedule control can be rendered with user-specific date ranges. Only the user-specified dates will be rendered initially in the Schedule control.

Schedule with User-Specified Date Ranges
Schedule with User-Specified Date Ranges

Ribbon

Split Button Vertical mode, Toggle Button and Custom Control supports are provided with Ribbon.

Ribbon Control
Ribbon Control

DropDownButton

The new DropDownButton control consists of a single button that displays a drop-down list of items when clicked. The list of items can be displayed from the left, right, top, or bottom of the button.

DropDownButton Control
DropDownButton Control

DropDownList

Template Support

Custom content templates enable other controls to be used inside the drop-down list.

Check Boxes Added to Drop-Down List
Check Boxes Added to Drop-Down List

Gantt

Timeline Validation

The Gantt control dynamically updates the schedule header start and end dates when any task’s start or end date is changed through cell editing, taskbar editing, dialog editing, or a toolbar operation.

Validating Schedule Dates
Validating Schedule Dates

TreeGrid

Row Template

Rows can be customized through the use of templates.

Tree Grid with Row Template
Tree Grid with Row Template

Column Filtering

Tree grid records can be filtered using individual or multiple columns.

Column Filtering
Column Filtering

Context Menu

A context menu has been added to the TreeGrid control to provide quick access to common operations.

Context Menu
Context Menu

Toolbar

The TreeGrid control supports a toolbar that contains options for adding, deleting, and editing records.

Toolbar
Toolbar

Diagram Control

Line Bridging Direction

The line bridging direction for connectors can be set to top, bottom, left, or right.

Line Bridge Direction Set as Top and Bottom
Line Bridge Direction Set as Top and Bottom

JsRender for HTML and Native Node

JsRender can be used to create UI templates, which can then be used as a node’s content.

Diagram Node Template Created with JsRender
Diagram Node Template Created with JsRender

Connector Padding

Connector padding allows users to adjust the space between a connector’s end point and the object it is connected to, whether it is a node, group, or connection port.

Padding between Line Connector End Points and Objects
Padding between Line Connector End Points and Objects

Improvements

  • A new selector API has been added for iterating and manipulating selected items.
  • Knockout and AngularJS support has been added for Selector, Model Node, and Connector properties.
  • Node templates have been added for customizing node appearance.

Report Viewer

Fit to Width, Height, or Both

The Report Viewer now supports fitting content to a page’s width, height, or both.

Report before Fit to Width
Report before Fit to Width
Report after Fit to Width and Height
Report after Fit to Width and Height