Log in to like this post! 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 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 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. 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 Scatter Bubble Series Contour Line Series High Density Scatter Series Scatter Symbol Series Shape Polygon 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!