Blog

Batch editing in Angular DataGrid: paste, validate, apply and undo

ngbootstrap 2.4.0 adds cell ranges, clipboard drafts and atomic Undo/Redo. Learn how to update multiple records while keeping validation and persistence explicit.

Back to blog

Release guide

4 min read
AngularDataGridBatch editing

Make one reviewed change across several records

Updating dispatch quantities one row at a time is slow when the source already lives in a spreadsheet. ngbootstrap 2.4.0 lets users select a cell range and paste a block of values into existing rows. Those values remain drafts until the user applies them. This is useful for order adjustments, stock counts and scheduling corrections where the whole set should be reviewed together.

Enable only the workflow you need

Add ngbGridBatchEditing to the grid, set cellSelection to range, enable editing and supply a stable unique trackBy key. Put Apply and Discard tools in ngb-datagrid-toolbar. Add ngbGridHistory and the Undo/Redo tools when users need to reverse committed batches. Each control is opt-in; existing row-editing modes remain available. The Batch Editing guide contains a complete standalone example you can copy into an application.

Validate before applying

The grid checks column types and required values before committing. Use batchValidator for business rules, such as a permitted quantity range or a server-side availability check. It accepts synchronous errors or a Promise and receives an AbortSignal for cancellation. A validation failure leaves drafts visible and committed rows unchanged. Users can paste corrected values or discard the draft.

Keep local changes and backend saves explicit

A successful Apply updates local grid data and emits one batchSave event with original and updated rows. Update your bound array and send the changes through your data service. The grid does not implement a backend transaction or wait for a save response. Prevent further editing while a request is pending. If it fails, reload authoritative records and clear history before resuming. Handle authorization and concurrent writes on the server.

Undo the batch as a single step

With history enabled, each Apply creates one command. Undo and Redo revalidate the entire batch and reject conflicts without partially changing rows. Replays emit batchSave with historyAction set to undo or redo, so the same persistence handler can save the result. The toolbar tools and keyboard shortcuts handle asynchronous replay; custom controls should call undoAsync or redoAsync.

Start with a manageable page of data

The first batch workflow supports one rectangle on the loaded page in a regular ungrouped table. It uses the default edit service and excludes new-row insertion, formulas, cross-page paste and virtualized ranges. Paste is capped at 10,000 cells and 1 MiB of text, with additional history limits. These are safety limits rather than recommended page sizes: use pagination for large datasets and measure your templates on target devices. All of these features remain MIT-licensed with no paid component tier.

This project is not affiliated with ng-bootstrap or ngx-bootstrap. Those projects focus mainly on Bootstrap components for Angular. ngbootstrap focuses on Angular UI for data-heavy apps, especially Data Grid, Angular-native Form Builder, drag and drop workflows, documentation examples, and performance-focused Angular patterns.