Batch Editing in Grid Component

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

In this article, you will learn how to activate the Batch editing mode, select an editor for cells based on their data type and how to handle grid data changes by handling events.

Save Changes Cancel
Grid component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

When batch editing mode is active, whenever a grid cell receives the input focus it will show an editor corresponding to the 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 is changed, so you can clearly see which rows and cells require confirmation when saving.

At the end, to 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 save all rows that are marked and update the grid data.

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 one or multiple rows. To enable batch editing, 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.

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

Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.

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
  • >cancel any changes made within a row from a button in the last column

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 cancelled. Using the last column you can remove a row or if changes are made to cancel them within that row.

In this example, to complete the editing process, you can save all changes 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.

How to Handle Grid Data Changes with Batch Editing

When using batch editing any changes to the grid cells are not applied 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, revert the 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:

In addition, any change to cell values during editing fires the valueChanging and valueChanged events, 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 one or multiple rows at the same time using different cell editors. You can choose from several editors available to edit grid cells, depending on data type. With batch editing, you can navigate among grid cells using keyboard or click on a cell to receive the input focus, an editor will appear and 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.

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 .