What's New in Ignite UI for React 2019 April Release

Daizen Ikehara / Monday, April 22, 2019

We announced the launch of Ignite UI for React in February (see our general overview blog). Since then, we've noted a lot of enthusiasm from our users for our React components, and our dev team has been working very hard to add new values to the React library.

Today, I am very excited to share new features included in this release!

This 2019 April release includes the following updates:

  • Interaction features to the Fastest React Grid
  • Stacked Chart Series to the React Chart
  • New Map control

Interaction Features to the Fastest React Grid

Selection - React Grid

In this release we focused on interaction features such as selections and navigation to enhance the end-user experience. With this update, you can interact with cells as if you are using Microsoft Excel.

Multi-Cell Selection (Contiguous and Non-Continguous)

This feature allows you to select individual cells or a contiguous group of cells. This is done by clicking each cell while holding down the CTRL or SHIFT key.

Cell Range Selection (Mouse / Keyboard)

This feature allows you to select a range of cells using the mouse or the keyboard. Ranges are selected in the following ways:

  • Mouse drag – Select a cell with the mouse click, drag, release the mouse over another cell, and the range from the selected cell and released cell will be the selected range.
  • CTRL and Mouse drag – Hold the CTRL key while using the mouse to create another range will keep individual ranges selected.
  • SHIFT and Click – Select a cell, hold the SHIFT key, select another cell, and the range of cells between the two selected cells will be selected.

Active Cell (Excel-Style Keyboard Navigation)

We also added Excel-style keyboard navigation to change the active cell.

Key(s) Action(s)
Enter Nothing happens.
Arrow Key Up Navigate one cell up (no wrapping).
Arrow Key Down Navigate one cell down (no wrapping).
Arrow Key Left Navigate one cell left (no wrapping between lines) on the current row only.
Arrow Key Right Navigate one cell right (no wrapping between lines) on the current row only.
Page Up Scroll one page (view port) up.
Page Down Scroll one page (view port) down.
Tab Move the selection to next cell or next row if the last cell is reached (without row selection).
SHIFT + Tab Move the selection to previous cell or previous row (last row cell) if the first cell is reached.
CTRL + Arrow Key Up Move to top cell in column.
CTRL + Arrow Key Down Move to bottom cell in column.
CTRL + Left Arrow Key Move to leftmost cell in row.
CTRL + Right Arrow Key Move to rightmost cell in row.
CTRL + Home Move to top left cell in the grid.
CTRL + End Move to bottom right cell in the grid.
Mouse scroll Focus is blurred.

New Stacked Series to the React Chart

Stacked Charts are commonly used to render a collection of data points. A stacked chart can present a direct representation of the data or it can present the data in terms of percent of the sum of all values in a data point.

In this release, we added a variety of stacked series to DataChart, including area, bar, column, line, spline area, and spline.

Stacked 100 Stacked
Stacked Area Series
Stacked 100-Area Series
Stacked Bar Series Stacked 100-Bar Series
Stacked Column Series Stacked 100-Column Series
Stacked Line Series Stacked 100-Line Series
Stacked Spline Area Series Stacked 100-Spline Area Series
Stacked Spline Series Stacked 100-Spline Series

New Map Control

You may think "Hey Infragistics, you guys added features to existing controls only. No New Control, eh?". Don't worry, we added a new Map control that can visualize geographic and geo-spatial data. With this control, you can show the status of occupations for a meeting or show an airplane route map with real time flight data.

Shape File Converter

In the Map control, the ShapefileConverter class loads geo-spatial data from shape files and converts it to a collection of ShapefileRecord objects. Geographic series can be bound to this collection and render geo-spatial data.

Data Binding

In addition to rendering data from shape files and geographic imagery maps, the React Map control also provides data binding to other data sources with geographic data using the data binding and data mapping properties of geographic series. The following is a preview of the Map control with GeographicSymbolSeries bound to a data model that contains locations of some cities of the world.

High-Performance Rendering

The React Map control provides plotting of tens of thousands of data points and updates them every few milliseconds so that the control can handle your real-time feeds.

High Performance Rendering

Geographic Imagery Maps

This control provides the rendering of geographic imagery from Open Street Maps. 

Geographic Series

Use this control to render an unlimited number of geographic series that can display geo-spatial data as points, polylines, and polygons. Multiple geographic series can be used to create a complex layering of map elements; e.g. states, cities, and roads. The Map control’s Series property is used to support rendering an unlimited number of geographic series. This property is a collection of geographic series objects and any type of geographic series can be added to it. For example, GeographicSymbolSeries can be added for plotting geographic locations such as cities and the GeographicPolylineSeries for plotting connections (e.g. roads) between these geographic locations.

Geographic Series Types

For Geographic Series, the map control provides these types below plus many more:

Scatter Area Series
Geographic Scatter Area Series
Scatter Bubble Series
Geographic Scatter Bubble Series
Contour Line Series
Contour Line Series
High Density Scatter Series
High Density Scatter Series

Scatter Symbol Series
Scatter Symbol Series

 Shape Polygon Series
Shape Polygon Series

Shape Polyline Series
Shape Polyline Series

You can also customize maps with the Shape/Marker Templates.

Map Navigation

The React Map control provides customizable navigation behaviors for navigating map content using the mouse, keyboard, or code-behind. The following is a preview of the map control with highlighted position and size of the WorldRect when zoomed to some region of the map content (e.g. Africa and Europe continents).

Get started with Ignite UI for React

To get started with Ignite UI for React, you can visit the product page and browse online samples. You can also download a project that includes samples that can run on your local environment with npm packages.

Happy Coding!

New Release - Try Infragistics Ultimate 19.1 Free for 30 days.