The 7.2.0 release could be the biggest for Ignite UI for Angular to date. This release delivers the most significant component yet to make it into the toolkit—Hierarchical Data Grid— as well as major improvements to other commonly used features and components. Version 7.2.0 only includes feature requests that you, our customers, have posted over the last several months. We are committed to your success!

Also, please note that this blog has been updated to reflect other features added as part of the Ultimate 19.1 release, on April 17, 2019.

Hierarchical Data Grid

So let us start this review with the most significant and the largest new component we are releasing—the Hierarchical Data Grid, also known as the Hierarchical Data Table. Using this Data Grid you can display your data in a hierarchical view where you have parent records linked to child tables. Upon expanding a parent row, a number of children data grids appear. You can control features like filtering, sorting, pinning, etc. for each grid separately. The Hierarchical Grid supports multiple child tables under a single parent record without sacrificing any of the performance the flat grid offers. Features like horizontal and vertical DOM virtualization, and paging are applicable to the Hierarchical Grid, as well as to each individual flat grid inside the hierarchical schema of tables the grid is bound to. Samples displaying the Hierarchical Grid can be interacted with here. 

 

One of the most requested features for the Data Grid has been an Excel-style filtering UI. We heard you, and we are delivering this feature with 7.2.0. This UI doesn’t replace the existing Row-style filtering UI that the Data Grid offers. Rather, you can turn on Excel-style filtering in place of the current row-style filtering. On top of that, the Excel-style filtering UI gives your end-users quick and easy ways to interact with features like Column Moving, Sorting and Column Hiding. All of these UI bits can be toggled, so you can tailor the UI configuration perfectly to the needs of your application, and ultimately your end-users. You can interact with samples displaying the Excel-style filtering here. 

 

 

Select

With 7.2.0, we completed the set of drop down components Ignite UI for Angular offers. So far, we had a simple Drop Down built on top of the generic Toggle component and the Overlay service the product offers. We also had the most advanced component, which is the Combo. We had quite a few user requests to fill the gap in between. We are now releasing a Select component, which is a form component that mimics the behavior of the native HTML select, but with a much more fluid UX, consistent with the rest of your application. We have strictly followed the Google Material guidelines for this component, and we have made it as device agnostic as native HTML Select. You can interact with samples displaying the Select component here. 

 

Autocomplete

The other drop down component that Ignite UI for Angular was missing is Autocomplete, which is now featured in version 7.2.0. We have developed an Autocomplete directly, which allows developers to link an input component with a drop down component, and to control what the drop down displays based on the user input in the input field. Samples displaying the Autocomplete directive in action can be interacted with here.

 

Date and Time Picker Enhancements

The Date and Time picker components in previous versions of Ignite UI for Angular offered pop out dialog picker views. With 7.2.0, you can now configure them to be editable input components with drop-down pickers respectively for date and time. Samples displaying the new modes for the Date and Time pickers can be interacted with here.

 

 

Calendar Enhancements

In this release, we have enhanced the Calendar component, by separating its views into separate components. Now you will be able to instantiate a stand-alone month and year view, if your application needs are for end-users to fill only those portions of a date. Samples displaying the separate Calendar view components can be interacted with here: https://es.infragistics.com/products/ignite-ui-angular/angular/components/month_picker.html

Outlined Button

The Ignite UI for Angular Button directive now includes an Outlined button type, which we were previously missing. Samples displaying the different Button types can be interacted with here. 

 

Theming – Component Elevations and Roundness

The Ignite UI for Angular theming engine now allows you to change the elevation (shadows) and the roundness (border-radius) of individual Ignite UI for Angular components in your application, or the overall roundness factor of a theme applied across your application.

 

Multi-Cell Selection (Ultimate version 19.1)

With Ultimate 19.1, we have included a new major feature called Multi-Cell Selection, also known as Drag Selection. This allow you to select multiple cells in the Data Grid and copy and paste them to another location. Upon selecting the cells with the mouse, you can scroll down, up , left, and right if you hold the right mouse key. The selected cells will stay selected until you apply selection to another cell in the Data Grid.

 You should also notice that we've improved the performance of all scrolling and data operations in the Data Grid, which are visible not only in Chrome but also in IE 11.

Updates to jQuery Grid

Here are some important updates that we added to jQuery Grid in Ultimate 18.1, 18.2, and 19.1 releases. 

1. jQuery 3.3.x compatibility.
2. Angular Wrappers support for Angular 7.
3. React Wrappers support for React 16.
4. NuGet package now copies static files automatically to wwwroot folder.
5. Improved TypeScript definitions – added some global functions from Infragistics.util.js file.
6. Excel Engine improvements - Added support for Chartsheets in the open xml formats.
7. MVC improvements
   1. MVC Grid Wrapper – developer now can configure the request type.
   2. New Chart options
8. igSpreadsheet improvements - Added EditText property to the EditModeExiting event arguments.

The full release notes for each version of Ignite UI for Angular are located on GitHub.