What Are The Top 4 Angular Grid Data Manipulation Features?

Zdravko Kolev / Friday, June 16, 2023

One of the primary purposes of any Grid component is to work with data. This means not only transforming and presenting it in a more digestible way but also providing the means to update it with ease. However, maintaining a database takes a lot of work. Except when you use the right tools. In this case, you can easily perform data management operations like Updating, Deleting, and Creating new data records. But this may not be always enough. How come? because having a data validation mechanism is also a must-have functionality.

In this article, then, I will cover the top 4 data manipulation features that I consider being ultra-important:

Angular Cell/Row editing
Batch editing with transactions
Data validation mechanism
Row adding

A Quick Sneak Peek at the Ignite UI Angular Grid

Ignite UI for Angular Grid gives you a powerful public API that allows you to customize the way these operations are performed. Additionally, each data management feature exposes several default editors based on the column data type that could be easily customized.

Now, straight to the point: the top 4 data manipulation features

Cell/Row Editing in Angular Grid

By default, the Grid uses in-cell editing and different editors will be shown based on the column data type, thanks to the default cell editing template. In addition, you can define your own custom templates for update-data actions and override the default behavior for committing and discarding any changes.

To enable the default editing, just set the [editable] input to true for the columns you want to edit.

You can easily change the editing mode to Row with the [rowEditable] input on the igxGrid. Changing a cell value and then clicking or navigating to another cell on the same row won't update the row value until confirmed by using the Done button or discarded by using the Cancel button.

Row editing events

Angular Grid Batch Editing with Transactions

The Batch Editing feature of the IgxGrid is based on a Transactions service. Thanks to the Angular framework, creating such a Transaction service is easy and maintainable. The Transaction Service is an injectable middleware (through Angular's DI) that a component may use to accumulate changes without immediately affecting the underlying data.

You may take advantage of the Transaction Service when using any component that needs to preserve the state of its data source and to commit many transactions at once.

Angular grid batch editing

The Transaction Service allows adding transactions. After you add at least one transaction, you may commit or clear all the changes or the changes for a single record only. It keeps a detailed log and can execute undo and redo operations.

Every time you execute an operation (transaction), it is added to the transaction log and undo stack. All the changes in the transaction log are then accumulated per record. From that point, the service maintains an aggregated state that consists only of add/update/delete operations for unique records.

Angular Grid Data Validation Mechanisms

The Grid editing exposes a built-in validation mechanism of user input when editing cells/rows. It extends the Angular Form validation functionality to allow easier integration with a well-known functionality. When the state of the editor changes, visual indicators are applied to the edited cell.

We extend some of the Angular Forms validator directives to work directly with the IgxColumn. The same validators are available as attributes to be set declaratively in igx-column. The following validators are supported out of the box:

required
min
max
email
minlength
maxlength
pattern

To validate that a column input would be set and the value is going to be formatted as an email, you can use the related directives:

<igx-column [field]="email" [header]="User E-mail" required email></igx-column>

The following sample demonstrates how to use the pre-built required, email and min validator directives in a Grid.

Validator directives in angular grid example

Angular Grid Row Adding

The Grid provides a convenient way to perform data manipulations through inline row adding and a powerful API for Angular CRUD operations. Add an Action Strip component with editing actions enabled in the grid's template, hover a row, and use the provided button. Or press “ALT” + “+” to spawn the row adding UI.

The following sample demonstrates how to enable native row adding in the Grid. Changing a cell value and then clicking or navigating to another cell on the same row doesn't update the row value until confirmed by using the Done button, or discarded by using Cancel button.

Row adding feature in angular grid

Wrap Up

The Grid component in Ignite UI for Angular (and in general) plays a crucial role in data management because it:

Allows for efficient visualization of large datasets.
Offers built-in sorting, filtering, and other capabilities.
Provides a range of data manipulation features so you can effectively modify data directly.
Helps you ensure real-time updates to the underlying dataset, and so on.

While managing a database can be challenging, utilizing the appropriate feature-rich tools (like Ignite UI Angular Components) can simplify the process significantly. This way, you can almost effortlessly execute critical data management operations like editing, deleting, and creating new data records, plus implementing a data validation mechanism in your Angular grid.

If you need more details, we encourage you to check out our:

Other useful articles on similar topics:

5 Must-Have Angular Grid Column-Based Features

Top 5 Angular Grid Row Features & How To Use Them

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

To experience everything, visit the customer portal and get the latest version. As usual, we are always excited to get your feedback and hear what you want to add or recommend. So please email me at zkolev@infragistics.com and let me know how we can help you continue delivering value to your customers with Infragistics.