Log in to like this post! 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. More from these features: The grid exposes a wide array of events that provide greater control over the editing experience. These events are fired during the Row Editing and Cell Editing lifecycle - when starting, committing or canceling the editing action. Editing templates - If you want to use a data type-specific edit templates, you should specify the column dataType property. So let's now see what are the default templates for each type 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. 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. 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. 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: Discord channel GitHub discussions Roadmap YouTube channel Twitter 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 email@example.com and let me know how we can help you continue delivering value to your customers with Infragistics.