Batch Editing in Grid Component

With Batch editing you can edit rows in bulk at the same time using built-in editors. There are different kinds of editors available that you can choose from, depending on column editor type: Button, CheckBox, Date, DropDownList, Numeric, Progress, Rating, Slider and Text. Any changes to the grid cells are not applied until confirmed, and they are saved in bulk at the end of editing.

In this article, you will learn how to activate the Batch editing mode in the Grid, select an editor for cells based on their data type, handle grid data changes by handling events, discard changes prior confirmation or save them in bulk. In following sections, you will find sample code in JavaScript and Angular, React and Vue frameworks.

When batch editing mode is active, whenever a grid cell receives the input focus it will show an editor corresponding to their data type. Clicking on a cell or using keyboard you can switch the focus to another cell.

Any changes made to the cell value, will mark that cell for saving, represented by a different background color from the rest of the grid cells. In addition, you can also mark a row for removal, by clicking on the Remove button from the last column on the right. These markings state that some data in the grid has changed, so you can clearly see which rows and cells require confirmation before saving.

At the end, to discard or cancel any change in a specific row click on Cancel button from the right column, or cancel all changes from the button below the grid. Clicking on the 'Save Changes' button, will bulk save all rows that are marked and update the grid data.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

Grid Batch Editing

In comparison to Form and Inline editing mode where you can edit one row at time, with Batch editing you can edit multiple grid cells in single request. To enable editing of multiple cells in different rows, at first you need to set the editMode property of the grid to Batch. This will change the grid layout so that a fixed column will appear on right side showing command buttons from where you can remove and cancel any changes to a specific row.

Related: Different Editing Modes in Grid Component for Angular, React and Vue

Here is an example of grid columns with editing settings that will show a specific editor in cells when batch editing is active:

• JavaScript
• Angular
• React
• Vue

Whenever a cell receives the input focus and if the cell is editable, the corresponding editor will appear. You can enter a new value using the cell editor, which will mark the background color of the cell in different color (orange or other depending on Theme in use).

When Batch Editing mode is activated, you can navigate among cells and:

• make changes to cell values using different kind of editors, depending on the value type
• remove a row from a button in the last column, this will mark the row for removal
• discard or cancel any changes made within a row from a button in the last column
• save all data changes in bulk

Any changes to cell values are highlighted (orange color), so you can easily see what has changed within the Grid. However, these changes are only temporary and if not saved they will be discarded. Using the last column you can remove a row or if changes are made, cancel them within that row.

In this example, to complete the editing process, you can save all data changes in bulk or cancel them using the buttons below the grid. This is done by calling the endEdit method that has the following signature:

endEdit(save)

Here the save parameter is optional, when true it states that this method will save all changes, otherwise they are cancelled.

• JavaScript
• Angular
• React
• Vue

How to Handle Grid Data Changes with Batch Editing

When using batch editing any changes to the grid cells are not saved until the endEdit method is called, either by clicking on the 'Save Changes' button like in this example or in some other way in code. This will fire the dataChanged event, which carries the original and new data for each row affected.

You can use this event to review changes to grid data, discard any change or proceed with saving. Like in this example, handling this event updates the Total value, as a result of changes from Quantity, Price and Shipping Cost values:

• JavaScript
• Angular
• React
• Vue

In addition, any change to cell values during editing fires the valueChanging and valueChanged, which you can handle in your code. However, these are only temporary changes when using batch editing and they require confirmation in order to be saved, as it is explained above. You can use these events to review changes to a specific cell, if required.

Conclusion

Batch editing in Grid component allows you to edit multiple grid cells in single request using different cell editors. You can choose from several built-in editors available to edit grid cells, depending on their data type. You can navigate among the cells using keyboard or click on a cell to receive the input focus, an editor will appear where you can change the cell value. Any changes to grid data are accompanied with events that you can handle in your code and cancel or proceed with saving them in bulk.

A sample code is available in JavaScript, Angular, React and Vue that shows you how to set up batch editing mode, use editors and data changing events that accompanies the editing process.

The Grid is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.