Implementing A Bulk Update UI

This example demos a bulk update UI for a table of data.

Note that the "server side" implementation is mocked out using mockjax, so you can see the entire implementation. Click the "Source Code" tab to see the code.

Explanation

• The entire table is wrapped in a form tag, with checkboxes on each row indicating the row id.
• A drop-down button sits outside the form (not strictly necessary) and includes the form with the ic-include attribute. The drop-down button targets the body of the table using the ic-target attribute and specifies an request indicator via the ic-indicator attribute.
• The drop-down button has two options, "Active" and "Deactive" which issue posts via ic-post-to to /activate and /deactivate respectively. Both options inherit all the attibutes specified by the parent dropdown button.
• When the server side handles a post it re-renders all the rows of the table, and applies a class, activate or deactivate to a row that is activated or deactivated. Using CSS transitions and the ic-transitioning, we can flash the color of these rows green or red, respectively.

Demo