Bulk Update Data Event
Bulk Update Data event allows you to make multiple changes or update a bulk of records at once across all selected columns in a data table at once.
Why to bulk update data?
Here are some reasons why updating data in bulk is better:
- Saves Time: Updating huge amounts of data can save a lot of time and thus increase the productivity of your team.
- Simple yet Efficient UI: Simple UI that uses a form allows you to efficiently edit & update existing data.
- Easy-to-Use: Configuring and applying the event to bulk update data is kept simple so anyone can easily bulk update multiple data at once.
How to Bulk Update Data?
First, we will set up the UI by adding a data table and collection form modal. Then, create the required events and bind them to complete the workflow process.
Here's the step-by-step explanation:
Add a Data Table
1. Drop a Data Table
Open a page and go to components panel to drag-and-drop a data table in it.

2. Tick the Multi Select Rows Checkbox
To allow bulk update data, tick the Multi Select Rows checkbox.

3. Bind the Collection
Open the setting of the data table and bind the collection to data table whose data you want to bulk update.

Collection Form Modal
As you bind a collection with multi-select rows feature, a button named, Open Bulk Selection Modal will get added automatically. So, let's create a modal which will open as you click this button.
4. Create a Modal
Go to the Snippets panel and create a modal with a form in it. Learn how to create a collection form modal.

5. Delete Extra Collection Form Fields
Only keep the field or fields that you want to bulk update and delete rest of the fields.

6. Bind Collection to the Modal
Open the settings of the modal and bind the collection whose data you want to bulk update.

Bulk Update Data Event
7. Go to Events
Go to the events panel and click the Add Event button. You will redirected to the add events page.

8. Name the Event
Name the event as you like and click the Create Event button. You will be redirected to the events action page.

9. Select Bulk Update Data Event Action
Click the add icon and take the cursor to the Collection option in the drop-down list. Then, select the Bulk Update Data event action.

10. Add Success & Error Message
Add a success and error message, then click the Save button.

11. Add Refresh Section Event
Click the add icon and take the cursor to the Navigation option in the drop-down list. Then, select the Refresh Section event action.

12. Bind the Bulk Update Data Event to the Collection Form Modal
Open the setting of the collection form dropped inside the modal. Then, bind the Bulk Update Data event (previously created) to it.

Create Show Modal Event
13. Create a Show Modal Event
Go to events and create a Show Modal event under Modal Popup category.

14. Select the Modal
Select the modal that you want to open using this event.

15. Enable Bulk Selection
Tick the checkbox to enable bulk selection as shown below.

16. Bind the Show Modal
As you tick the Multi Select Rows checkbox, a button named Open Bulk Selection Modal. Bind the Show Modal to it.

Preview or Publish
Now open the page in the preview or publish mode.
17. Tick the Checkboxes
Select the checkbox whose data you want to update.

18. Open Bulk Selection Modal
Click the Open Bulk Selection Modal button to open the bulk update modal that contains the collection field that you want to bulk update.

19. Type the Data
Add or type the information in the form and click the Submit button.

As you click the "Submit" button, the data in the selected fields will get updated.
