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. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
What’s New in Syncfusion React UI Components

ESSENTIAL STUDIO 2022 VOLUME 2

What’s New in Syncfusion React UI Components

2022 Volume 2 ensures that all our React components are compatible with React 18. Other improvements include multiple Bezier connector editing points in the Diagram control, and TreeGrid row drag and drop with virtualization.

Common

React 18 support

Syncfusion React components are now compatible with React version 18. Check out our live React demos that have been upgraded to React 18.

License registration improvements

This feature allows the license key to be registered for the React platform by using the npx command. Follow these steps to register the license using the npx command:

  1. Install the Syncfusion packages from npm.

  2. Add the license key either in the environment variable SYNCFUSION_LICENSE or in the text file syncfusion-license.txt.

  3. Run the command npx syncfusion-license activate to register the license automatically.

Dart Sass support

Syncfusion EJ2 component Sass files are compiled using Dart Sass instead of node-sass. This change has been made since node-sass has been deprecated.

Production-ready components

The Carousel component has been developed to meet industry standards. It is now marked as production-ready for React.

React Carousel component demo

React Carousel component documentation

Pause on hover

This feature allows users to play or pause the slides when hovering the mouse pointer over the Carousel element.

Charts

Keyboard navigation

This feature allows users to use the keyboard to navigate through interactive elements such as title, data points, and legends on the chart and also zoom and pan the chart.

Range color mapping - highlight and select

This feature allows users to highlight and select data points based on the range and point color mapping.

Highlight and select

Data Grid

Select specific rows using header checkbox

Select only the selectable rows along with the checkboxes when clicking the header checkbox of the data grid. The argument called isSelectable, in the rowDataBound event is used to disable the checkboxes in specific rows based on the application needs.

Select specific rows using the header checkbox in Data Grid

Header customization of exported data grid file

Customize the exported Data Grid’s header styles in the server side (PDF, Excel, and CSV) and in the client side (Excel and CSV), such as changing the text orientation, font color, width of the header text, and much more.

Exported PDF, Excel, and CSV Grid header customization

Search box with clear icon

Display the clear icon in the search box of the Data Grid control. A single click of the clear icon clears the text in the search box as well as the search results in the Data grid.

Data Grid search box with clear icon

Diagram

Bezier connector with multiple editing points

This feature allows users to adjust the curve of the bezier connector using multiple intermediate control points. Also, users can control the visibility of all the bezier control points.

Bezier connector with multiple control points in Diagram control

Limit the orthogonal connector segments

This feature allows users to limit the maximum segments count of an orthogonal connector to a specified value when editing connector segments at runtime.

Limit the maximum segments count of an orthogonal connector in Diagram control

Connector splitting

This feature allows users to split the connector when dropping a new node onto an existing connector and create a connection between the new node and existing nodes.

Connector splitting in Diagram control

Customize orthogonal connector segments icon

This feature allows users to customize the shape, stroke-color, stroke-width, and fill of orthogonal connector segments’ thumb.

Connector segment thumb with  ellipse shape in Diagram control

Word Processor

Track changes - restriction type

This feature restricts users from accepting or rejecting tracked changes, while editing a Word document without any limitation. All reviewers are allowed to view the document and do their corrections, but they cannot accept or reject any tracked changes in the document. Later, the author can view their corrections and accept or reject the changes.

Restrict a Word document with an exception to accept or reject the tracked changes.

Paragraph border

This feature allows users to add borders to the paragraphs in a Word document. Using borders, decorate paragraphs to set them apart from other paragraphs in the document.

Set borders for paragraphs in a Word document.

RTL text enhancements

The Syncfusion Word Processor includes the following enhancements to preserve RTL text in a Word document.

  • Display the RTL text in a bi-directional layout.
  • Select and navigate bi-directionally.
  • Insert the input RTL text in a bi-directional layout.

This gives users Microsoft Word-like experience when working with RTL languages.

RTL text display, select and edit enhancement in Word Processor.

Gantt Chart

Critical path

Highlights a single task or a chain of linked tasks that has a direct impact on the project’s end date. If a task in a critical path is delayed, then the entire project will be delayed.

Critical path in React Gantt Chart

State persistence

Retain the state of a Gantt Chart using the local storage on browser reload. The state can also be saved and restored manually.

Maps

Extending geometry type support

The React Maps now supports rendering GeoJSON files with “MultiLineString”, “MultiPoint”, and “GeometryCollection” geometry types. The geometry type “MultiLineString” represents an array of two or more geographic points. The geometry type “MultiPoint” represents an array of points that renders circle markers. The geometry type “GeometryCollection” is a special type that contains various geometries as members.

React Maps with MultiLineString geometry shape

Additional online map providers

The React Maps supports online map providers such as ESRI, TomTom, and Mapbox. Markers, marker clusters, navigation lines, zooming, panning, and other essential options can be rendered over online maps.

Legend support for online map providers

Legend support is provided for markers rendered over online map providers such as OSM, Bing, Mapbox, and others. Additionally, a legend for layers and markers on sublayers over online map providers is supported.

React Maps with legend in OpenStreetMap

Pivot Table

Custom sorting

Sort specific field members, also known as headers, either in the ascending or descending order.

Sort specific field members in Pivot Table

Allows the user to search for a specific field in the field list UI, and add or remove fields from the current report.

Field list UI search box with clear icon in the Pivot Table

Rich Text Editor

Insert text programmatically in Markdown editor

The Rich Text Editor allows you to insert text programmatically in the Markdown editor at the current cursor position.

First and last column resizing in tables

This feature allows you to resize the first and last columns of a table without resizing the other columns.

Table first and last column resizing in ASP.NET Core Rich Text Editor.

Scheduler

Delimiter in CSV export

This feature sets a delimiter when exporting Scheduler events to CSV.

Tree Grid

Indent and outdent rows

Indent or outdent the selected row to one level hierarchy. Move the selected row as the last child of its previous row. Using built-in toolbar item, indent and outdent actions can be performed on tree grid rows.

Indent and outdent row in React Tree Grid

Row drag and drop with virtualization

Drag and drop rows within the tree grid when row and column virtualization features are enabled. Dynamically reorder rows and bind large data swiftly in a tree grid.

Row drag and drop support with virtualization in React Tree Grid

Up arrow icon

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

Live Chat Icon For mobile
Live Chat Icon