Ignite UI for Web Components - What’s New in 22.2

Today’s Ignite UI for Web Components 22.2 release includes five brand new components such as the Accordion, DateTime Input, Dialog, Select, and Tabs components.  As well as a brand-new modern data grid and tree grid, with the most features and best performance of any Web Components Grids on the market. With such a massive release, you might have thought we stopped there, but we didn’t. We’ve also made a ton of improvement to our market leading data visualization charts.

Time to get a high-level view of all the great new components and features we’re publishing in today’s Ignite UI for Web Components 22.2 release.

The NEW Web Components Data Grid

The new Data Grid component is used for displaying data in a tabular format quickly and easily. The Data Grid is a modern grid component packed with features such as data editing, selection, filtering, sorting, grouping, pinning, paging, templating, column moving, exporting and more. Compared to the previous grid we shipped in Ignite UI for Web Components, the new Data Grid has significantly more features, a richer API, and built-in theming.

The most important part about this announcement is that we are creating a brand-new Data Grid which will be replacing the existing Web Components Data Grid. This means that if you are using the previous Web Components Data Grid, you’ll need to update the old grid with this brand-new Data Grid.

Out with the old, in with the new!

Web Components Tree Grid

The Tree Grid component is used to visualize multicolumn self-referential hierarchical data in a tabular format. Built on top of on our existing Data Grid component, the Tree Grid inherits all the Data Grid’s great features, providing a familiar API and a seamless development experience for editing, filtering, sorting, summaries, and more.

Web Components Accordion

The Web Components Accordion is a component for building a collection of components, composed as vertically stacked panels, with clickable headers that allow expanding and collapsing of the panels. The accordion is commonly used to reduce the need of scrolling across multiple sections of content on a single page. It offers keyboard navigation and an API to control the underlying panels' expansion state.

Web Components DataTime Input

The Ignite UI for Web Components DateTime Input allows the user to set and edit the date and time in a chosen input element. The user can edit both date and time portions using an editable masked input. Additionally, one can specify a desired display and input format, as well as min and max values to utilize validation.

Web Components Dialog

The Web Components Dialog component is used to display alerts, messages, questions, confirmation decisions, or present forms to collect input from users. The Dialog component opens a dialog window centered on top of the application content. The Dialog component opens in two different modes: modal and non-modal. Modal dialogs block interaction with the content outside the dialog and behind the dialog’s overlay. Non-modal dialogs allow users to interact with content outside of the dialog and behind the dialog’s overlay which will automatically close the dialog.

Web Components Select

The Web Components Select component allows a single selection from a list of items, placed in a dropdown. This form control offers a quick items list navigation, including selection, based on a single or multiple characters match. The Select component provides the ability to define a custom header and footer, as well as group the select items.

Web Components Tabs

The Web Components Tabs component organizes content into separate views (tabs) where only one view (tab) can be visible at a time. Each tab has a label which is shown in the tab’s header. Changing tabs is done by clicking a tab’s header. When the number of tab headers exceeds the width of the screen, a set of horizontal scroll buttons are shown to scroll the other tab headers into view.

Chart Improvements

Our last 22.1 was a big release for charts. We made significant improvements to default behaviors, and we continued to refine the Category Chart API to make it easier to use. With 22.2, we are making another giant leap in capabilities of the Category Chart, delivering amazing new features that continue to make the Infragistics charts the most powerful and easiest to use charts on the market!  These new chart improvements include:

• Automatic responsive layouts for horizontal label rotation based on browser / screen size.
• Automatic crosshair, animations and Y-Axis labels and label formatting.
• Enhanced rendering for rounded labels on all platforms.
• New API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data.

Data visualization and data analysis is a key addition to every application, with 22.2, you can go above and beyond with beautiful, interactive experiences in your apps.

Watch this video to see a demo of the new Web Components in 22.2