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 React

ESSENTIAL STUDIO 2018 VOLUME 3

What’s New in Essential JS 2 for React

Enrich your upcoming React projects with new menus, progress buttons, dark themes, and the Scheduler control, now in its final version.

Common

New Components

The following components have been added to Essential JS 2 for React:

The Menu component is a graphical user interface that serves as a navigation header for your application or site. It supports data binding, templates, multilevel nesting, and horizontal and vertical orientation.

EJ 2 Menu component preview.

Progress Button

The progress button visualizes the progression of an operation to indicate to the user that a process is happening in the background. The progress can be shown with graphics accompanied by text.

EJ 2 Progress Button component preview.

Dark themes

Dark theme support has been added to existing Essential JS 2 themes and is available in Theme Studio.

Chart

Striplines

Support for segmented, dashed, and recurrence striplines have been provided to the chart.

Stripline

Pareto

Pareto series type has been added to chart.

Pareto

Axis label trim

Allows the users to trim axis labels to increase plot area of the chart.

Axis Label

Subtitle

Allows users to add subtitles to the chart.

Subtitle

Datetime label format

Label format for datetime axis has been improved for better readability of charts. For example, when the interval type of the axis is month, then the label for the first month of the year will display month and year, followed by months.

DateTime Axis

Broken slice

Allows users to split grouped slices in a pie chart.

Broken Slice

Animation

Now, the chart series can be animated on its visibility collapse using legend click.

Circular Gauge

Rounding the corners of ranges

You can now round the corners of ranges and the range bar pointer.

Circular range with rounded corners

Diagram

Label interaction

Interaction support has been provided for labels. They can be selected, dragged, resized, and rotated.

Label interaction

Document Editor

Page break

The document editor allows users to insert page breaks in a document.

Page break support in Document Editor

File Upload

Directory upload

The React file upload component allows users to upload all files in a directory (folder) to a server. This feature processes all the files and subfolders in a selected folder.

Directory upload

Directory upload

Paste upload

Users can upload images automatically to a server on pasting them from the clipboard in the file upload component.

Grid

Dialog and inline edit template

Users can have complete control over the edit form using the dialog and inline template features which allow customizing the edit form used to edit grid records. This allows users to add or modify records that are not present in column schema.

Dialog template and inline template editing in datagrid

Reactive aggregate update

When using batch editing, the aggregate values will be refreshed with the edited values before the bulk save operation. The group footer and caption aggregate values will also be refreshed with the new values for every cell value change.

Filter template support

An Angular component can be used as a custom filter UI to filter grid rows for a column.

Edit template support

An Angular component can be used as a custom editor for a column.

Grouped rows outlined in Excel exporting

Grouped grid rows are now outlined in the exported Excel document so that they can be used to hide grouped data for better reporting.

Additional checkbox selection behavior

A new checkbox selection mode has been added. It can be enabled to multi-select rows only with checkboxes and clicking a row will reset the selection, similar to selecting an item in Windows Explorer.

Windows Explorer-like checkbox selection in DataGrid control.

All option added in page size dropdown

An All option has been added to the page-size dropdown for fetching and displaying all available records from a given data source.

Support with All options in pager dropdown

Heatmap

Bubble Heatmap

You can now visualize data in the Heatmap control using the bubble-tile type. Bubble parameters such as size, shade, and sector can be used to visualize data.

Bubble heatmap

Smart legend

A fixed-palette legend type has been implemented in the Heatmap control to smartly display legend labels.

Smart legend support

Calendar Heatmap

You can now visualize calendar data in the Heatmap control using axis label customizations.

Calendar heatmap support

List View

Built-in CSS classes for template customization

You can now customize or prettify the list items with built-in CSS classes to display multi-line text, avatar and badge in the applications mail, contact, outlook, and more.

React ListView with multi-line text

Pivot Grid

Conditional formatting

Allows users to define condition based on value in order to format grid cell’s font style, font color, background color, border, and more.

Format pivot grid based on condition or criteria

Virtual scrolling

Now, large amount of raw data can be loaded into the pivot grid, aggregated, and viewed on-demand through horizontal and vertical scrollbar options with ease.

Virtual scrolling for better performance while loading large data

Label and value filters

Pivot grid headers and value cells can now be filtered using complex filter criteria with the help of label and value filters option similar to Microsoft Excel.

Label filters in Pivot Grid Value filters in Pivot Grid

Rich Text Editor

Image resize

Image resize support has been given for Rich Text Editor. Images in the editor can be resized manually by dragging its corners in the required direction.

Angular Rich Text Editor with image resize

Insert tables

Insert table support has been given for HTML Editor that includes the following sub features:

  • Create and modify tables, table rows, and columns.
  • Resize rows and columns.
  • Quick toolbar interaction.
  • Table header and custom styles.

Angular Rich Text Editor with Table

Schedule

Timeline view

Displays the day, week, workweek, and month view layouts in timeline mode by illustrating both the date and time intervals in a horizontal orientation. It also organizes and displays multiple resources in a hierarchical tree structure based on the grouping levels.

Scheduler with timeline view

Header rows

Add custom header rows in timeline views to depict an individual row for displaying the corresponding year, month, week number, and dates.

Timeline scheduler with custom header rows

Drag and drop

Appointments can be easily rescheduled to another time by dragging and dropping them onto the required time slots.

Scheduler displaying event drag action

Resize

An appointment’s time can be easily extended by resizing its start or end handles.

Scheduler displaying event resize action

Other enhancements

  • Display the week number of the current date beside the date header section.

    Scheduler displaying week number

  • We’ve provided template support for customizing a pop-up that opens when cells or appointments are selected.
  • The data type of the appointment ID field has been made compatible to accept both string and number type values.

Text box

Text box as React component

The text box can be rendered as a separate React component to add floating labels. This version of the component supports all the features available in the pure CSS version of the text box.

Text box

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