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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
What’s New in Essential JS 2 for Vue

ESSENTIAL STUDIO 2018 VOLUME 4

What’s New in Essential JS 2 for Vue

With Volume 4, you can edit and save data at runtime in Pivot Grid, use new controls such as TreeGrid and StockChart, and take advantage of the final versions of the Pivot Table, Document Editor, and Diagram controls.

What's New | Essential JS 2 for Vue | Common | Syncfusion

Common

New components

The following components have been added to Essential JS 2 for Vue.

Chip

The Chip component contains a small block of essential information that triggers an event on click action. It also contains the primary text, an image, or both, and is mostly used in mail, contacts, or filter tags.

  • Input chip — Basic chip with a delete icon that represents a person or entity and enables the removal of chips from the chip list collection.
  • Choice chip — Used to select an option from those available.
  • Filter chip — Used to select multiple options from those available.

Syncfusion Vue Chip component preview.

In-place Editor

The In-place Editor control is used to edit an element in place with inline and pop-up modes. The control has built-in support to handle all form controls such as text box, drop-down list, date picker, and rich text editor.

Syncfusion Vue In-place Editor component preview.

PDF Viewer

The PDF Viewer component enables you to view and print PDF files:

  • Both normal and PDF files protected with AES and RC4 encryption can be opened and displayed.
  • Core interactions are included: scrolling, zooming, panning, and page navigation.
  • Built-in toolbar.
  • Text can be selected and copied from PDF files.
  • Text can be easily searched for across the PDF document.
  • Easy navigation with the help of bookmarks, thumbnails, hyperlinks, and a table of contents.
  • Two view modes are included: fit-to-page and fit-to-width.
  • An entire document or a specific page can be printed directly from the browser.

Syncfusion Vue PDF Viewer component preview.

Query Builder

The Query Builder component is a graphical user interface that allows you to create and edit filters. It outputs a structured JSON of filters that can be easily parsed to create SQL. The control is integrated with Data Manager to communicate with a data source and returns the desired results based on the provided filter. It supports data binding, templates, and horizontal and vertical orientations.

Syncfusion Vue QueryBuilder component preview.

Splitter

The Splitter component is a layout user interface (UI) control that has resizable split panes. The container splits into multiple panes that are oriented horizontally or vertically. The separator (divider) splits the panes and is used to resize panes. Place the Splitter control inside a split pane to make a nested layout user interface.

Syncfusion Vue Splitter component preview.

TreeGrid

The Essential Studio JavaScript TreeGrid is a feature-rich control used to visualize self-referential hierarchical data effectively in a tabular format. Its rich feature set includes many functionalities: data binding, editing, sorting, filtering, grouping, paging, aggregating rows, and exporting to Excel, CSV, and PDF formats.

Syncfusion Vue TreeGrid component preview.

StockChart

The StockChart is a feature-rich control used to track and visualize the stock price of any company for a specific period using charting and range tools. Its rich feature set includes many functionalities: data binding, tooltip, crosshair, zooming, panning, and exporting to image and PDF formats. All stock elements are rendered by using Scalable Vector Graphics (SVG).

Syncfusion Vue StockChart preview.

Preview to production

The following components have been moved from preview to production in Essential JS 2 for Vue:

What's New for Vue Calendar Control | Syncfusion

Calendar

Islamic Calendar

In addition to the Gregorian calendar, the Calendar control supports displaying the Islamic calendar (Hijri calendar).

Vue Islamic Calendar.

What's New for Vue Chart Component | Syncfusion

Chart

Lazy loading

Load a chart with data on demand.

Lazy loading.

Pie radius

Pie chart now supports different radii for each slice.

Pie chart with different radius.

Pie center

Change the center of the pie.

Pie chart with center option.

Gridline and axis label animation

Chart now supports gridline and axis label animation on legend click.

What's New for Vue Circular Gauge Component | Syncfusion

Circular Gauge

Radius calculation based on start and end angles

The radius of the circular gauge will be calculated based on the start and end angles to avoid excess white space while rendering semi or quarter circular gauge.

Vue Semi-Circular Gauge

What's New for Vue Diagram Component | Syncfusion

Diagram

UML Class Diagram

This feature allows users to create a UML class diagram through code or a visual interface with the built-in class diagram shapes.

Create a UML class diagram with the built-in UML class diagram shapes

UML activity diagram

This feature allows users to create a UML activity diagram through code or a visual interface with the built-in activity shapes.

Create a UML activity diagram with the built-in UML activity shapes

Drag limit support for connector’s annotations

This feature allows users to limit the label positions while dragging a label from the connector.

CRUD

This feature allows the users to generate a diagram by reading the data from the database, and updating the database with the newly inserted/updated/deleted nodes and connectors.

Virtualization

This feature allows users to render a large number of nodes and connectors in a diagram for effective performance.

What's New for Vue Dialog Component | Syncfusion

Dialog

Resizable dialog

Resize modal and non-modal (modeless) dialogs. The dimensions of a dialog can be adjusted dynamically using this feature.

Resizable dialog

What's New for Essential JS2 Vue DocumentEditor | Syncfusion

DocumentEditor

Right to left

The DocumentEditor now supports right to left flow direction for all UI elements like the find and replace pane, dialogs, and more.

Right-to-left flow support in DocumentEditor

IME support

The DocumentEditor now supports input method editor (IME) that allows entering complex languages like Japanese, Chinese, etc.

IME support in DocumentEditor

What's New for Vue File Upload Component | Syncfusion

File Upload

Sequential upload

The File Upload component processes files sequentially from the queue instead of trying to upload all the files at once.

Grid

Row drag and drop

Drag and drop grid rows within the Grid to change row positions dynamically in the UI.

Row drag and drop within a grid.

Row spanning

This feature allows the user to span adjacent rows using grid events.

Row spanning in a data grid.

Printing hierarchy

Print ‘n’ levels of child grids.

Exporting grid hierarchy in Excel, CSV, and PDF

Export ‘n’ levels of child grids to Excel, CSV, and PDF formats.

Add new row

Add a new row at the bottom of a grid in the UI.

Add new row at the bottom.

What's New for Vue Heatmap Chart Component | Syncfusion

Heatmap Chart

Axis label grouping

Group multilevel axis labels in heatmaps.

Multilevel axis labels

Legend selection

Toggle cell visibility in heatmaps by selecting legend items in the legend.

Legend selection

Cell selection

Select a single cell or multiple cells using mouse interactions in heatmaps.

Cell selection

What's New for Vue Maps Component | Syncfusion

Maps

Color mapping enhancements

Now, apply desaturation color mapping for the shapes in Maps along with gradient colors for legend items.

Vue Maps with Desaturation color mapping

Legend enhancements

It is possible to display only the desired legend items for color mapping and to bind legend text from the data source.

Vue Maps with legend

Selection and highlight

Select or highlight the legend items similar to the shapes in Maps.

Vue Maps with selection

What's New for Essential JS2 Vue Pivot Grid | Syncfusion

Pivot Grid

Editing and updating

End users can edit raw items at runtime, simultaneously updating the control.

Editing

Drill-through

Provides support to easily obtain the list of raw items for a particular value cell or summary cell.

Drill Through

Filter dialog

In the filter dialog, provided support to limit display field values and search options to work with large data without any performance constraint.

Editor Paging

Allows users to retrieve information about a particular cell through a hyperlink cell click. It also allows users to perform custom operations programmatically.

Hyperlink

Defer update

End users can refresh the control on-demand rather than during every UI interaction.

Defer Update

Show/hide totals

Provided support to show or hide subtotals and grand totals for rows and columns.

Hide Totals

Aggregations

More aggregation types like distinct count, product, index, population stdev, sample stdev, population var, sample var, running totals, difference from, % of difference from, % of grand total, % of column total, % of row total, % of parent total, % of parent column total, and % of parent column total have been added.

Aggregations

What's New for Vue Rich Text Editor Component | Syncfusion

Rich Text Editor

Markdown table

This feature allows users to add tables with rows and columns in the Markdown editor.

What's New for Vue Scheduler Control | Syncfusion

Schedule

Context menu

Context menu can be used with Scheduler now, which opens when the cells or appointments are right-clicked.

Vue Scheduler with Context menu.

Block time intervals

A specific time range can be blocked to prevent the creation of appointments in that time slot.

Vue timeline Scheduler with blocked time slots.

External drag and drop

Drag and drop appointments from Scheduler to external sources and vice versa.

Vue Scheduler displaying external drag-and-drop action.

Read-only events

Specific events can be made read-only on Scheduler, restricting any CRUD action.

Vue Scheduler displaying read-only events.

Virtual scrolling

Load resources and appointments of timeline views virtually on every scroll action.

Improvements on drag action

You can drag appointments on mobile devices using the tapHold event. Now, we’ve made improvements to achieve smooth scrolling and auto-navigation across a date range while dragging appointments to the extremities.

What's New for Tab Control | Vue | Syncfusion

Tab

Vertical Tab

Provided vertical orientation support in the Tab control, which arranges tab items from top to bottom. The header is positioned at the left or right edges of the Tab control.

Vue Vertical Tab

What's New for Vue TreeMap Component | Syncfusion

TreeMap

Color mapping enhancements

Now, apply desaturation color mapping for the items in TreeMap along with gradient colors for legend items.

Vue TreeMap with Desaturation color mapping

Legend enhancements

It is possible to display only the desired legend items for color mapping and to bind legend text from the data source.

Vue TreeMap with legend

Selection and highlight

Select or highlight the legend items similar to the items in TreeMap.

Vue TreeMap with selection

What's New | Essential JS 2 for Vue | TreeView | Syncfusion

TreeView

AutoCheck

Provided an option to prevent automatic check/uncheck of the TreeView parent and child checkboxes. Now, each checkbox will act independently.

AutoCheck option for tree nodes

Hierarchical data type support in remote data source

Now, you can use hierarchical data from remote services in the TreeView control.

Load on demand

Provided an option to disable the load-on-demand support in TreeView control.

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