Ignite UI for React 16.12.4 Updates

There is a lot going on here at Infragistics. From releasing a brand new Ignite UI for Blazor product, to shipping updates to our market leading embedded data analytics product called Reveal, to creating the game changing App Builder that allows you to design web apps and generate Angular code with the click of a button.

With all this excitement, I wanted to take a moment to talk about some of the smaller updates that we are shipping for Ignite UI for React. Historically, when Infragistics releases a product, it is done with a large volume release version such as 20.1. However, with Ignite UI for React we follow a continuous delivery process for delivering new components, features, and bug fixes to our customers. This means that we are constantly pushing new updates with incremental versions the moment they are ready. We no longer wait 6 months for a release.

So, what are these new updates? Well, let’s check them out.

Data Grid Updates

The data grid is always the star of our products. With unmatched performance and flexibility, we are always focusing efforts to add new features being requested by customers like you. This means with nearly every release; we will have new data grid features for you to enjoy.

Cell Editing

The core feature in any grid is editing. When we first released our React data grid, it was released as a read-only grid that could handle high volumes of data. While most companies may have waited for a long as it took to implement something like editing before releasing the component, we decided to release what we had at the time. Which means we released a grid with no editing. This goes back to our continuous delivery model. When it is ready, ship it. Don’t make customers wait for anything.

Well now the time has come! We are officially releasing the cell editing feature in the React data grid. Cell editing is exactly what it sounds like. The React data grid provides the ability for your user to edit the data you present to them in your web application.

There are numerous ways to enter edit mode (begin editing).

• Press F2
• Double Click the Cell
• Hit the Enter key on the active Cell

Either one of those methods will place the cell into edit mode. At this time, you can then change the value of the cell. The value of the cell is committed by pressing enter, by tabbing out of the cell, or if the cell loses focus by clicking somewhere else in the app.

When in edit mode, you can easily place other cells into edit mode by using the tab key to move focus to the next cell. You can also use the “shift + tab” combination to move focus to the previous cell to continue editing.

Escape will exit edit mode and undo any changes made to the cell value.

Cell Batch Editing

Cell batch editing is a feature that allows you to make multiple edits to various cells in the data grid and commit the changes to the data source all at once. The cool part about this feature is that there is built-in undo and redo support. You can undo, or redo changes made to the values in the cells until you call the commitChanges method off the grid. Once you call commitChanges on the grid, all values are committed to the data source.

ComboBox Column

The React data grid is also receiving a brand-new combo box column type. This new combo box column type will allow you to provide a combo box editor in your data grid that provides a list of values that can be filtered/searched, and a single item selected.

To use the combo box column type in your React data grid, simply use the new IgrComboBoxColumn object, set the field, data source, textField, and valueField properties.

<igc-combo-box-column id="City" field="City"
                                    text-field="name" header-text="City">
</igc-combo-box-column />

Multi-column combo (Preview)

Lastly, we have the new MultiColumnComboBox. This component is unique in that it's 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, defining columns, controlling column header visibility, sorting, and more. This control is being released as a Preview component because there are just a few features and behaviors we'd like to get in before calling it a solid v1. Look for an update to this component very soon.

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 @brianlagunas. You 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.