Ignite UI for React – What’s New in 20.2

Brian Lagunas / Wednesday, December 16, 2020

Today is the official release of the Infragistics Ignite UI for React 20.2. Let's take a look at the new components and latest features that we have added in this latest release.

React Date Picker

The React Date Picker is our newest input component that allows your end-user to select a date from a calendar that is shown in a dropdown when the editor is clicked. This interactive calendar gives your end-users the ability to navigate the days, months, and years in an intuitive and easy to use component.

blazor date picker

React Grid

The React data grid is by far the most popular component in the entire product. Easy to use, exploding with performance, and packed with features it’s no wonder why the Ignite UI for React data grid is the go-to for all of our React customers.  While the v1 release of the React data grid back in September was amazing, we spent the last three months making it even better by squeaking in just a few more helpful features to end out the year.

Accessibility (ARIA)

With the release of Ignite UI for React 20.2, the React data grid now has the best support for accessibility compared with other the React grids available today.

Users who are visually impaired will typically require the assistance of a screen reader to interpret and interact with grid-based applications. In order to give screen readers the contextual information they require to interpret an interact with the React grid, we have added the appropriate ARIA attributes to all grid DOM elements.

These ARIA attributes will ensure that screen readers can interpret and navigate the columns and rows of the React grid.

Row Editing

In the initial v1 release of the React grid back in September, we shipped with out of the box support for cell editing, and cell batch editing. In todays 20.2 release, we have added row editing. Row editing differs from cell editing in that once you begin to edit a cell, the entire row the cell belongs to is placed into edit mode. You can make changes to other cells in the same row without committing the data, and with the ability to have undo capabilities.  The moment you exit edit mode by hitting enter, or clicking outside the row, the value changes made in all cells in the entire row will be made all at once. Cell values that have not been committed are visually represented by a light gray italic text styling.

blazor grid row editing

React Multi-Column Combo Box

Lastly, we have the new Multi-Column Combo Box.  This component is unique in that it is a combo box that visualizes large amounts of data in a data grid embedded in the dropdown. It supports features such as filtering with auto-suggest, a material-based label, placeholder text, defining columns, controlling column header visibility, sorting, and more. In the initial release of the Infragistics Ignite UI for React product back in September, this was provided as a “Preview” component. There were just a few features and behaviors we wanted to add before calling it done. Now, after a ton of hard of work and testing over the last several months we are confident calling this a solid v1 of the React multi-column combo box.

blazor multi-column combo box

Let’s Wrap this Baby Up!

If you have ideas about new features we should bring to our components, important issues we need to fix, or even brand new components you’d like us to introduce, please let us know by posting them on our Product Ideas website. Follow and engage with us on Twitter via @infragistics. You can also follow and contact me directly on Twitter at @brianlagunasYou can also subscribe to my YouTube channel to be notified of new videos, and follow me on Twitch to watch me stream live.  Also make sure to connect with our various teams via our Community Forums where you can interact with Infragistics engineers and other customers.  

Lastly, when you do build something cool with our controls, please make sure to let us know.