The Top 5 Angular Data Grid Features You Never Knew You Needed

Angular is the most popular front-end development tool to date. Yes, it’s a little bit complex to learn, but as a top front-end programming language, Angular delivers functionality out of the box, cross-platform architecture, consistency throughout the code base, maintainability, modular development structure. UI toolboxes and UI libraries like Ignite UI for Angular Library, for example, take the most out of the Angular framework and use it to build unbeatable core and enterprise data grid features above all. But what are some of the best ones to use? 

There are several crucial must-have features, and we perfectly understand that developers usually look for things like sorting, filtering, editing, selection, and paging. Being the most prominent ones, though, we expect these by default. That’s why all UI suits strive to deliver Angular Data Grid components that pack the above-mentioned options for data management and visualization. 

We’ll put these aside for now. Instead of listing them again just to confirm their necessity, we’ll focus on features that are less known but are mandatory and extremely useful in modern grids. 

Let’s start then and see what the top 5 Angular data grid are features you never knew you needed. 

Batch Editing – A Way To Better Accumulate Changes 

In essence, Angular Grid Batch Editing allows users to modify multiple records of data in the grid and submit all changes at the same time, working with transactions. You can use batch editing to postpone the saving of multiple cell value changes. They can be saved in a buffer and easily discarded before confirming the final edits. 

It’s not a secret that among the biggest and most common challenges programmers have when building apps consuming hundreds of thousands and even millions of records, is to create a maintainable and scalable UX for editing. And the batch editing Angular Grid feature comes as the solution to this. Enabling the batch edit mode, you can accumulate changes without immediately affecting the underlying data. Which minimizes the number of HTTP requests sent to the server when updating records. 

To implement Batch Editing using your component when using Ignite UI for Angular package, you need to provide a Transaction Service implementation (IgxTransactionService) or you can substitute your own. Our Ignite UI for Angular package is shipped with a full-fledged transaction service implementation with full transaction, undo and redo support. 

In case you need hands-on tutorial and more Angular Grid Batch Editing examples, there’s a great read on How To Build a Transaction Service which you can read and see how it’s all done. 

Advanced Filtering – To Build More Complex Filter Criteria 

Advanced Filtering in Angular Data Grid works by providing a filtering UI that enables the creation of groups with more complex filtering conditions across all columns for any Angular Material table. After configuring this feature, an advanced filtering button gets rendered in the grid toolbar. Users must click on this button to open the advanced filtering dialog. 

In our case, the dialog is using the IgxQueryBuilder component to generate, display and edit the filtering logic. To enable this feature, you must set allowAdvancedFiltering and add the igx-grid-toolbar component within the grid. 

<igx-grid [data]="data" [autoGenerate]="true" [allowAdvancedFiltering]="true"> 
    <igx-grid-toolbar></igx-grid-toolbar> 
</igx-grid> 

To demonstrate how customizable this component is, I will share an example of external advanced filtering configuration that works outside of the grid as well. All you need to do is to add the advanced-filtering-dialog component. 

<igx-advanced-filtering-dialog [grid]="grid1"> 

</igx-advanced-filtering-dialog

Angular Grid State Persistence & A Serialized JSON String 

State Persistence allows programmers to save and restore the grid state in a simple manner. If a user makes any modifications to the visualized data, wants to apply sorting or filtering or anything else, the State Persistence component saves these changes and restores them after the page is reloaded. 

You won’t see this one listed frequently among the most common Angular Grid features, but it is extremely vital, especially for developers with an intensive work on grids only or for those who don’t want to preconfigure different feature states, like: 

• Make CustomerID column with DESC order 
• Apply Contains filter to ProductName column 
• Pin “Lastname” and “Age” as to show on the left 

. Essentially, what this method serves for is returning the Data Grid state in a serialized JSON string, so you can take it and save it on any data storage (database, cloud, browser localStorage, or other) you want. 

When the IgxGridState directive is applied on the grid, it exposes the getState and setState methods that developers can use to achieve state persistence in any scenario. 

Virtualization – Making Data More Consumable 

Angular Grid Virtualization is used for keeping track of what part of the data is visible and precisely how it is rendered. It slices the data into smaller chucks which are then swapped from a container viewport while the user scrolls horizontally/vertically to load buffer data. 

Having the goal to optimize the rendering performance, Ignite UI for Angular Grid Virtualization works a bit differently – it swaps data instead of removing and adding DOM elements. But you can read more about it in the official documentation page. 

Angular Grid Keyboard Navigation and The Use Of Interactive Keyboard Shortcuts 

When enabled, it provides various keyboard interactions (Alt + L, Ctrl + Shift + L, Ctrl + Arrow Up, Ctrl + Arrow Down, etc.), delivering better usability and UX, regardless of how users navigate pages. 

At Infragistics, we want to ensure an optimal user experience, regardless of whether you are using a mouse, a touchpad or just a keyboard. That is why we have created a new user interface pattern for keyboard navigation within a page, called Active element navigation. This pattern reduces the number of tab stops within the interface designed for the igxGrid to only five, and exposes plenty of new keyboard shortcuts for efficiency. Each tab stop element has a single-entry point, and from there users can easily navigate to different items in the corresponding grid element container by simply using the arrow keys. Thus, simplifying navigation and improving usability. 

Used in Ignite UI for Angular Data Grid, the Keyboard Navigation feature improves the accessibility of the Grid and allows people to navigate through any type of elements inside (cell, row, column header, toolbar, footer, etc.). Not to mention it is fully aria compliant as well. 

Wrap Up

Angular Grid Batch Editing, Advanced Filtering, State Persistence, Virtualization, and Keyboard Navigation don’t get mentioned very often in guides and articles on Angular Grid features. They very much remain behind the scenes, while things like sorting, editing, sizing, paging steal their thunder. Despite being less common and mostly requested by people who work primarily with data grids, you still need these top 5 features for your projects. 

One of the disadvantages is that you can rarely come across Batch Editing, Advanced Filtering, State Persistence, Virtualization, and Keyboard Navigation that work well with grids. Thankfully, Ignite UI for Angular Data Grid is the ultimate toolbox that not only packs them but ensures their high performance. 

Go on and try them. Explore demos and see how they work.