What's New in Essential Studio for Javascript

The JavaScript suite includes a File Explorer control that can be used to manage files in any application, and annotations are now supported in the Chart control. A responsive layout has been added to the OLAP Chart, OLAP Gauge, and OLAP Client controls. A gallery feature has been added to view elements in the Ribbon control, and AngularJS support has been implemented for all JavaScript mobile controls.

File Explorer

File Explorer adds Windows Explorer-like functionality to any web application. It allows end-users to access and manage a file system through the web. Tree, grid, and thumbnail options are used to view the files. Users can perform operations like adding a new folder, renaming, searching, sorting items, uploading files, and getting item details, and users can change folder structure by copying, moving, and deleting files or folders. File Explorer layout and management capabilities are fully customizable and can be disabled or enabled when necessary.

File Explorer in Thumbnail View
File Explorer in Thumbnail View
File Explorer in Grid View
File Explorer in Grid View

Chart

100% Stacking Column

The 100% stacking column series displays multiple data series stacked as columns. The cumulative portion of each stacked column equals 100%.

100% Stacking Column Series
100% Stacking Column Series

100% Stacking Bar

The 100% stacking bar series displays multiple data series stacked as bars. The cumulative portion of each stacked bar equals 100%.

100% Stacking Bar Series
100% Stacking Bar Series

100% Stacking Area

The 100% stacking area series displays multiple data series stacked as areas. The cumulative portion of each stacked area totals 100%.

100% Stacking Area Series
100% Stacking Area Series

3-D 100% Stacking Column

The Chart control adds support for 100% stacking column charts in 3-D mode.

100% Stacking Column in 3-D Mode
100% Stacking Column in 3-D Mode

100% Stacking Bar

The Chart control adds support for 100% stacking bar charts in 3-D mode.

100% Stacking Bar in 3D Mode
100% Stacking Bar in 3D Mode

Trimming Axis Titles

Support for trimming axis titles allows you to abbreviate long titles. When the pointer hovers over the abbreviated title, the full title is displayed as a tooltip.

Trimmed Title
Trimmed Title

Trimming Axis Labels

Support for trimming axis labels allows you to display abbreviated labels, avoiding overlap with other labels. When the mouse pointer hovers over the abbreviated label, you can see the full label as a tooltip.

Trimmed Axis Label
Trimmed Axis Label

Annotation

The Chart control adds support for annotations with text or other content.

Annotation
Annotation

BulletGraph

Trimming Labels

The BulletGraph control adds support for trimming title, subtitle, and indicator text when the label overlaps the scale group.

Trimmed Label
Trimmed Label

Label Position

The BulletGraph control can place the caption, subtitle, and indicator text in predefined positions, such as the left, top, right, or bottom.

Label Position
Label Position

RangeNavigator

Thumb Template

The RangeNavigator control adds support for customizable thumbs with the required template.

Thumb Template
Thumb Template

TreeMap

Color Mapping Enhancement

Enhanced color mapping can be applied to groups as well as the TreeMap control, providing a good way to measure growth in groups.

Color Mapping in Groups
Color Mapping in Groups

ReportViewer

Page Setting

Using this feature, the size, orientation, and margins of a report can be managed at run time.

Page Setup
Page Setup

Parameter Block Customization

The ReportViewer adds an option to customize its parameter block to bind parameter data to the desired control and change its appearance.

Parameter Block Customization
Parameter Block Customization

Interactive Sorting

Tablix support allows sorting columns at run time.

Column Sorting
Column Sorting

Ribbon

Resizing

The Ribbon control adds support for all levels of automatic resizing with group controls. The group controls are represented by a custom drop-down button and can be viewed by expanding the button.

Ribbon Resizing
Ribbon Resizing

Gallery

The Ribbon control includes gallery support to save space by grouping buttons together, providing an alternative for graphically presenting options on the ribbon.

Ribbon with Gallery
Ribbon with Gallery

Custom Tooltip

The Ribbon control provides custom tooltip support so users can customize tooltips for ribbon buttons, split buttons, drop-down menus, toggle buttons, and gallery controls with a title, control description, and image to represent the control.

Ribbon with Custom Tooltip
Ribbon with Custom Tooltip

AngularJS Support

The Ribbon control adds AngularJS support, allowing HTML as the template language and extending HTML’s syntax to express all the ribbon features, like application tabs, contextual tabs, or the gallery.

Angular Support for the Ribbon
Angular Support for the Ribbon

Gantt

Column Chooser

The Gantt control supports enabling and disabling the visibility of columns dynamically.

Column Menu with Column Chooser
Column Menu with Column Chooser
Gantt Control with Column Chooser
Gantt Control with Column Chooser

Splitter Position

The splitter allows changing its position while loading the Gantt control for both pixel and percentage values.

Gantt with Splitter
Gantt with Splitter
Gantt with 30% Splitter Position
Gantt with 30% Splitter Position
Gantt with 600 Pixel Splitter Position
Gantt with 600 Pixel Splitter Position

TreeGrid

Drag-and-Drop Rows

The TreeGrid control adds support for drag-and-drop rows or reordering rows dynamically where they can be inserted above, below, as a sibling, or as a child to the existing row.

TreeGrid with Drag-and-Drop Rows
TreeGrid with Drag-and-Drop Rows

Column Chooser

The TreeGrid control adds support for enabling or disabling the visibility of columns dynamically.

Column Menu with Column Chooser
Column Menu with Column Chooser
TreeGrid with Column Chooser
TreeGrid with Column Chooser

Schedule

Adaptive Rendering

This built-in adaptive feature allows the Schedule control to be accessed from any mobile device. Based on the screen size of the device (mobile, desktop, or tablet), the Schedule control is rendered accordingly with its specific layout design.

Schedule Displaying Default View in Mobile Mode
Schedule Displaying Default View in Mobile Mode
Schedule Displaying Multiple Resources in Mobile Mode
Schedule Displaying Multiple Resources in Mobile Mode

Performance Improvement

Performance enhancements in the Schedule control reduce the time taken to load a schedule with multiple resources, and they also reduce the overall rendering time when it is loaded with a large number of appointments. This enhancement allows quick rendering of `n’ number of resources with ‘n’ number of levels either in horizontal or vertical mode.

Circular Gauge

Gauge Positioning

A semicircular gauge can be positioned within the Canvas element, providing a better appearance for the gauge. The possible positions are top left, top center, top right, middle left, center, middle right, bottom left, bottom center, and bottom right.

Semicircular Gauge in Center Position
Semicircular Gauge in Center Position

Pointer-Value Text

The gauge pointer-value text is used to display the current value of the pointer in a circular gauge. By using the API, the text can be positioned at the center of the circular gauge. It is possible to disable or enable the pointer’s value text and the customization option for that text value, including color, font, angle rotation, and opacity.

Circular Gauge with Pointer Value Text
Circular Gauge with Pointer Value Text

Diagram

Enhanced Organizational Chart Layout

The Diagram control adds specific and customizable layout support for organizational charts. Organizational charts can be customized in the following ways:

  1. Child node orientation (either vertical or horizontal).
  2. Direction of child node arrangement (either left, right, center, or alternate).
  3. Horizontal and vertical spacing between child nodes.
  4. Assistant nodes.

Team Organizational Chart
Team Organizational Chart
Business Management Organizational Chart
Business Management Organizational Chart
Project Management Organizational Chart
Project Management Organizational Chart
University Organizational Chart
University Organizational Chart

Built-In Shapes

The Diagram control adds built-in support to for complex, application-specific shapes. It includes the following shapes:

  1. Basic
  2. Flowchart
  3. BPMN

Built-in Shapes
Built-in Shapes

Text Wrapping

The Diagram control adds the following text-wrapping options for labels:

  1. Character-based wrapping.
  2. Word-based wrapping.
  3. No Wrapping.

Character-Based Wrapping
Character-Based Wrapping
Word-Based Wrapping
Word-Based Wrapping
No Wrapping
No Wrapping

Phase

The Diagram control adds phase support for swim-lane diagrams.

Phases in a Swimlane Diagram
Phases in a Swimlane Diagram

Drawing Tools

Shapes can be drawn on a diagram by clicking and dragging a tool.

Diagram Drawing Tools
Diagram Drawing Tools

HTML Binding

The Diagram control adds support to form a diagram from an HTML table with the flexibility to convert a table to a diagram with the help of the data manager.

HTML Diagram
HTML Diagram

PivotGrid

Responsive Layout

Responsive layouts provide an optimal viewing experience—easy reading and navigation with minimal resizing, panning, and scrolling—across a wide range of devices. A responsive layout using default functionality can be achieved by simply enabling the API.

Level 1 of Responsive Pivot Grid—Resizing to the Right
Level 1 of Responsive Pivot Grid—Resizing to the Right
Level 2 of Responsive Pivot Grid—Resizing to the Right
Level 2 of Responsive Pivot Grid—Resizing to the Right
Level 3 of Responsive Pivot Grid—Resizing to the Right
Level 3 of Responsive Pivot Grid—Resizing to the Right
Level 4 of Responsive Pivot Grid—Resizing to the Right
Level 4 of Responsive Pivot Grid—Resizing to the Right

OLAP Client

Responsive Layout

Responsive layouts provide an optimal viewing experience—easy reading and navigation with minimal resizing, panning, and scrolling—across a wide range of devices. A responsive layout can be achieved using default functionality by simply enabling the API.

OLAP Client Responsive View—Complete
OLAP Client Responsive View—Complete
OLAP Client Responsive View—Resizing to the Left
OLAP Client Responsive View—Resizing to the Left

OLAP Chart

Responsive Layout

Responsive layouts provide an optimal viewing experience—easy reading and navigation with minimal resizing, panning, and scrolling—across a wide range of devices. A responsive layout can be achieved using default functionality by simply enabling the API.

Responsive OLAP Chart—Complete
Responsive OLAP Chart—Complete
Responsive OLAP Chart—Resized
Responsive OLAP Chart—Resized

OLAP Gauge

Format Support for Labels

Formatted labels enhance the OLAP gauge’s appearance and focus attention on specific data in the label and tooltip. The formatting changes the appearance of the data, but does not change the actual value of the data. For example, formatting numbers to display only two decimal places does not shorten or round values with more than two decimal places. This control provides various formatting options for labels.

Default Formatted Label
Default Formatted Label
Notation Formatted Label
Notation Formatted Label

Mobile Controls

AngularJS

AngularJS support for all Essential Studio for JavaScript mobile controls helps developers simplify coding and render controls as fast as possible, which is especially useful for mobile devices. It also means controls are highly customizable.

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.